让我们向你解释什么是css盒子模型。相信朋友们也应该密切关注这个话题。现在，让我们告诉朋友什么是css盒子模型。边肖还收集了关于什么是css盒子模型的相关信息。我希望你看到后会喜欢。
S3盒模型是CSS3技术使用的思维模型，这意味着在网页文档中，每个元素都呈现为一个矩形框，描述元素所占据空间的内容。Css有两种盒子模型：W3C盒子模型(标准盒子模型)和IE盒子模型(怪异盒子模型)。
本教程操作环境：windows7系统，CSS3HTML5第5版，戴尔G3电脑。
1.什么是CSS盒子模型？
S3盒模型是CSS3技术使用的思维模型，这意味着在网页文档中，每个元素都呈现为一个矩形框，描述元素所占据空间的内容。
模型，顾名思义，就是一个盒子。生活中的盒子有长有宽有高，盒子本身有厚度，可以用来装东西。页面上的盒子模型可以理解为从盒子顶部看的平面图，盒子中的内容相当于盒子模型的内容。东西和盒子之间的缝隙理解为填充物)；盒子模型；盒子本身的厚度就是边框)；盒子模型；盒子外面和其他盒子之间的距离就是盒子的边距。
元素的外部边距、边框、填充和内容构成了CSS盒子模型。
1.箱形模型示意图
2.IE盒子模型和W3C盒子模型
CSS盒子模型分为IE盒子模型(图2)和W3C盒子模型(图3)。实际上，IE盒子模型在Quirks模式下是盒子模型，而W3C盒子模型在Standards模式下是盒子模型。
IE6及更高版本，现在所有标准浏览器都遵循W3C box模型，IE6以下的浏览器也遵循IE box模型。
图2。IE盒子模型
图3。W3C盒子模型
从上图可以直观地看出，IE盒子模型的宽度或高度计算如下：宽度/高度=内容填充边框，W3C盒子模型的宽度或高度计算如下：宽度/高度=内容。
举一个简单的例子：一个div的宽度和高度为100px，内部边距为10px，边框为5px，外部边距为30px。图4显示了不同模型中显示的结果。W3C盒子模型中显示的div的总宽度和高度(包括外边距、边框、内边距和内容)为100 10 5 30=145px，IE盒子模型中显示的div的总宽度和高度为100 30=130px。显然，如果元素的宽度是一定的，W3C盒子模型的宽度不包括内边距和边框，而IE盒子模型包括。
代码如下：
风格。内容{ background: # eeeheight: autoborder: 1px纯蓝；}。div { width: 100px高度： 100像素；margin: 30pxpadding: 10px
;border: 5px solid blue;} .div-01 {background: orange;} .div-02 {background: yellow;box-sizing: border-box;} </style> <div class="content"> <div class="div div-01">div01</div> <div class="div div-02">div02</div> </div>页面效果如下：
图4. 区别
3、CSS3属性box-sizing
如果计算一个盒子的长宽高，我们一般都是盒子本身的厚度加上盒子里的空间大小，所在在IE盒模型和W3C盒模型，我们会觉得IE盒模型更符合逻辑。（学习视频分享：css视频教程）
不同的人有不同的习惯，所以CSS3新增了一个属性box-sizing: content-box | border-box | inherit，默认值为content-box。如果值为content-box，那元素遵循的是W3C盒模型；如果值为border-box，那元素遵循的是IE盒模型；如果值为inherit，该属性的值应该从父元素继承。
4、关于盒模型的使用
有没有人和我一样，觉得属性box-sizing真是个好东西，只需设置所有元素的该属性为content-box或者border-box，满足自己的习惯。
虽说现在的浏览器都兼容该属性（如上图），还是得以防万一，在属性前最好暂时加-webkit-和-moz-前缀。
* { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }在上图，我们看到IE兼容属性box-sizing必须是8或者更高的版本，其他浏览器都可以自动升级，兼容性不担心，那如果是IE7、IE6或者更低的版本，怎么办？还有，如果我们不用该属性，那浏览器该选择哪种盒模型呢？
其实，浏览器选择哪个盒模型，主要看浏览器处于标准模式（Standards Mode）还是怪异模式（Quirks Mode）。我们都记得<!DOCTYPE>声明吧，这是告诉浏览器选择哪个版本的HTML，<!DOCTYPE>后面一般有DTD的声明，如果有DTD的声明，浏览器就是处于标准模式；如果没有DTD声明或者HTML4一下的DTD声明，那浏览器按照自己的方式解析代码，处于怪异模式。
处于标准模式的浏览器（IE浏览器版本必须是6或者6以上），会选择W3C盒模型解析代码；处于怪异模式的浏览器，则会按照自己的方式去解析代码，IE6以下则会是选择IE盒模型，其他现代的浏览器都是采用W3C盒模型。
因为IE6以下版本的浏览器没有遵循Web标准，不论页面开头有没有DTD声明，它都是按照IE盒模型解析代码的。
更多编程相关知识，请访问：编程视频！！
以上就是css盒模型是什么的详细内容，更多请关注php中文网其它相关文章！
来源：php中文网
标签：
免责声明：本文由用户上传，如有侵权请联系删除！