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必须写，无顺序要求

1. 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 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

1. border-width 属性指定四个边框的宽度。

• 可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。

• 可以设置一到四个值（用于上边框、右边框、下边框和左边框）

1. border-color 属性用于设置四个边框的颜色。

2. 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;
}

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】