1、伪类选择器的扩展
● e:first-child
只要某个子元素e是其父元素的第一个子元素，那么设置e的样式
● e:last-child
只要某个子元素e是其父元素的最后一个子元素，那么设置e的样式
● e:nth-child(n)
只要某个子元素e是其父元素的第n个子元素，那么设置e的样式
分2种情况：
① n为常量（样式作用一个元素）
② n为变量（样式作用多个元素）
● e:nth-of-type()
2、伪类元素的扩展
● e::first-letter
伪元素向文本的第一个字母添加特殊样式。
● e::first-line
伪元素向文本的第一行文字添加特殊样式
● e::selection
使被选中的文本添加特殊样式
3、样式扩展
● 透明度
① 属性 opacity （全局设置）
它设置的是整个元素的透明度，取值范围是[0.0,1.0]
② 在颜色位置设置alpha通道 rgba属性（局部设置）
background-color: rgba(0, 0, 0, 0.4);
第四个参数的范围是[0.0,1.0]
● 鼠标样式
cursor属性
① 使用默认样式
② 自定义鼠标样式
cursoir: url("cursor.ico"),auto
ico图片地址，如果没找到，auto表示默认鼠标样式
● 盒子隐藏
① display: none;
将元素的显示设为无，即在网页中不占任何的位置。
② visibility: hidden;
将元素隐藏，但是在网页中该占的位置还是占着。
● 背景图
容易混淆的概念：
>>>img元素属于html的概念
>>>背景图属于css的概念
① 当图片属于网页内容时，必须使用img元素
比如说广告、书籍电影封面介绍
② 当图片只是用于美化页面时，必须使用功能背景图
比如说按钮
① 当盒子尺寸和图片尺寸一致时
② 当盒子尺寸大于图片尺寸时，图片默认在横纵坐标进行重复，即我们说的“平铺”
background-repeat 可以设置是否重复
③ 当盒子尺寸小于图片尺寸时，图片显示部分
可以等比例缩放或者覆盖
介绍一个
通过预设值left、right、center、top、bottom可以设置背景图的位置
4、@-rule
at-rule: @规则、@语句、CSS语句、CSS指令
① import
@import "路径";
导入另外一个css文件
② charset
@charset "utf-8";
告诉浏览器该CSS文件，使用的字符编码集是utf-8，必须写到第一行
5、web字体和图标
● 当用户电脑没有安装指定字体时，可以采取下面做法：
● 字体图标
阿里巴巴字体图标库 https://www.iconfont.cn/
如何使用（先登录）：
① 将选择的字体图标加入购物车
② 在购物车中将字体图标添加到项目（没有则新建一个）中
③ “我的项目”--“font class”--“在线链接”--“复制代码”
我们看到搜索小图标颜色变红，说明不是图片，可以理解为一种特殊字体
6、块级格式化上下文（Block Formatting Context，简称BFC）
定义：BFC是一块独立的渲染区域，规定了在该区域中常规流块盒的布局。
● 常规流块盒在水平方向上，必须撑满包含块
● 常规流块盒在包含块的垂直方向依次摆放
● 常规流块盒若外边距无缝相邻，则进行外边距合并
● 常规流块盒的自动高度和摆放位置，无视浮动元素
这个区域由某个html元素创建，以下元素会在内部创建BFC区域：
① 根元素（html）
② 浮动和绝对定位元素
③ overflow不等于visible的块盒
不同的BFC区域，它们在渲染时互不干扰
创建的BFC的元素，隔绝了它内部和外部的联系，内部渲染不会影响到外部
具体规则：
创建BFC的区域，它的自动高度需要计算浮动元素
创建BFC的区域，它的边框盒不会与浮动元素重叠
创建BFC的区域，不会和它子元素进行外边距合并
7、布局
● 两栏布局
● 三栏布局
● 后台布局
8、行盒的垂直对齐
● 多个行盒垂直方向上的对齐
给没有对齐元素设置 vertical-align，可以用预设值和数值表示
● 图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白
① 设置父元素的字体大小为0
② 将图片设置为块盒
9、居中对齐
盒子在其包含块里居中
● 行盒（行块盒）水平居中
直接设置行盒（行块盒）父元素```text-align:center```
● 常规流块盒水平居中
定宽，设置左右margin为auto
● 绝对定位元素的水平居中
定宽，设置左右的坐标为0（left 为0 ，right为0），将margin设置为auto
● 当行文本的垂直居中
设置文本所在元素的行高，为整个区域的高度
● 多行文本垂直居中
没有完美方案
设置盒子上下内边距相同，达到类似的效果
● 绝对定位的垂直居中
定高，设置上下的坐标为0（top:0, bottom:0），将上下margin设置为auto