CSS
1.概念
CSS（层叠样式表）是一种用来描述文档如何呈现在屏幕、打印等上的语言。通过使用CSS，我们可以将HTML标记与外观和布局分离。
2.CSS 引入方式
- 外部样式表： 在head标签中加入标签，href属性指向外部css文件。
- 内部样式表：在head标签中使用
3.选择器
基础选择器
- 标签选择器：选择相应标签的元素，如div、p等
- 类选择器：选择指定class属性值的所有元素，如 .example
- id选择器：选择指定id属性值的唯一元素，如 #example
- 通配符选择器：选择所有元素，如 *
复合选择器
- 后代选择器：选择某个元素下的所有后代元素，如 div p
- 子代选择器：选择某个元素下的直接子元素，如 ul > li
- 并集选择器：选择多个元素，如 h1, h2, h3
- 交集选择器：选择同时拥有两种或多种不同属性的元素，如 a.classA.classB
- 伪类选择器：根据元素所处状态或信息选择元素，如 :hover等
选择器的优先级
样式规则根据"优先级"来决定作用于HTML元素上的CSS属性。当多个规则应用于同一元素时，优先级就决定了哪个规则将胜出。
4.盒子模型
- 盒子模型-边框线： CSS盒子模型包括：内容区域、内边距区域、边框区域和外边距区域。
- 盒子模型-padding： 盒子内边距区域的四个方向分别是上、右、下、左，使用padding属性设置。
- 盒子模型-外边距： 盒子外边距区域的四个方向也是上、右、下、左，使用margin属性设置。
- 外边距问题-合并现象： 当两个盒子相遇时，它们的外边距会合并为一个外边距，这种现象称为外边距合并。
- 外边距问题-塌陷问题： 当父元素的上边距和子元素的上边距重合时，会发生外边距塌陷的现象。
- 行内元素-内外边距问题： 行内元素没有内边距和外边距，使用line-height属性撑开行高。
- 盒子模型-尺寸计算： 盒子的总宽度 = 左边框 + 左内边距 + 内容区域 + 右内边距 + 右边框，盒子的总高度 = 上边框 + 上内边距 + 内容区域 + 下内边距 + 下边框。
- 盒子模型-元素溢出： 如果元素溢出了，可以通过overflow属性来控制。
- 盒子模型-圆角： 使用border-radius属性设置盒子四个角的圆角效果。
- 盒子模型-阴影（拓展）： 使用box-shadow属性在盒子周围添加阴影。
5.字体修饰属性
CSS提供多种修改字体样式的属性，如font-size、font-weight、font-style等等。
6.调试工具
调试工具是帮助我们排错和调试CSS样式的利器，常用的调试工具有Chrome开发者工具、Firebug、Safari的Web Inspector等。
7.CSS特性
- 继承性：如果一个元素没有指定某个CSS属性，那么它将从它的父元素继承这个属性。
- 层叠性：如果一个元素同时被多个样式规则所定义，那么它将按照一定规则来决定哪条规则的优先级更高。
- 优先级：在层叠性相同的情况下，根据选择器的优先级来确定哪个样式规则更重要。
8.背景属性
CSS提供了多种背景样式设置，如background-color、background-image等。渐变可以通过linear-gradient或radial-gradient来实现。
9.显示模式
CSS提供了多种显示模式，如块级元素、行内元素和行内块级元素。可以通过display属性进行设置。
10.清除默认样式
使用reset.css清除默认样式，并将其设置为一个css文件。
11.CSS 书写顺序
一般按照盒子模型的顺序来书写CSS样式，如先写边框、内边距、尺寸等等。
12.标准流
标准流是指文档内容默认的布局方式，包括块级元素和行内元素的默认布局方式。
13.浮动
CSS提供了float属性来实现元素浮动。为了防止浮动元素对其他元素的影响，需要清除浮动。
清除浮动
- 方法一：额外标签法
- 方法二：单伪元素法
- 方法三：双伪元素法（推荐）
- 方法四：overflow
14.flex布局
Flex（Flexible Box）布局是一种高效的布局方式，能够快速应对多种屏幕尺寸。Flex布局包括容器和成员两个概念。
15.网页设计技巧
- 清除默认样式，并将其设置为一个css文件。
- 设置版心区域。
- logo的设置。
- 导航制作技巧。
- 搜索区域。
- img+span。
16.定位
CSS提供了多种定位方式，包括相对定位、绝对定位和固定定位。使用z-index属性可以设置堆叠层级。
17.CSS 精灵
CSS精灵是指将多个小图标合并成一张大图并通过background-position的方式来显示相应小图标。
18.字体图标
字体图标是用字体文件来实现的图标，可以通过下载相应字体库来使用。在HTML中只需要添加对应的class即可插入字体图标。
19.垂直对齐方式
CSS提供了vertical-align属性来实现元素的垂直对齐。
20.过渡 transition
过渡效果（Transition）是指在元素从一种样式逐渐变化为另一种样式过程中的动画效果。可以通过CSS的transition属性来实现。
21.透明度 opacity
CSS提供了opacity属性来设置元素的透明度。
22.光标类型 cursor
CSS提供了cursor属性来设置鼠标悬停在元素上时的光标类型。
23.SEO 三大标签
SEO（Search Engine Optimization）是指优化网页以便于搜索引擎更好地理解和分类内容。其中三个非常重要的标签是、和<h1>。</h1>
24.Favicon 图标
Favicon图标是指网站在浏览器地址栏、标签页等处显示的小图标。
25.input注意点
在使用input元素时，需要注意一些属性设置，如type、name、value、placeholder等。
26.平面转换 transform
CSS提供了多种平面转换效果，包括平移、旋转、缩放和倾斜等。
27.空间转换
CSS提供了空间转换（3D效果）效果，包括平移、旋转和缩放等。
28.动画-animation
动画是指可以通过CSS来实现的元素动画效果。CSS的animation属性可以实现多组动画。