盒子的分类#
所有 HTML 元素可以看作被包含在一个个盒子中，盒子可分为区块盒子和行内盒子。
| 区块盒子 | 行内盒子 |
|---|---|
| 盒子会独占一行 | 可以和其他行内元素在同一行 |
| 可以设置宽度、高度、内边距、边框、外边距 | 不能设置宽度、高度、内边距、边框、外边距 |
常用元素：div, p, h1~h6,ul, ol, table | 常用元素：span, em, strong, a, img |
区块盒子#
盒子模型的属性包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。
| 属性 | 说明 |
|---|---|
| 内容（content） | 元素的实际内容，如文本、图片等 |
| 内边距（padding） | 元素内容与边框之间的空间 |
| 边框（border） | 元素边框的宽度、样式和颜色 |
| 外边距（margin） | 元素边框与其他元素之间的空间 |
边框属性#
border 属性用于设置元素的边框， 可以设置边框的宽度、样式和颜色，
border: border-width border-style border-color。
border: 1px solid #000;| 属性 | 说明 |
|---|---|
| 边框宽度 (border-width) | 边框的宽度，单位可以是像素(px)、点(pt)、百分比(%)等 |
| 边框样式 (border-style) | 边框的样式，如实线solid、虚线dashed、点线dotted等 |
| 边框颜色 (border-color) | 边框的颜色，可用颜色名、十六进制值、RGB值等表示 |
可以使用 border-left、border-right、border-top、border-bottom 分别设置元素的左、右、上、下边框。
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;边框圆角#
border-radius 属性用于设置元素的边框圆角， 可以设置圆角的半径，单位可以是像素(px)、百分比(%)等。
border-radius: 5px;将长方形设置为 border-radius: 50% 可以将其设置为胶囊圆角，
将正方形设置为 border-radius: 50% 可以将其设置为圆形。
四个角分别设置圆角半径：
| 圆角写法 | 说明 |
|---|---|
border-radius: 5px | 所有角设置圆角半径为 5px |
border-radius: 5px 10px | 左上角和右下角设置圆角半径为 5px，右上角和左下角设置圆角半径为 10px |
border-radius: 5px 10px 15px | 左上角设置圆角半径为 5px，右上角和左下角设置圆角半径为 10px，右下角设置圆角半径为 15px |
border-radius: 5px 10px 15px 20px | 分别设置左上角、右上角、右下角、左下角的圆角半径，按顺时针方向设置 |
过渡效果#
transition 属性用于设置元素的过渡效果， 可以设置过渡的属性、过渡的时间、过渡的时间函数、过渡的延迟时间等，transition: property duration timing-function delay;。
transition: width 2s ease-in-out 1s;内边距属性#
padding 属性用于设置元素的内边距， 可以设置内边距的上、右、下、左四个方向的内边距，单位可以是像素(px)、百分比(%)等。
| 写法 | 说明 |
|---|---|
padding: 10px | 所有方向的内边距都设置为 10px |
padding: 10px 20px | 上、下方向的内边距设置为 10px，左、右方向的内边距设置为 20px |
padding: 10px 20px 30px | 上方向的内边距设置为 10px，左、右方向的内边距设置为 20px，下方向的内边距设置为 30px |
padding: 10px 20px 30px 40px | 分别设置上、右、下、左四个方向的内边距 |
也可以通过 padding-top、padding-right、padding-bottom、padding-left 分别设置内边距的上、右、下、左四个方向的内边距。
外边距属性#
margin 属性用于设置元素的外边距， 格式与 padding 属性相同。
外边距合并： 当垂直方向的外边距相遇时，会合并成一个外边距，合并后的外边距为较大的那个值。
外边距塌陷： 当一个元素的外边距大于父元素的外边距时，会发生外边距塌陷， 塌陷后的子元素与父元素的外边距为 0，父元素的外边距为较大的那个值。
外边距塌陷的解决方法：
- 给父元素添加内边距（padding）。
- 给父元素添加边框（border）。
- 给父元素添加
overflow: hidden（隐藏溢出内容）或overflow: auto（显示滚动条）。
尺寸计算#
box-sizing属性值 | 描述 |
|---|---|
content-box | 默认值，内容盒子模型，元素的宽度和高度只包含内容区域，不包含内边距、边框和外边距 |
border-box | 边框盒子模型，元素的宽度和高度包含内容区域、内边距和边框，不包含外边距 |
盒子背景#
background 属性用于设置元素的背景， 可以设置背景的颜色、图片、重复方式等，属性的位置没有顺序之分。
| 属性 | 作用 | 常用值 | 示例 |
|---|---|---|---|
background-color | 设置背景颜色 | 颜色值，如#000,red等 | background-color: #000; |
background-image | 设置背景图片 | 图片路径，如url('image.jpg') | background-image: url('image.jpg'); |
background-repeat | 设置背景图片重复方式 | repeat(重复,默认值),no-repeat(不重复),repeat-x(水平重复),repeat-y(垂直重复) | background-repeat: no-repeat; |
background-position | 设置背景图片位置 | 位置值，如top,bottom,left,right,center等，也可以使用百分比或像素值 | background-position: center center; |
background-size | 设置背景图片大小 | 大小值，如auto,cover(覆盖),contain(包含)等 | background-size: cover; |
background-attachment | 设置背景图片是否固定 | fixed(固定),scroll(滚动) | background-attachment: fixed; |
盒子阴影#
box-shadow 属性用于设置元素的阴影效果， 可以设置阴影的水平偏移量、垂直偏移量、模糊半径、扩散半径、颜色等。
box-shadow: h-shadow v-shadow blur spread color inset;，其中水平偏移量、垂直偏移量必填，其他参数可选。
box-shadow: 10px 10px 5px #888888;样式初始化#
浏览器对 HTML 元素有默认样式（如 margin、padding、font-size），不同浏览器的默认样式可能不一致，导致跨浏览器兼容性问题。
为了避免跨浏览器兼容性问题，建议在 CSS 中对所有元素进行样式初始化， 可以使用如下代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 推荐设置边框盒子模型 */
}
/* 列表样式初始化 */
ul,
ol {
list-style: none;
}
/* 链接样式初始化 */
a {
text-decoration: none;
}在中大型项目中，推荐引入 normalize.css 或 reset.css 等样式重置文件， 这些文件可以重置浏览器的默认样式，避免跨浏览器兼容性问题。
/* normalize.css 或 reset.css 等样式重置文件 */
<link rel="stylesheet" href="normalize.css" />