跳出盲区：1.5万字CSS基础拾遗，核心知识和常见需求大盘点

1. CSS 基础：从入门到精通

CSS是级联样式表（Cascading Style Sheets）的缩写，是一种用于网页如何呈现的计算机语言。CSS可用于控制网页的布局、颜色、字体、动画等多种元素。

1.1 选择器：精准定位网页元素

选择器用于指定CSS规则应用到网页的哪些元素。最常见的选择器包括：

• 通用选择器： * 用于选择网页中的所有元素。
• 元素选择器： p 用于选择网页中的所有 <p> 元素。
• 类选择器： .class-name 用于选择网页中具有指定类名的元素。
• ID选择器： #id-name 用于选择网页中具有指定ID的元素。

1.2 属性和值：定义元素样式

CSS属性用于指定元素的样式，如颜色、字体、背景等。CSS属性的值用于指定属性的具体值，如红色、Arial、白色等。

1.3 继承：样式的层层传递

CSS样式可以被继承，即父元素的样式可以被其子元素继承。这种继承关系使得我们可以方便地为网页中的多个元素设置相同的样式。

2. CSS 布局：构建网页框架

CSS布局用于定义网页元素在页面中的位置和大小。CSS布局包括多种不同的布局模型，如流式布局、浮动布局、Flexbox布局、网格布局等。

2.1 流式布局：文本的自然流动

流式布局是CSS中最基本的布局模型，元素按照从上到下、从左到右的顺序排列。流式布局适用于简单网页的布局。

2.2 浮动布局：元素的自由定位

浮动布局允许元素脱离正常的文档流，在页面中自由定位。浮动布局适用于需要灵活布局的网页，如侧边栏布局、多列布局等。

2.3 Flexbox布局：弹性布局的利器

Flexbox布局是CSS3中引入的一种新的布局模型，它提供了更灵活的布局方式。Flexbox布局可以轻松实现元素的水平或垂直排列、居中对齐、间距调整等。

2.4 网格布局：构建复杂布局

网格布局是CSS3中引入的另一种新的布局模型，它提供了类似于表格的布局方式。网格布局可以轻松实现复杂的布局，如多列布局、瀑布流布局、响应式布局等。

3. CSS 文本：文字的艺术

CSS文本用于控制网页中文字的样式，如字体、大小、颜色、对齐等。CSS文本包括多种不同的属性，如 font-family、font-size、color、text-align 等。

3.1 字体：文字风格的选择

font-family 属性用于指定文字的字体。CSS提供了多种不同的字体，如 Arial、Times New Roman、Courier New 等。

3.2 字号：文字大小的掌控

font-size 属性用于指定文字的大小。CSS提供了多种不同的单位来指定字号，如 px、em、rem 等。

3.3 颜色：文字色彩的渲染

color 属性用于指定文字的颜色。CSS提供了多种不同的颜色值，如红色、蓝色、绿色等。

3.4 对齐：文字位置的调整

text-align 属性用于指定文字的对齐方式。CSS提供了多种不同的对齐方式，如左对齐、右对齐、居中对齐等。

4. CSS 颜色：色彩的魅力

CSS颜色用于控制网页中元素的颜色，如背景颜色、边框颜色、文字颜色等。CSS颜色包括多种不同的颜色值，如十六进制颜色值、RGB颜色值、HSL颜色值等。

4.1 十六进制颜色值：简洁明了的色彩表示

十六进制颜色值是一种使用六个十六进制数字来表示颜色的方法。十六进制颜色值以 # 开头，后面跟着六个十六进制数字。例如，#ffffff 表示白色，#000000 表示黑色。

4.2 RGB颜色值：色彩成分的拆解

RGB颜色值是一种使用三个数字来表示颜色的方法。RGB颜色值中的三个数字分别表示红色、绿色和蓝色的强度。例如，rgb(255, 0, 0) 表示红色，rgb(0, 255, 0) 表示绿色，rgb(0, 0, 255) 表示蓝色。

4.3 HSL颜色值：色彩的色相、饱和度和明度

HSL颜色值是一种使用三个数字来表示颜色的方法。HSL颜色值中的三个数字分别表示色相、饱和度和明度。色相是指颜色的基本颜色，如红色、橙色、黄色等。饱和度是指颜色的鲜艳程度。明度是指颜色的亮度。

5. CSS 背景：元素的衬托

CSS背景用于控制网页中元素的背景颜色、背景图像、背景位置等。CSS背景包括多种不同的属性，如 background-color、background-image、background-position 等。

5.1 背景颜色：元素的底色

background-color 属性用于指定元素的背景颜色。CSS提供了多种不同的颜色值，如红色、蓝色、绿色等。

5.2 背景图像：元素的视觉装饰

background-image 属性用于指定元素的背景图像。背景图像可以是本地图像，也可以是远程图像。

5.3 背景位置：背景图像的位置调整

background-position 属性用于指定背景图像在元素中的位置。CSS提供了多种不同的背景位置值，如 center、top left、bottom right 等。

**6. CSS 边