CSS
一、基础认知
1、CSS引入方式
1.1、内嵌式（CSS写在style标签中）
style标签虽然可以写在页面的任意位置，但是通常约定写在head标签中
2.2、外联式（CSS写在一个单独的.css文件中）
需要通过link标签在网页中引入
2.3、行内式（写在标签的style属性里）
一般配js使用（不常用）
二、基础选择器
1、标签选择器
1.1、结构
标签名 {css属性: 属性值; }
1.2、作用
通过标签名，找到页面中所有这类标签，设置样式
1.3、注意点
- 便签选择器选择的是一类标签，而不是单独的某一个
- 标签选择器无论嵌套的关系有多深，都能找到对应的标签
2、类选择器
2.1、结构
.类名 {css属性: 属性值; }
2.2、作用
通过类名，找到页面中所有带有这个类名的标签，设置样式
2.3、注意点
- 所有便签上都有class属性，calss属性的属性值称为类名
- 类名可以由数字、字母、下划线、中划线组成，但是不能以数字、中划线开头
- 一个便签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
3、id选择器
3.1、结构
#id属性值 {css属性: 属性值;}
3.2、作用
通过id属性值，找到页面中带有这个id属性值的标签，设置样式
3.3、注意点
- 所有标签上都有id属性
- id属性值是唯一的不可以重复的
- 一个标签上只能有一个id属性值
- 一个id选择器只能选择一个标签
4、通配符选择器
4.1、结构
* {css属性名: 属性值; }
4.2、作用
找到页面中所有的标签设置样式
4.3、注意点
开发中很少用到，只会在很特殊的情况下用到
三、字体和文本样式
1、字体样式
1.1、字体大小
1.1.1、属性名：font-size
1.2、字体粗细
1.2.1、属性名：font-weight
1.2.2、取值
关键字
- 正常：normal
- 加粗：blod
纯数字
- 正常：400
- 加粗：700
1.3、字体样式（是否倾斜）
1.3.1、属性值：font-style
1.3.2、取值
- 正常：normal
- 倾斜：italic
1.4、字体类型
1.4.1、属性值：font-family
1.4.2、常见取值
具体字体1,具体字体2,具体字体3,具体字体4,具体字体5,…,字体系列
- 具体字体：微软雅黑、宋体、楷体等
- 字体系列：sans-serif、serif、monospace等…
1.4.3、渲染规则
从左往右按顺序查找如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会更具操作系统，显示最后字体系列的默认字体
1.4.4、注意点
- 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时尽量使用常见自带字体，保证不同的用户浏览网页都可以正常显示
注意：样式层叠问题
如果给同一个标签设置了相同的属性，此时样式会层叠，写在最下面的会生效
2、文本样式
2.1、文本缩进
2.1.1、属性名：text-index
2.1.2、取值
数字 + px
数字 + em（推荐使用1em = 当前标签的font-size的大小）
2.2、文本水平对齐方式
2.2.1、属性名：text-align
2.2.2、取值
| 属性值 | 说明 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
2.2.3、注意点
如果想文本居中对齐，text-align属性给文本所在标签（文本的父元素）设置
3、文本修饰
3.1、属性值：text-decoration
3.2、取值
| 属性值 | 效果 |
|---|---|
| underline | 下划线（常用） |
| line-through | 删除线（不常用） |
| overline | 上划线（几乎不用） |
| none | 无装饰线 |
3.3、注意点
开发中会使用text-decoration: none;来给a标签清楚默认下划线
3、line-height行高
3.1、作用
控制一行的上下行距
3.2、属性名：line-height
3.3、取值
- 数字 + px
- 倍数（当前标签font-size的倍数）
3.4、应用
让单行文本垂直居中可以设置line-height：文字父元素高度
网页精准布局时，会使用line-height：1可以取消上下间距
四、选择器进阶
1、后代选择器：空格
1.1、作用
根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
1.2、语法
选择器1 选择器2 {css}
1.3、结果
在选择器1所找到的后代中，找到满足选择器2的标签，设置样式
1.4、注意点
- 后代选择器中，选择器与选择器之间以空格隔开
- 子代包含儿子、孙子…所有后代
2、子代选择器：>
2.1、作用
根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
2.2、语法
选择器1 > 选择器2 {css}
2.3、结果
在选择器1中找到标签的儿子中，找到满足选择器2的标签 ，设置样式
2.4、注意点
- 子代只包括：儿子
- 子代选择器中，选择器与选择器之间用>隔开
3、并集选择器：,
3,1、作用
同时选择多组标签，设置相同样式
3.2、语法
选择器1, 选择器2 {css}
3.3、结果
找到选择器1和选择器2选中的标签，设置样式
3.4、注意点
- 并集选择器中的每组选择器之间通过逗号分隔
- 并集选择器中的每组选择器可以是基础选择器或者是复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
4、交集选择器
4.1、作用
选中页面中，同时满足多个选择器的标签
4.2、语法
选择器1选择器2{css}
4.3、结果
找到页面中既能被选择器1选中该的标签，又能被选择器2选中的标签，设置样式
4.4、注意点
- 交集选择器之间的选择器之间是紧挨着的，没有东西分隔
- 交集选择器如果有标签选择器，标签选择器必须写在最前面
5、hover伪类选择器
5.1、作用
选中鼠标悬停在元素上的状态，设置样式
5.2、语法
选择器:hover{css}
5.3、注意点
任何一个标签都可以添加伪类
五、背景相关属性
1、背景颜色
1.1、属性名：background-color
1.2、属性值
颜色取值：关键字、rgb表示法、rgba表示法、十六进制…
1.3、注意点
- 背景颜色默认是透明：rgba(0,0,0,0), transprent
- 背景颜色不会印象盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
2、背景图片
2.1、属性名：background-image
2.2、属性值：background-image: url(‘图片路径’);
2.3、注意点
- 背景图片中url可以省略引号
- 背景图片默认是水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似背景颜色，是不能撑开盒子的
3、背景平铺
3.1、属性名：background-repeat
3.2、属性值
| 取值 | 效果 |
|---|---|
| repeat | 默认值，水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向平铺 |
| repeat-y | 沿着垂直方向平铺 |
4、背景位置
4.1、属性名：background-position
4.2、属性值：background-position: 水平方向位置 垂直方向位置;
4.2.1、方位名词（最多只能表示九个位置）
- 水平方向：left、center、right
- 垂直方向：top、center、bottom
4.2.2、数字 + px（坐标）
坐标系（原点(0,0)，盒子左上角）
x轴：水平向右
y轴：垂直向下
4.3、注意点
方位名词取值和坐标取值可以混用，第一个取值表示水平，第二个取值表示垂直
六、元素显示模式
1、块级元素
1.1、显示特点
- 独占一行
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
1.2、代表标签
div、p、h系列、ul、li、dl、dt、dd、form、header…
补充：若想去掉列表符号可以使用
list-style: none;
2、行内元素
2.1、显示特点
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
2.2、代表标签
a、span、b、u、i、s、strong、ins、em、del…
3、行内块元素
3.1、显示特点
- 一行可以显示多个
- 可以设置宽高
3.2、代表标签
input、textarea、button、select…
4、元素显示模式转换
4.1、目的
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display: block | 转换成块级元素 | 较多 |
| display: inline-block | 转换成行内块元素 | 较多 |
| display: inline | 转换成行内元素 | 极少 |
七、CSS特性
1、继承性
1.1、特点
- 子元素有默认继承父元素的特点
- 可以继承的常见属性（文字控制属性都可以继承）
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
- …
2、层叠性
1.1、特性
- 给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上
- 给同一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效
1.2、注意点
当样式冲突时，只有当选择器优先级相同时，才能通过层叠判断效果
3、优先级
3.1、特性
不同的选择器有不同的优先级，优先级高的选择器会覆盖优先级低的选择器样式
3.2、优先级公式
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
3,3、注意点
- !important写在属性值后面，分号前面
- !important不能提升继承的优先级，只要是继承优先级最低
- 实际开发中不建议使用!important
3.4、权重叠加计算
3.4.1、场景
如果是复合选择器，此时需要通过权重叠加计算方法，判断最终那个选择器优先级最高会生效
3.4.2、权重叠加计算
第一级：行内样式个数
第二级：id选择器个数
第三级：类选择器个数
第四级：标签选择器个数
3.4.3、比较规则
- 先比较第一级数据，如果比较出来，之后的统统不看
- 如果第一级数据相同，此时去比较第二级数据，如果比较出来，之后的就不用看了
- …
- 如果最终所用的数字都相同，表示优先级相同，则比较层叠行（谁在下面谁生效）
八、盒子模型
1、介绍
1.1、概念
页面中的每一个标签都可以看成是一个盒子，通过盒子的视角更方便进行布局
浏览器在渲染网页时，会将网页中的元素看成是一个个的矩形区域，我们也形象的称之为盒子
1.2、盒子模型
CSS中规定每个盒子由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。
2、内容的宽度和高度
2.1、作用
利用width和height属性默认设置盒子内容区域的大小
2.2、属性：width/height
2.3、常见取值：数字 + px
3、边框
3.1、属性名：border
3.2、属性值
单个取值的连写，取值之间可以空格分开
例如：
border: 10px solid orange;
solid：实线；dashed：虚线；dotted：点线
3.3、单方向设置边框
3.3.1、场景
只给盒子某个方向设置边框
3.3.2、border-方位名词
4、内边距
4.1、属性名：padding
padding属性可以当作复合属性使用表示单独设置某个方向的内边距，padding最多取4个值
四值：上、下、左、右
三值：上、左右、下
两值：上下、左右
注：内边距默认会撑大盒子，如果不想它把盒子撑大我们可以加上css3特性：
box-sizing: border-box;
5、外边距
5.1、属性名：margin
与padding一样的设置
若想让盒子居中，可以这样写：
margin:0 auto;
5.2、外边距折叠现象
5.2.1、合并现象
场景
垂直布局的块级元素上下的margin会合并，最终两者距离为margin的最大值。
解决方法
只给其中一个盒子设置margin就可以啦
5.2.2、塌陷现象
场景
互相嵌套的块级元素，子元素margin-top会作用在父元素上，最终导致父元素一起往下移动
解决方法
- 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow: hidden
- 转换成行内块元素
- 设置浮动
九、CSS浮动
1、结构伪类选择器
1.1、作用与优势
作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
1.2、选择器
| 选择器 | 说明 |
|---|---|
| E: first-child { } | 匹配父元素中的第一个子元素，并且是E元素 |
| E: last-child { } | 匹配父元素中最后一个子元素，并且是E元素 |
| E: nth-child(n) { } | 匹配父元素中第n个子元素，并且是E元素 |
| E: nth-last-child(n) { } | 匹配父元素中倒数第几个子元素，并且是E元素 |
其中n的取值可以是：
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 计数 | 2n + 1、2n - 1、odd |
| 找到前5个 | -n + 5 |
| 找到从第5个开始 | n + 5 |
2、伪元素
2.1、概念
伪元素：一般页面中的非主体内容可以使用伪元素
2.2、区别
- 元素：HTML设置的标签
- 伪元素：由CSS模拟出来的标签
2.3、种类
| 伪元素 | 作用 |
|---|---|
| ::before | 在父元素内容的最前面添加一个伪元素 |
| ::after | 在父元素内容的最后一个添加一个伪元素 |
2.4、注意点
必须设置content属性才能生效
伪元素默认是行内元素
3、浮动（float）
3.1、作用
网页布局、文字环绕
3.1、特点
- 浮动元素会脱离标准流，在标准流中不占位置
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 下一个浮动元素会在上一个浮动元素的左右浮动排列
- 浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
注意：浮动元素不能通过text-align: center或者是margin: 0 auto来实现居中
4、清楚浮动
4.1、含义
清除浮动带来的影响，如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
4.2、原因
子元素浮动脱标不占位置
4.3、目的
需要父元素有高度，从而不影响其他网页的布局
4.4、方法
4.4.1、直接设置父元素高度
特点
优点：简单方便
缺点：有些布局中不能固定父元素高度
4.4.2、额外标签法
操作
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置：clear:both
特点
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
4.4.3、单伪元素消除法
操作
用伪元素代替了额外标签
基本写法
.clearfix::after {content: '';display: block;clear: both;
}
补充写法
.clearfix::after {content: '';display: block;clear: both;/*在网页中看不到伪元素*/height: 0;visibility: hidden;
}
特点
优点：项目中使用，直接给标签加类即可清除
4.4.4、双伪元素清除法
操作
.clearfix::before, .clearfix::after {content: '';display: table;
}
.clearfix::after {clear: both;
}
特点
优点：项目中使用，直接给标签加类即可清除
4.4.5、给父元素设置overflow:hidden
操作
直接给父元素设置 overflow:hidden
特点
优点：方便快捷
十、CSS定位装饰
1、定位
1.1、网页常见布局方式
1.1.1、标准流
- 块级元素独占一行，垂直布局
- 行内元素/行内块元素一行显示多个，水平布局
1.1.2、浮动
可以让原来垂直布局的块级元素变成水平布局
1.1.3、定位
- 可以让元素自由的摆放在网页的任意位置
- 一般用于盒子之间的层叠情况
2、使用定位步骤
2.1、设置定位方式
属性值：position
常见属性值：
| 定位方式 | 属性值 |
|---|---|
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
2.2、设置偏移值
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选择的原则一般是就近原则（离哪边近用哪个）
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+px | 距离下边的距离 |
2.3、相对定位
2.3.1、相对于自己之前的位置进行移动
2.3.2、代码
position:relative
2.3.3、特点
- 需要配合方位属性实现移动
- 相对于自己原来位置进行移动
- 在页面中占位置，没有脱标
2.3.4、应用场景
- 配合绝对定位组合使用
- 用于小范围移动
2.4、绝对定位
2.4.1、介绍
相对于非静态的父元素进行定位移动
2.4.2、代码
position: absolute;
2.4.3、特点
- 需要配合方位属性进行移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置（已经托标）
2.5、固定定位
2.5.1、介绍
相对于浏览器进行定位移动
2.5.2、代码
position: fixed;
2.5.3、特点
- 需要配合方位属性进行移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置（已经脱标）
十一、装饰
1、光标类型
1.1、场景
设置鼠标光标在元素上时显示的样式
1.2、属性名：cursor
1.3、常见属性值
| 属性值 | 效果 |
|---|---|
| default | 默认值通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字形，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
2、边框圆角
2.1、场景
让盒子四个交变得圆润，增加页面细节，提升用户体验
2.2、属性名：border-radius
2.3、常见取值
数字 + px； 百分比
3、overflow
3.1、溢出部分
指的是盒子内容部分所超出盒子范围的区域
3.2、场景
控制内容溢出部分的效果显示
3.3、属性名：overflow
3.4、常见属性值
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出都显示滚动条 |
| auto | 根据是否溢出，自动显示或者隐藏滚动条 |
4、元素本身隐藏
4.1、场景
让某元素在屏幕中不可见
4.2、常见属性
visibility: hidden（占位隐藏）
display: none（不占位的隐藏）
5、元素的整体透明
5.1、场景
让某元素整体（包括内容一起变透明）
5.2、属性名：opacity
5.3、属性值
0~1之间的数字，1表示完全不透明，0表示完全透明
