详解CSS 奇异盒实体模型和规范盒实体模型

日期：2021-01-20 类型：科技新闻 

关键词：微信公众号平台小程序，微信打分小程序，小程序发布，小程序大全，微信小程序编程

在html文本文档中，每一个3D渲染在网页页面中的标识全是1个个盒子实体模型。

盒子实体模型又分成 ： W3C规范的盒子实体模型 和 IE规范的盒子实体模型。

因为现阶段绝大多数流行的访问器适用的是W3C规范盒实体模型（规范盒实体模型），也是有保存对奇异盒子款式的分析，自然IE延用的是自身规范的盒实体模型（奇异盒子实体模型）

用两个简易的事例各自详细介绍下这两个盒子实体模型：

规范盒实体模型：

<!--html-->
<div class="box1">
    <div class="box2"></div>
</div>
<!--css-->
.box1{
         width: 200px;
         height: 200px;
         background-color: aqua;
         padding: 30px;
        }
.box2{
         width: 200px;
         height: 200px;
         background-color: red;
        }

这里外层盒子的width和height全是：30 + 200 + 30 = 260px。

奇异盒实体模型

<!--css中添加box-sizing特性-->
<!--box-sizing特性：border-box(奇异盒子实体模型)，content-box(规范盒实体模型)-->
.box1{
         width: 200px;
         height: 200px;
         background-color: aqua;
         padding: 30px;
         box-sizing: border-box;
        }
.box2{
         width: 200px;
         height: 200px;
         background-color: red;
        }

这里外层盒子的width和height全是：30 + 140+ 30 = 200px。

这里得出1个结果：

规范盒实体模型，1个块的总宽度 = width（content的宽度） + margin（上下）+ padding（上下）+ border（上下）

奇异盒实体模型，1个块的总宽度 = width（content + border + padding）+ margin(上下)

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：手机微信营销推广的6大商业服务方式 返回下一篇：没有了