CSS—背景属性与盒子模型（border、padding、margin）
目录
一.背景属性
二.盒子模型
1.边框border
a. 圆角属性border-radius
b. 图像属性border-image
2. 内边距padding
3. 外边距margin
3. 宽度width与高度height
一.背景属性
浏览器背景图默认是平铺效果（复制图片直至填满设置的区域大小）
背景应用于由内容和内边距、边框组成的区域。
| 属性 | 描述 |
|---|---|
| background | 在一条声明中设置所有背景属性的简写属性。 |
| background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
| background-clip | 规定背景的绘制区域。 |
| background-color | 设置元素的背景色。 |
| background-image | 设置元素的背景图像。 |
| background-origin | 规定在何处放置背景图像。 |
| background-position | 设置背景图像的开始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
| background-size | 规定背景图像的尺寸。 |
在使用简写属性时，属性值的顺序为：
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
二.盒子模型
1.边框border
边框线会撑大盒子，解决方法：
border {box-sizing:border-box
}| 属性 | 描述 | 值 |
|---|---|---|
| border-style | 边框类型 | solid(实线)、dashed(虚线)、dotted(点线) |
| border-width | 宽度 | 数值 |
| border-color | 边框颜色 | 颜色值、RGB、RGBA、HSL、HSLA等 |
| border-radius | 圆角属性 | |
| border-(方位) | 单独设置某一方向的边框 | 方位包括left right top bottom |
| border | 边框属性的简写 | 其中width、color、style必须写，无顺序要求 |
-
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- 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
-
border-width属性指定四个边框的宽度。
-
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。
-
可以设置一到四个值（用于上边框、右边框、下边框和左边框）
-
border-color属性用于设置四个边框的颜色。 -
border简写必须包含width、color、style属性。
a. 圆角属性border-radius
| 属性 | 描述 |
|---|---|
| border-radius | 用于设置所有四个 border---radius 属性的简写属性。 |
| border-top-left-radius | 定义左上角边框的形状。 |
| border-top-right-radius | 定义右上角边框的形状。 |
| border-bottom-right-radius | 定义右下角边框的形状。 |
| border-bottom-left-radius | 定义左下角边框的形状。 |
单值写法：
从左上角开始顺时针赋值至左下角 border-radius: 10px 20px 30px 40px;
三值，两值写法：
从左上角开始顺时针赋值至左下角，缺少的值与对角相等
常用的形状：
b. 图像属性border-image
border-image 属性接受图像，并将其切成九部分，就像井字游戏板。然后，将拐角放置在拐角处，并根据设置重复或拉伸中间部分。
为了使 border-image 起作用，该元素还需要设置 border 属性！
| 属性 | 描述 |
|---|---|
| background | 用于在一条声明中设置所有背景属性的简写属性。 |
| background-clip | 规定背景的绘制区域。 |
| background-image | 为一个元素指定一幅或多幅背景图像。 |
| background-origin | 规定背景图像的放置位置。 |
| background-size | 规定背景图像的大小。 |
2. 内边距padding
注意：border、padding都会撑大盒子
解决方法：
手动减法（自己计算减去border和padding的尺寸）
内减模式（添加属性：box-sizing:border-box）
3. 外边距margin
不会撑大盒子尺寸
重要应用：版心居中 margin: 0 auto即将左右外边距的值设置为自适应，注意此时必须设置好盒子的宽度，因为浏览器需要此数据自动做减法。
3. 宽度width与高度height
设置的是padding、border、margin区域内的宽度与高度。
清除默认样式：
* {margin: 0;padding: 0;box-sizing: border-box;
}
【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】