box-sizing这个属性可规定盒子大小是否包含padding和border
1.以下三个值:
box-sizing:content-box;/*盒子宽度就是内容的宽度,不包含border,padding.有这个属性之前就是这种情况*/
box-sizing:border-box;/*盒子宽度包含border,padding*/
box-sizing:padding-box;/*包含padding*/
2.这有什么用处:
以前在布局时,比如经典的左边菜单右边内容的两栏布局一般是
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
.left{width:15%}
.right{width:83.5%}
// 这里left+width不是100%.因为它两里padding或者border值,会将实际占用的宽度撑出设定的值.就算没有设定这两值,由于某些原因,实测结果也会发生right会被挤到下一行,布局就乱了.
// 如果使用了box-sizing之后,就可以弄成100%了.如下:
.container{box-sizing:content-box;}/* 外层让内容充满整个大小,并且不设padding margin border,并且它的父级是body为好,并且html,body的margin,padding都设为0 */
.left,.right
{
box-sizing:border-box;/* 设为包含border和padding的那种.这样一来,即使设置了这两属性,它两的宽度也不会撑出设定值.而是会挤压内容区的大小 */
}
.left{width:15%;border:1px solid red;padding:5px;}
.right{width:85%;border:1px solid green;padding:8px;}
/*left+right是100%,并且设定了border padding.但是 right不会被挤到第二行 ^_^*/
3.如果设定left或者right的margin会怎么样呢?
如果设置了margin,那么right就会挤下去了.所以不能设外边距.用padding就好了.
4.注意其它问题
.left,.right左右布局,如果使用行内块属性inline-block而不是浮动float,那么需要将它俩的父级DOM的FONT-SIZE设为0,不然的话它两就不会在一行.因为它两之间的空白也算字符,会占空间,这样就超出100%了,结果.right会被挤到下一行