CSS两种盒模型(标准盒模型&IE盒模型)

作者：笔触狂放9 | 2024-05-27 09:01:49

踩

标准盒模型

介绍

CSS盒模型本质是一个盒子，由边距、边框、填充和实际内容组成。

CSS盒模型分为两种：标准盒模型、IE盒模型（也称为怪异盒模型）。

两种盒模型的区别在于他们的总宽度的计算公式不一样。

在文档首部加了 <!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。

width = 内容（content）的宽度

height = 内容（content）的高度

总宽度：width + margin（左右） + padding（左右） + border（左右）

总高度：height +margin（上下） + padding（上下） + border（上下）

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

width = border + padding + 内容（content）的宽度

height = border + padding + 内容（content）的高度

总宽度：width + margin（左右）（即 width 已经包含了 padding 和 border）

总高度：height + margin（上下）（即 height 已经包含了 padding 和 border）

设置 padding 、border 后，真正宽度或高度就会改变。

CSS 中的 box-sizing 属性定义了 user agent（用户计算机程序）应该如何计算一个元素的总宽度和总高度。

属性值：border-box（IE盒模型）、content-box（标准盒模型）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/630826