类别：htmlcss / 日期：2022-10-26 / 浏览：237 / 评论：0
简介：就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
box-sizing(有 3 个值哦)：border-box,padding-box,content-box.
标准盒子模型：
IE 盒子模型：
区别：从图中我们可以看出，这两种盒子模型最主要的区别就是 width 的包含范围，在标准的盒子模型中，width 指 content 部分的宽度，在 IE 盒子模型中，width 表示content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：
标准盒子模型的盒子宽度：左右 border+左右 padding+width
IE 盒子模型的盒子宽度：width
在 CSS3 中引入了 box-sizing 属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box 表示的是 IE 盒子模型
最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右padding+width也很好理解性记忆，包含什么，width 就从什么开始算起。
版权声明 : 本文未使用任何知识共享协议授权，您可以任何形式自由转载或使用。
发表评论 / 取消回复