css的框模型速查

在css中，每个元素被视为一个框。

每个框具有3个属性：

border 框的边框

margin 框与相邻框之间的距离

padding 框内容和边框之间的距离

对于margin存在一种特例：当元素底部页边空白接触另一个元素的顶部页边空白，只会显示其中范围较大的页边空白，如果2个页边空白大小相同，则最终的页边空白将等于其中一个页边空白的大小。

默认情况下，块级元素将占用页面（或者包含它的元素）的整个宽度，而内联元素将仅占用它需要的空间。

img元素貌似块级元素，实际是内联元素。

元素实际宽度计算大小为：

act_width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

padding属性值的单位可以是百分比。如果指示body元素的内边距是10%，则浏览器窗口宽度的5%将作为body元素内容内的每一边的内边距。如果指示一个位于100像素正方形单元格td元素具有10%的内边距，则边框正方形每一边周围将具有5个像素的内边距。元素的padding属性不会继承。

height 设置框的高度

width 设置框的宽度

line-height 设置文本行的高度（类似于行距设置）

max-height 设置框的最大高度

min-height 设置框的最小高度

max-width 设置框的最大宽度

min-height 设置框的最小宽度

overflow 属性：

hidden 超出框范围内容被隐藏

scroll 框内增加滚动栏