详解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(上下)

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