盒模型中的margin和padding如果值为百分比,则结果为相对于元素内容宽度的百分比。如下图中的margin-top和padding-top都设置为5%。
默认情况下,盒子的背景(由background-image和background-color也就是背景图片和背景颜色)会扩展到border边界上来。可使用background-clip来约束它们的范围。取值有:border-box(默认),padding-box和content-box。
outline轮廓,这玩意看起来像边界但又不属于盒模型里的东西。它并不影响元素的总宽度,准确点来说它处于border边界之外又处于外边距margin之内。
通过限制一个宽度范围,设置百分比宽度可实现一个响应式的布局。
#box{
min-width: 500px;
max-width: 1280px;
margin: 0 auto;
width:70%;
}
max-width还有一个很重要的作用是实现相应式的图片。将图片的wax-width设为100%,当父容器的宽度小于图片宽度时,图片也会跟着一起缩小而不会溢出。这种方式有很好的浏览器兼容性,IE7都支持。
2.浮动
清除浮动在布局中很常用。清除浮动通常有两种常用方法:触发BFC或使用伪元素。
有关BFC的知识:
BFC是block format content的简称。在CSS中叫做Flow Root,是一个独立的布局环境。以下条件会触发BFC:
1.float除了none以外的任何值。
2.overflow除了visible以外的值(hidden,auto,scroll)。
3.display(table-cell, table-caption, inline-block)。
4.position(absolute, fixed).
BFC的特性:
1.创建了BFC的元素中,子浮动元素也会参与高度计算。
2.与浮动元素相邻的、创建了BFC的元素,都不能与浮动元素互相覆盖。
3.创建了BFC的元素不会与它们的子元素margin重叠。
注意:给body中添加overflow:hidden是触发不了BFC的,也就是说在body中将一个子元素浮动后,无法通过触发BFC来让body包含浮动元素。这就是为什么要创建一个wrapper的div后再在里面布局的原因。
在支持BFC的浏览器(IE8+,firefox,chrome,safari)通过创建新的BFC闭合浮动;
在不支持 BFC的浏览器 (IE6-7),通过触发 hasLayout 闭合浮动。