CSS解读之box-sizing属性

最新推荐文章于 2024-09-01 22:18:49 发布

zhanglir333

最新推荐文章于 2024-09-01 22:18:49 发布

阅读量1.3w

点赞数 20

分类专栏： css 文章标签： css box-sizing

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

box-sizing属性是CSS3中引入的，有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度。这句话有点绕，我理解为它是一种容器高宽的计算方法，具体是怎样的一种计算方法，和传统的计算方法又有什么区别，通过下面的例子我们可以很直观的了解到。

如图1-1所示，两个div均统一设置属性，然后针对第二个div设置了其box-sizing属性，并赋值为border-box。具体代码：

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta charset="utf-8">  
     <title></title>  
     <style type="text/css">  
         div{  
             width: 50px;  
             height: 50px;  
             margin: 10px;  
             padding: 10px;  
             border: 10px solid #888;  
         }  
         #bs{  
             box-sizing: border-box;  
         }  
     </style>  
 </head>  
 <body>  
 <div></div>  
 <div id="bs"></div>  
 </body>  
 </html>  

图1-1

从图1-1中可以看出两者大小的区别非常明显，我们可以借助谷歌浏览器来查看两者是如何计算的。图1-2是传统的计算方法，也就是上面第一个div的大小。

图1-2 传统计算方法

从图1-1中可以看出实际div的宽度为50+10*2+10*2=90px。因为我们给div指定的高宽是指的内容区的高宽，也就是图1-1中最里面的那个区域。

图1-3 border-box

图1-3是第二个div的实际计算大小，这里div的实际宽度为10+10*2+10*2=50px，这么一计算，我们就很明白了，原来在设置了box-sizing为border-box后，容器的高宽就是实际容器的高宽，而不是单纯指的是内容区的大小。也可以理解为，这时候的高宽计算方式把padding和border大小也算进来了。

box-sizing还有一些其他的属性值，列举了一个表格如下。

box-sizing属性值	浏览器说明	示例 div{ width:50px; height:50px; margin:10px; height:10px; border:10px solid #8; }
不设定	默认
border-box	IE8+，其他浏览器最新版均支持
content-box	IE8+，其他浏览器最新版均支持
padding-box	仅火狐浏览器

如图1-1所示，两个div均统一设置属性，然后针对第二个div设置了其box-sizing属性，并赋值为border-box。具体代码：

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta charset="utf-8">  
     <title></title>  
     <style type="text/css">  
         div{  
             width: 50px;  
             height: 50px;  
             margin: 10px;  
             padding: 10px;  
             border: 10px solid #888;  
         }  
         #bs{  
             box-sizing: border-box;  
         }  
     </style>  
 </head>  
 <body>  
 <div></div>  
 <div id="bs"></div>  
 </body>  
 </html>  

图1-1

图1-2 传统计算方法

从图1-1中可以看出实际div的宽度为50+10*2+10*2=90px。因为我们给div指定的高宽是指的内容区的高宽，也就是图1-1中最里面的那个区域。

图1-3 border-box

box-sizing还有一些其他的属性值，列举了一个表格如下。

box-sizing属性值	浏览器说明	示例 div{ width:50px; height:50px; margin:10px; height:10px; border:10px solid #8; }
不设定	默认
border-box	IE8+，其他浏览器最新版均支持
content-box	IE8+，其他浏览器最新版均支持
padding-box	仅火狐浏览器

如图1-1所示，两个div均统一设置属性，然后针对第二个div设置了其box-sizing属性，并赋值为border-box。具体代码：

[html]view plain copy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta charset="utf-8">  
     <title></title>  
     <style type="text/css">  
         div{  
             width: 50px;  
             height: 50px;  
             margin: 10px;  
             padding: 10px;  
             border: 10px solid #888;  
         }  
         #bs{  
             box-sizing: border-box;  
         }  
     </style>  
 </head>  
 <body>  
 <div></div>  
 <div id="bs"></div>  
 </body>  
 </html>  

图1-1

图1-2 传统计算方法

从图1-1中可以看出实际div的宽度为50+10*2+10*2=90px。因为我们给div指定的高宽是指的内容区的高宽，也就是图1-1中最里面的那个区域。

图1-3 border-box

box-sizing还有一些其他的属性值，列举了一个表格如下。

box-sizing属性值	浏览器说明	示例 div{ width:50px; height:50px; margin:10px; height:10px; border:10px solid #8; }
不设定	默认
border-box	IE8+，其他浏览器最新版均支持
content-box	IE8+，其他浏览器最新版均支持
padding-box	仅火狐浏览器