用box-sizing属性设置盒子模型以及盒子模型的计算

盒子模型分为 w3c 标准盒子模型和 IE 的传统盒子模型(IE6 以下,不包含 IE6 版本或 “QuirksMode 下 IE5.5+”)。

如果添加 <!DOCTYPE html> 文档类型声明,按照标准盒子模型解析,如果没有添加文档类型声明,各浏览器按照自己的方式解析,比如 IE 浏览器用传统盒子模型解析,火狐浏览器用标准盒子模型解析。

box-sizing 可以设置使用哪一种盒子模型,即使用哪种方式解析盒子尺寸。

语法
box-sizing : content-box | border-box;

盒子模型计算

不管哪种盒子模型,都包括 marginpaddingbordercontent 这四个元素。

标准盒子模型(content-box)

盒子在页面所占宽度:左外边距+左边框+左内边距+所设置宽度(内容宽度)+右内边距+右边框+右外边距
盒子在页面所占高度:上外边距+上边框+上内边距+所设置宽度(内容高度)+下内边距+下边框+下外边距
所设置的宽度(高度)=内容宽度(高度)

IE 盒子模型(border-box)

盒子在页面所占宽度:左外边距+所设置宽度(左边框+左内边距+内容宽度+右内边距+右边框)+右外边距
盒子在页面所占高度:上外边距+所设置高度(上边框+上内边距+内容高度+下内边距+下边框)+下外边距
所设置的宽度(高度)=内容宽度(高度)+内边距+边框

代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒子模型的计算</title>
    <style type="text/css">
        .content-box{
            box-sizing: content-box;
            width: 100px;
            height: 100px;
            margin: 30px;
            padding: 20px;
            border: 2px solid red;
        }
        .border-box{
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            margin: 30px;
            padding: 20px;
            border: 2px solid orange;
        }
    </style>
</head>
<body>
    <div class="content-box"></div>
    <div class="border-box"></div>
</body>
</html>

效果图:



content-box.jpg

border-box.jpg

两个盒子设置的宽和高都是一样的,现在计算一下盒子在页面中所占的宽和高。

  • content-box
    width=30px+2px+20px+100px+20px+2px+30px=204px
    height=30px+2px+20px+100px+20px+2px+30px=204px
  • border-box
    width=30px+100px=130px
    height=30px+100px=130px
    其中100px=2px+20px+56px+20px+2px。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。