一、引言
在前端开发领域，CSS 曾是构建网页视觉效果的关键，与 HTML、JavaScript 一起打造精彩的网络世界。但随着组件库的大量涌现，我们亲手书写 CSS 样式的情况越来越少，CSS 基础知识也逐渐被我们遗忘。
现在，这种遗忘带来了诸如样式调整困难、面对兼容性问题不知所措等麻烦。所以，我们有必要回顾 CSS，重拾这些重要知识，为更好地开发网页助力。
二、基础介绍
2.1 什么是CSS
层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种专门用于描述文档（如网页、XML 文档等）呈现方式的样式表语言之一（XSL、LESS、SASS）。
我们知道HTML是负责搭建网页文档的结构地基，而CSS就是给这个网页增加色彩与动画的，最终变成精美的界面呈现给用户。
2.2 基础语法
CSS 是一门基于规则的语言。是由选择器与样式信息组成：选择器 {样式信息}。
h1 {
color: red;
font-size: 20px;
}
上面写了一个简单示例，我们可以看到h1就代表选择器的一种标签选择器，括号中包裹的就是对应的样式对象信息，由属性、属性值组成。上面样式的意思是：将界面上h1标签元素文字样式设置为红色，文字大小设置为20px；
注意：具体的选择器类别与样式信息后面会总结（挖一个坑，后面回填的），请大家持续关注。
2.3 注释语法
在 CSS（层叠样式表）中，注释用于在代码中添加说明性文字，这些文字不会被浏览器解析为样式规则。CSS 注释有两种常见的语法：
- 多行注释：
/* 这是
注释内容 */ - 单行注释：
/* 这是注释内容 */
/* 这是h1标签样式 */
h1 {
/* 多行注释
color: red;
font-size: 20px;
*/
}
三、引用方式
我们配置的css的样式最终是要作用到网页结构信息上面的，而书写的位置也会有不同，书写位置不同会导致最终界面呈现的效果不同。主要分为以下三种：
- 外部样式表（外联样式）
- 内部样式表（style标签）
- 行内样式表（内联样式）
3.1 外部样式表（外联样式）
外部样式表是将 CSS 代码保存在一个独立的.css文件中，然后在 HTML 文档中通过<link>标签或者@import规则来引用这个文件。
首先在外部新建.css后缀的文件，里面书写css样式。示例：
/* style.css 文件样式 */
h1 {
color: red;
font-size: 20px;
}
主界面引用：
<!-- link标签引入 -->
<!-- <link rel="stylesheet" href="./css/style.css"> -->
<style>
/* 内部样式中使用@import引入（不推荐用于 HTML 文件，可以在.css文件中引入） */
@import url("./css/style.css");
</style>
3.2 内部样式表（style标签）
内部样式表是在 HTML 文档的<head>标签内使用<style>标签来定义 CSS 规则。这些规则只适用于当前的 HTML 文档。
<style>
h1 {
color: red;
font-size: 20px;
}
</style>
3.3 行内样式表（内联样式）
内联样式是直接在 HTML 元素的style属性中添加 CSS 规则。这种方式将样式直接应用于特定的元素，优先级非常高。
<h1 style="color: red;font-size: 20px;">h1标题</h1>
3.4 总结
- 外联样式
- 优点：实现样式和内容完全分离，HTML 文件更简洁专注于结构。多个 HTML 文件可共享，提高代码复用性和可维护性，修改样式表可影响所有引用页面。
- 缺点：需要额外管理样式表文件，文件丢失或路径错误会导致样式加载失败，开发时可能需同时打开 HTML 和 CSS 文件编辑，对简单页面稍复杂，但大型项目中优势更明显。
- 内部样式表
- 优点：能集中管理文档内的样式，较内联样式可维护性有所提高。
- 缺点：多个 HTML 页面共享样式时，需在各页面重复编写，会导致代码冗余，大型项目中使 HTML 文件臃肿，不利于代码组织管理。
- 内联样式
- 优点：简单直接，可快速对个别元素设置样式。
- 缺点：可维护性差，样式代码在 HTML 元素中，若多个元素需相同样式，代码会重复，不符合样式和内容分离原则。
在实际的网页开发中，外部样式表是最常用的引入方式，因为它最符合代码的组织和复用原则，能够提高开发效率和代码的可维护性。
四、盒模型
CSS 盒模型是网页布局的基础概念，它把每个 HTML 元素看作一个矩形盒子。这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
div {
width: 300px;
height: 150px;
margin: 20px;
padding: 10px;
border: 4px solid red;
}
如上图蓝色部分就是代表元素内容所占宽高，绿色部分代表内容区与边框之前的间距padding，黄色部分代表元素边框，橙色部分代表元素与其他周围元素之间的间距。
4.1 内容区（Content）
内容区是盒模型的核心部分，用于显示元素包含的文本、图像等实际内容.
在上方例子中，width和height属性分别设置了<div>元素内容区的宽度为 300px 和高度为 150px。
4.2 内边距（Padding）
内边距是内容区和边框之间的空间。它可以用于在内容和边框之间添加空白，使内容不会直接贴在边框上，增强了内容的可视性和布局的美观性。
在上面的例子中，设置了四个方向上下左右边距都为10px；还有其他几种书写方式：
padding: 1px 2px 3px 4px;(对应上、右、下、左不同的边距大小)padding: 1px 2px 3px;(对应上、左右、下不同的边距大小)padding: 1px 3px;(对应上下、左右不同的边距大小)- 或者单独配置边距：
padding-left、padding-top
4.3 边框（Border）
边框是围绕在内边距和内容区外部的线条，用于划分元素的边界。边框可以有不同的样式、宽度和颜色。
border是一个简写方式：border：边框宽度 边框样式 边框颜色;
还可以拆开分别配置：
- border-width: 边框宽度
- border-style: 边框样式，如
solid（实线）、dashed（虚线）、dotted（点线）等） - border-color: 边框颜色(颜色英文或颜色进制，rgb)
还可以单独设置某一边的边框：border-left、border-left-color…
在上面的例子中，只是单纯的设置了四个边为4px的红色实线边框；
4.4 外边距（Margin）
边距是元素边框与相邻元素之间的空间。它用于控制元素之间的间距，使页面布局更加合理。
在上面的例子中，设置了四个方向上下左右边距都为20px；还有其他几种书写方式：
margin: 1px 2px 3px 4px;(对应上、右、下、左不同的边距大小)margin: 1px 2px 3px;(对应上、左右、下不同的边距大小)margin: 1px 3px;(对应上下、左右不同的边距大小)- 或者单独配置边距：
margin-left、margin-top
4.5 标准盒模型与怪异盒模型
标准盒模型：在标准盒模型中，元素的宽度（width）和高度（height）只包括内容区域的大小，不包括内边距和边框。 如上图：
- 元素实际在页面所占宽度=宽度300（width）+ 内边距
10*2（padding） + 边框4*2(border); - 元素实际在页面所占高度=高度150（width）+ 内边距
10*2（padding） + 边框4*2(border);
怪异盒模型（IE 盒模型）：在怪异盒模型中，元素的宽度（width）和高度（height）是指内容区、内边距和边框的总和，外边距不包括在内。可以通过box - sizing属性来切换盒模型。
div {
width: 300px;
height: 150px;
margin: 20px;
padding: 10px;
border: 4px solid red;
box-sizing: border-box;
}
经过上方样式配置后，就会将元素更改为怪异盒模型：
- 元素实际在页面所占宽度300=宽度（width）+ 内边距（padding） + 边框(border);
- 元素实际在页面所占高度150=高度（width）+ 内边距（padding） + 边框(border);
