CSS框模型概念介绍

CSS框模型 (Box Model) 规定了元素框处置元素内容、内边距、边框 和 外边距 的方式。

CSS 框模型概述 ( 引荐学习：CSS根基教程 )

元素框的最内部分是实际的内容，直接包抄内容的是内边距。内边距显现了元素的背景。内边距的边沿是边框。边框之外是外边距，外边距默许是透亮的，因此不会遮挡其后的任何元素。

提醒：背景利用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默许值是零。但是，很多元素将由会员代理样式表设定外边距和内边距。可以通过将元素的 margin 和 padding 设定为零来覆盖这些阅读器样式。

这可以离别停止，也可以使用通用选中器对所有元素停止设定：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增添内边距、边框和外边距不会影响内容区域的尺寸，但是会增添元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。假如但愿这个元素框到达 100 个像素，就需要将内容的宽度设定为 70 像素，请看下图：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提醒：内边距、边框和外边距可以利用于一个元素的所有边，也可以利用于独自的边。

提醒：外边距可以是负值，并且在许多状况下都要使用负值的外边距。

虽然有办法解决这个问题。但是当前最好的解决方案是回避这个问题。也就是，不要给元素增加具有指定宽度的内边距，而是尝试将内边距或外边距增加到元素的父元素和子元素。

术语翻译

element : 元素。

padding : 内边距，也有材料将其翻译为填充。

border : 边框。

margin : 外边距，也有材料将其翻译为空白或空白边。

以上就是CSS框模型概念介绍的具体内容，更多请关注百分百源码网其它相关文章！