盒子模型

一个盒子主要属性就5个：width，height，Padding，margin，border。

width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。

height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度

padding是“内边距”的意思

border是“边框”

margin是“外边距

真实占有的宽度 = 左边的border +左边的padding + width +右边的border +右边的padding

认识padding

padding内边距，padding背景颜色一定和内容区域一样的，background-color将填充border以内所有的区域

认识margin

margin-top,margin-right,margin-bottom,margin-left,(这四个属性使用的时候与float会相互影响，可以使用clear：both，清除浮动)

margin:0 auto(这个盒子居中，不是居中文本，必须是有明确width)

小结：padding本质上指父子关系，margin是兄弟的关系

认识border

边框的三要素：粗细、线性、颜色

dashed、dotted、solid、double、groove、ridge、inset、outset

 

延伸：

HTML将标签分为容器级和文本级

容器级有：div,h,li,dt,dd......

文本级：a,p,em,b,u,i,span......

CSS将标签分为块级元素和行内元素

块级元素：

1.霸占一行，不能与其他任何元素并列

2.能接受宽、高

3.如果不设置宽度，那么宽度将默认变为父亲的100%。

行内元素：

1.与其他行内元素并排

2.不能设置宽、高。默认的宽度，就是文字的宽度。

 

Display:”显示模式”，用来修改元素的行内、块级的性质

Inline就是“行内”

一旦给当前一个便签设置 display：inline 这个标签立刻改变为行内元素与span类似没有区别

一旦给当前一个便签设置 display：block 这个标签立刻改变为块级元素与div类似没有区别