CSS布局之盒子模型[一]

每个HTML标签都会生成一个盒模型，盒模型是正常流布局非常重要的概念。盒模型由内边距(padding)+长度(width)+高度(height)+边框(border)+外边距(margin)组成。

1. 宽度(width)和高度(height)

盒模型有2种类型，怪异盒模型和标准盒模型，在不同盒模型情况下宽度(width)和高度(height)计算方式会不同。

如果没正确声明<!DOCTYPE HTML>文档类型或设置box-sizing: border-boxCSS属性，则会产生怪异盒模型，此时宽度(width)=内容区宽度+内边距(padding)+边框(border)，高度也是这样。

正确声明<!DOCTYPE HTML>文档类型或设置box-sizing: content-boxCSS属性时，会产生标准盒模型，此时宽度(width)=内容区宽度，高度也是这样。

// 宽度=内容区宽度+左右内边距+左右边框

// 高度=内容区高度+上下内边距+上下边框

box-sizing: border-box;

// 宽度=内容区宽度  高度=内容区高度

box-sizing: content-box;

2. 内边距(padding)

内边距指内容区跟边框之间的距离，可通过padding(内边距)统一设置，也可通过上内边距(padding-top)、左内边距(padding-left)、下内边距(padding-bottom)、左内边距(padding-left)单独设置每一边内边距。

// 设置1个值

padding: 1px;

// 等价于

padding-top: 1px;

padding-right: 1px;

padding-bottom: 1px;

padding-left: 1px;

// 设置2个值

padding: 1px 2px;

// 等价于

padding-top: 1px;

padding-right: 2px;

padding-bottom: 1px;

padding-left: 2px;

// 设置3个值

padding: 1px 2px 3px;

// 等价于

padding-top: 1px;

padding-right: 2px;

padding-bottom: 3px;

padding-left: 2px;

// 设置4个值

padding: 1px 2px 3px 4px;

// 等价于

padding-top: 1px;

padding-right: 2px;

padding-bottom: 3px;

padding-left: 4px;

3. 边框(border)

边框指包裹内容区和内边距的框框，可通过border属性统一设置(border-style(边框样式)、border-width(边框宽度)和border-color(边框颜色)3个属性的合并)。也可以通过border-top(上边框)、border-right(右边框)、border-bottom(下边框)和border-left(左边框)单独设置。

3.1 边框宽度(border-width)

边框宽度表示边框的粗细，可以取任意合法的长度单位值。

// 1个值：四条边框都为1px

border-width: 1px;

// 2个值：上下边框为1px 右左边框为2px

border-width: 1px 2px;

// 3个值：上边框为1px 右左边框为2px 下边框为3px

border-width: 1px 2px 3px;

// 4个值：上边框为1px 右边框为2px 下边框为3px 右边框4px

border-width: 1px 2px 3px 4px;

PS: 单独设置跟内边距差不多，如border-top-width：2px

3.2 边框样式(border-style)

边框样式可以取下面的值。

// 1个值：4条边框都没有样式

border-style: none;

// 2个值：上下边框样式为实线，右左边框样式为双实线

border-style: solid double;

// 3个值：上边框为点状 右左边框为虚线 下边框为继承

border-style: dotted dashed inherit;

// 4个值：上右下左边框样式分别为：3D凹槽 3D垄状 3D内侧 3D外侧

border-style: groove ridge inset outset ;

3.3 边框颜色(border-color)

边框颜色可取任意合法的颜色模式值。

// 1个值：4条边框都为红色

border-color: red;

// 2个值：上下边框颜色为红色，右左边框颜色为黄线

border-color: red yellow;

// 3个值：上边框为红色 右左边框为黄色 下边框为蓝色

border-color: red yellow blue;

// 4个值：上右下左边框颜色分别为：红色 黄色 蓝色 绿色

border-color: red yellow blue green;

3.4 合并属性

border可以合并上面3个属性。

// 1px、灰色的实线边框

border: 1px solid grey;

4. 外边距(margin)

外边距是盒模型的最外一层，取值跟上面差不多。

// 1个值：4个外边距都为1px

margin: 1px;

// 2个值：上下外边距为1px 右左外边距为2px

margin: 1px 2px;

// 3个值：上外边距为1px 右左外边距为2px 下外边距为3px

margin: 1px 2px 3px;

// 4个值：上外边距为1px 右外边距为2px 下外边距为3px 左外边距为4px

margin: 1px 2px 3px 4px;

PS:也可以通过margin-top:1px这样的方式来单独设置外边距