CSS框模型概念介绍

CSS根基教程：CSS框模型(BoxModel)规定了元素框处置元素内容、内边距、边框和外边距的方式。元素框的最内局部是现实的内容，直接包抄内容的是内边距。内边距呈现了元素的配景。内边距的边沿是边框。边框之外是外边距，外边距默许是透亮

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

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

内边距、边框和外边距都是可选的，默许值是零。但是，很多元素将由会员代理样式表设定外边距和内边距。可以通过将元素的 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框模型概念介绍的细致内容，更多请关注 百分百源码网 其它相干文章！