CSS Box模型

如何使用CSS Box模型

每个CSS元素本质上都是一个盒子。每个元素都是一个通用框。

盒子模型根据一些CSS属性说明了元素的大小。

从内部到外部,我们有:

  • 内容区
  • 填充
  • 边界
  • 利润

可视化盒子模型的最佳方法是打开浏览器DevTools并检查其显示方式:

在这里,您可以看到Firefox如何告诉我span我强调的元素。我右键单击它,按Inspect Element,然后转到DevTools的“布局”面板。

看到,浅蓝色空间是内容区域。围绕它的是填充,然后是边框,最后是边距。

默认情况下,如果您在元素上设置了宽度(或高度),则该设置将应用于内容区。所有的填充,边框和边距计算都在值之外进行,因此在进行计算时必须牢记这一点。

您可以使用Box Sizing更改此行为。

免费下载我的CSS手册


更多CSS教程: