CSS盒子模型

目录

• 盒子模型组成
• 边框（border）
• 内边距（padding）
• 外边距（margin）

盒子模型组成

盒子模型就是吧HTML页面中的布局元素看作是一个矩形盒子，也就是一个承装内容的容器。

CSS盒子模型的本质就是一个盒子，封装周围的HTML元素，它包括：边距(border)、外边距(margin)、内边距(padding)和实际内容(content)。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细、边框样式、边框颜色。

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色
border	复合写法，没有固定顺序
border-top	上边框复合写法
border-bottom	下边框复合写法
border-right	右边框复合写法
border-left	左边框复合写法
border-collapse	合并相邻的边框

border-style

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。效果取决于 border-color 值
• ridge - 定义 3D 脊线边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

边框会影响盒子的实际大小

边框会额外增加盒子的实际大小。因此我们有两种解决方案：

1. 测量盒子的大小的时候，不测量边框。
2. 如果测量的时候包含了边框，则需要width/height减去边框宽度。

内边距（padding）

padding 用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距
padding：5px	一个值，上下左右内边距都有5像素
padding：5px 10px	两个值，上下内边距是5像素，左右内边距是10像素
padding：5px 10px 20px	三个值，上内边距5像素，左右内边距10像素 下内边距20像素
padding：5px 10px 20px 30px	四个值，上5像素 右10像素 下20像素 左30像素 顺时针

内边距会影响盒子的实际大小

当我们给盒子指定 padding 值后，发生了两件事：

1. 内容和边框有了距离，添加了内边距。
2. padding 影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。

解决方案

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

外边距（margin）

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

maigin 的复合写法和 padding 完全一致。