CSS回顾-基础知识详解

一、引言

在html" title=前端>前端开发领域，CSS 曾是构建网页视觉效果的关键，与 HTML、JavaScript 一起打造精彩的网络世界。但随着组件库的大量涌现，我们亲手书写 CSS 样式的情况越来越少，CSS 基础知识也逐渐被我们遗忘。
现在，这种遗忘带来了诸如样式调整困难、面对兼容性问题不知所措等麻烦。所以，我们有必要回顾 CSS，重拾这些重要知识，为更好地开发网页助力。

二、基础介绍

2.1 什么是CSS

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种专门用于描述文档（如网页、XML 文档等）呈现方式的样式表语言之一（XSL、LESS、SASS）。

我们知道HTML是负责搭建网页文档的结构地基，而CSS就是给这个网页增加色彩与动画的，最终变成精美的界面呈现给用户。

2.2 基础语法

CSS 是一门基于规则的语言。是由选择器与样式信息组成：选择器 {样式信息}。

html" title=css>css">h1 {color: red;font-size: 20px;
}

上面写了一个简单示例，我们可以看到h1就代表选择器的一种标签选择器，括号中包裹的就是对应的样式对象信息，由属性、属性值组成。上面样式的意思是：将界面上h1标签元素文字样式设置为红色，文字大小设置为20px；

注意：具体的选择器类别与样式信息后面会总结（挖一个坑，后面回填的），请大家持续关注。

2.3 注释语法

在 CSS（层叠样式表）中，注释用于在代码中添加说明性文字，这些文字不会被浏览器解析为样式规则。CSS 注释有两种常见的语法：

多行注释：/* 这是
注释内容 */
单行注释：/* 这是注释内容 */

html" title=css>css">/* 这是h1标签样式 */
h1 {/* 多行注释color: red;font-size: 20px;*/
}

三、引用方式

我们配置的html" title=css>css的样式最终是要作用到网页结构信息上面的，而书写的位置也会有不同，书写位置不同会导致最终界面呈现的效果不同。主要分为以下三种：

外部样式表（外联样式）
内部样式表（style标签）
行内样式表（内联样式）

3.1 外部样式表（外联样式）

外部样式表是将 CSS 代码保存在一个独立的.html" title=css>css文件中，然后在 HTML 文档中通过<link>标签或者@import规则来引用这个文件。

首先在外部新建.html" title=css>css后缀的文件，里面书写html" title=css>css样式。示例：

html" title=css>css">/* style.html" title=css>css 文件样式 */
h1 {color: red;font-size: 20px;
}

主界面引用：

html">  <!-- link标签引入 --><!-- <link rel="stylesheet" href="./html" title=css>css/style.html" title=css>css"> --><style>html" title=css>css">/* 内部样式中使用@import引入（不推荐用于 HTML 文件，可以在.html" title=css>css文件中引入） */@import url("./html" title=css>css/style.html" title=css>css");</style>

3.2 内部样式表（style标签）

内部样式表是在 HTML 文档的<head>标签内使用<style>标签来定义 CSS 规则。这些规则只适用于当前的 HTML 文档。

html"><style>html" title=css>css">h1 {color: red;font-size: 20px;}
</style>

3.3 行内样式表（内联样式）

内联样式是直接在 HTML 元素的style属性中添加 CSS 规则。这种方式将样式直接应用于特定的元素，优先级非常高。

html"><h1 style="html" title=css>css">color: red;font-size: 20px;">h1标题</h1>

3.4 总结

外联样式
1. 优点：实现样式和内容完全分离，HTML 文件更简洁专注于结构。多个 HTML 文件可共享，提高代码复用性和可维护性，修改样式表可影响所有引用页面。
2. 缺点：需要额外管理样式表文件，文件丢失或路径错误会导致样式加载失败，开发时可能需同时打开 HTML 和 CSS 文件编辑，对简单页面稍复杂，但大型项目中优势更明显。
内部样式表
1. 优点：能集中管理文档内的样式，较内联样式可维护性有所提高。
2. 缺点：多个 HTML 页面共享样式时，需在各页面重复编写，会导致代码冗余，大型项目中使 HTML 文件臃肿，不利于代码组织管理。
内联样式
1. 优点：简单直接，可快速对个别元素设置样式。
2. 缺点：可维护性差，样式代码在 HTML 元素中，若多个元素需相同样式，代码会重复，不符合样式和内容分离原则。

在实际的网页开发中，外部样式表是最常用的引入方式，因为它最符合代码的组织和复用原则，能够提高开发效率和代码的可维护性。

四、盒模型

CSS 盒模型是网页布局的基础概念，它把每个 HTML 元素看作一个矩形盒子。这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

html" title=css>css">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属性来切换盒模型。

html" title=css>css">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);