您现在的位置:爱折腾>> web>>正文内容

CSS3 box-sizing 属性

我们先看看w3school上的介绍:

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
默认值:         content-box
继承性:         no
版本:         CSS3
JavaScript 语法:         object.style.boxSizing="border-box"

语法

box-sizing: content-box|border-box|inherit;

content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit:规定应从父元素继承 box-sizing 属性的值。

以上是w3c上对box-sizing的介绍,我想很多新手同学看了是一头雾水,我第一次看这个属性的时候也是看完就过了,因为日常所做的项目需要兼容IE6+,所以好多css3属性在我的工作中是用不到的,但是这不能成为我们不去学习新知识的理由,今天我们就来看看这个属性在实际开发中的应用,好让大家以后的开发中更流畅的布局。

content-box是默认值,这里不做多讲,我们着重来看border-box:

场景描述:我们有一个未知宽度的外围容器(div)(这里暂定为500px),里面有俩个子元素,一个左浮动,一个右浮动,他们各占父容器的50%;到此没有任何问题,但是我们有个需求,这俩个子元素要有1px的边框,这是我想大家都能想到,第二个子元素换行了,原因我就不做解释了,不理解的动手实践一下即可,这时,我们的border-box就应该上场了,我们只需在俩个子元素上添加box-sizing:border-box;即可,为什么呢?

拿公式说话:
content-box:横向:content-width = width+padding-left+padding-right+border-left+border-right;
border-box: 横向:content-width = width-padding-left-padding-right-border-left-border-right;
纵向与横向类似,这里就不做赘述,通过公式我们就一目了然,即content-box是外扩,border-box是内缩。

应用场景:在传统的布局中,大多情况下,我们是可以确定元素的宽高,所以很少用这个属性,但是在当下流行的响应式布局,移动端web开发中,元素的尺寸都是用百分比表示的,此时,box-sizing:border-box;就派上用场了。
示例代码如下:(兼容IE8+)

  1. <!DOCTYPE html> 
  2.  
  3. <html lang="en"> 
  4.  
  5. <head> 
  6.  
  7.         <meta charset="UTF-8"> 
  8.  
  9.         <title>Document</title> 
  10.  
  11. </head> 
  12.  
  13. <style type="text/css"> 
  14.  
  15.         * {  
  16.  
  17.                 margin:0;  
  18.  
  19.                 padding: 0;  
  20.  
  21.         }  
  22.  
  23.         .wraper {  
  24.  
  25.                 width: 500px;  
  26.  
  27.                 height: 100px;  
  28.  
  29.                 margin: 50px auto;  
  30.  
  31.         }  
  32.  
  33.         .f-left {  
  34.  
  35.                 float: left;  
  36.  
  37.                 width: 50%;  
  38.  
  39.                 background: red;  
  40.  
  41.                 border:1px solid green;  
  42.  
  43.                 box-sizing:border-box;  
  44.  
  45.         }  
  46.  
  47.         .f-right {  
  48.  
  49.                 float: right;  
  50.  
  51.                 width: 50%;  
  52.  
  53.                 background: blue;  
  54.  
  55.                 border:1px solid green;  
  56.  
  57.                 box-sizing:border-box;  
  58.  
  59.         }  
  60.  
  61.         }  
  62.  
  63. </style> 
  64.  
  65. <body> 
  66.  
  67. </body> 
  68.  
  69. <div class="wraper"> 
  70.  
  71.         <div class="f-left">50%</div> 
  72.  
  73.         <div class="f-right">50%</div> 
  74.  
  75. </div> 
  76.  
  77. </html> 

相关文章