box-sizing属性

Posted 2020-10-05 MirrorSpace

 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就好了.