伪元素选择器
伪元素选择器：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 before after 创建一个元素，但是属于行内元素 ；新创建的这个元素在文档树中是找不到的，所以我们称之为伪元素；before after必须有content属性
语法：element::before
盒子模型
标准盒模型和IE盒子模型。IE盒子模型的宽高包括content和padding还有border，标准盒子模型不包括。
CSS3中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box，border-box ，这样我们计算盒子大小的方式就发生了改变
box-sizing：content-box 盒子大小为 width + padding + border （以前默认的）
box-sizing: border-box 盒子大小为 width
transition
transition: 要过渡的属性 花费时间 运动曲线 何时开始; 花费时间必须要写单位，比如0.5s 何时开始L：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略） 注意：前面2个属性是必须要写的。
水平居中的方式 text-align:center； flex布局 justify-content：center；绝对定位；
rem em vh、vm、px
px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单
有哪些元素可以隐藏页面元素
display:none 页面中不存在 会引起重排重绘
visibility:hidden 页面中存在 只会引起重绘，不会触发重排
opacity:0
设置height，width模型属性为0
position：absolute
rgba和opacity的区别
opacity 取值在0到1之间，0表示完全透明，1表示完全不透明
rgba,R表示红色，G表示绿色，B表示蓝色，三种颜色的值都可以是正整数或百分数。A表示Alpha透明度。取值0~1之间，类似opacity。
opacity作用于元素以及元素内所有内容的透明度；而rgba() 只作用于元素的颜色或其背景色，不会影响到里面内容，也就是说设置rgba透明元素的子元素不会继承透明效果
.test1 {
opacity: 0.5;
background-color: red;
/* background: rgba(0, 0, 0, 0.5); */
}
.test2 {
background-color: blue;
}
<div class="test1">lalalalal
<div class="test2">aaaaaa</div>
</div>
