每个HTML标签都会生成一个盒模型,盒模型是正常流布局非常重要的概念。盒模型由内边距(padding)
+长度(width)
+高度(height)
+边框(border)
+外边距(margin)
组成。
1. 宽度(width)和高度(height)
盒模型有2种类型,怪异盒模型
和标准盒模型
,在不同盒模型情况下宽度(width)
和高度(height)
计算方式会不同。
如果没正确声明<!DOCTYPE HTML>
文档类型或设置box-sizing: border-box
CSS属性,则会产生怪异盒模型,此时宽度(width)=内容区宽度+内边距(padding)+边框(border)
,高度也是这样。
正确声明<!DOCTYPE HTML>
文档类型或设置box-sizing: content-box
CSS属性时,会产生标准盒模型,此时宽度(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这样的方式来单独设置外边距