css3——box-sizing属性

很多朋友们可能会疑惑，不知道box-sizing属性是有什么作用，自己也很少会用到，但是想必不少人在做网页布局的时候经常遇到一个问题就是我明明设置了父元素设置了假如是宽高500px，5个子元素左浮动设置宽高均是100px都设置有边框。为什么第五个元素被挤下到第二排呢？

例子1：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>加边框的</title>

     <style>

         .box{

             width: 300px;

             height: 300px;

             border: 1px solid black;

             margin: 0 auto;

         }

         .first {

             width: 150px;

             height: 100px;

             float: left;

             background: pink;

             border: 1px solid red;    /*增加了边框*/   /*解决方法在这里增加box-sizing:border-box*/

         }

         .second {

             width: 100px;

             height: 100px;

             background: blue;

             float: left;

         }

         .third{

             width: 50px;

             height: 100px;

             float: left;

             background: green;

         }

     </style>

 </head>

 <body>

  <div class="box">

     <div class="first">123</div>

     <div class="second">456</div>

     <div class="third">789</div>

  </div>

 </body>

 </html>

效果如下：

此时你可能会疑惑，我明明设置了子元素总宽度跟父元素相等了，为什么子元素没有合并到一行呢，请看代码的第18行多个了边框，边框设置了1px，css默认情况下不会将边框也计算在宽度内的所以你可以这样计算字元素宽度：

子元素150px+100+2+50=302px；超出父元素300px，所以第三个元素才不会合并在一行内。宽度左右边框共占用2px。

解决的方法：

　　1.父元素设置为302px。

　　2.在设置了边框的子元素中增加：box-sizing:border-box;

box-sizing:border-box;的作用是将第三个子元素设置的宽度（包含边框）一起算在width:100px里面。

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

巴特西

css3——box-sizing属性

最新文章

热门文章