每个 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 这样的方式来单独设置外边距
来源: https://www.cnblogs.com/juetan/p/13210356.html