前端——盒模型

导言：当HTML 定义了各类元素以后，由CSS将所有的元素置于不同的盒子，一个个盒子和其中所包含的的元素组成了一个网页的基本部分...

一、CSS的盒模型

• Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.

• Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。

• Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。

• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

1.标准盒模型

一般在标准盒模型中，设置的height和width都只对content-box起作用，padding、margin和border需另外进行设置。

tips:

<1> margin并不计入实际大小，但是仍然会影响页面所占的空间（影响盒子外部所占的空间）一般盒子的范围到边框为止，并不涉及到margin。

<2> 且牢记模型的总宽度和总高度=各部分*2（除content-box仅计算一次即可）后的总和

2.替代（IE）盒模型

该种盒模型下的宽度都是可见宽度，因此内容宽度是该宽度减去边框和填充部分

通俗点来讲：可以一次性设置想要的呈现方式，不必再单独设置padding，border等元素的参数；

二、宽高部分解释

① 宽高：

width被认定为左内边界到右内边界的距离

② 高度：

height一般被认为是上内边界到下内边界的距离

tips：

在CSS中任何块级的元素均可被设置显示高度，如若 设置的显示高度小于内容高度，则自动添加一个滚轮，若大于内容高度，则依据浏览器的overflow属性

宽高和margin均可设置为auto：

对于块级元素：

（1）宽度设置为auto：则会尽可能的宽，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距

（2）高度设置为auto：则会尽可能的窄，元素高度=恰好足以包含其内联内容的高度