文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在css中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。
在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
在IE模型中: 总宽度 = margin-left + width + margin-right
立即学习“前端免费学习笔记（深入）”；
在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式.
共包括两个选项：
content-box：标准盒模型，CSS定义的宽高只包含content的宽高。（默认）
border-box：IE盒模型，CSS定义的宽高包括了content，padding和border
实例：
(con1设置为box-sizing：border-box，con为默认的content-box)
<span style="color: #008080;"> 1</span> <head lang="en">
<span style="color: #008080;"> 2</span> <meta charset="UTF-8">
<span style="color: #008080;"> 3</span> <title></title>
<span style="color: #008080;"> 4</span> <style>
<span style="color: #008080;"> 5</span> .con{width: 100px; height: 100px;background-<span style="color: #000000;">color:royalblue;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;"> border:1px solid red; padding: 10px;}
</span><span style="color: #008080;"> 7</span> .con1{box-sizing: border-<span style="color: #000000;">box;}
</span><span style="color: #008080;"> 8</span> </style>
<span style="color: #008080;"> 9</span> </head>
<span style="color: #008080;">10</span> <body>
<span style="color: #008080;">11</span> <div class="con"></div>
<span style="color: #008080;">12</span> <div class="con con1"></div>
<span style="color: #008080;">13</span> </body>
在控制台可以一目了然的看出两个盒子的区别
第一个div的盒子模型如下：content-box
第二个div的盒子模型如下：border-box
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
613
