1. :befor和::befor区别
（1）相同点
--都可以用来表示伪类对象，设置对象前面的内容
--：befor和：：befor是等效的
（2）不同点
--：befor是css2的写法，：：befor是css3的写法。css2的兼容性好
--H5开发中用：：befor好
-- 但冒号是css3伪类。双冒号表示伪元素
2.盒模型 box-sizing
#盒模型
html文档中的元素会被描述成为矩形盒子，这个盒子通过盒模型显示大小内容。margin , border , padding , content
IE盒模型和W3C标准盒模型。
IE ：宽高 = content + border + padding
标准 ： 宽高 = content
#box-sizing : content-box ( 默认 ) | border-box | inherit
content-box 相当于 W3C标准盒模型
border-box 相当于 IE盒模型
3.水平居中，垂直居中
#水平居中
(1) 子级div margin : 0 auto ;
(2) 父级div text-align : center ; 子级div display : inline-black ;
(3) 绝对定位法 ：
父级div position : relative ;
子级div position : absolute ;
left : 50% ;
margin-left : - ( 宽度 / 2 ) ; // 垂直也行
(4) flex ：
父级div display : flex ;
justify-centent : center ;
#垂直居中
(1) flex :
父级div display : flex ;
align-items : center ;
(2) 绝对定位 ：
-- left : 50% ; top : 50% ; margin : -宽高的一半
--top : 0 ; bottom : 0 ; margin : auto ;
--left : 50% ; top : 50% ; transform : translate ( -50% , -50% ) ;
(3) 使用 line-height 和 vertical-align 对图片进行垂直居中
父级 行高等于高 子级 vertical-align ： middle ;
4.隐藏页面的方式
#opacity设为0 ：
透明度为0。视觉上隐藏，元素仍然占据空间，对布局和用户交互起作用
#visibility : hidden ;
占据空间，但对用户交互无作用
#display : none ;
完全不存在。DOM可操作
#position 出界面
#clic-path
5.css3新特性
#边框
border-image border-radius box-shadow
#背景
background-clip 规定背景的绘制区域
background-origin 规定背景图片的定位区域
background-size 规定背景尺寸
#渐变
--线性渐变（Linear Gradients）下|上|左|右|对角
--径向渐变
#文本效果
| 属性 | 描述 | CSS |
|---|---|---|
| hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
| punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 |
| text-outline | 规定文本的轮廓。 | 3 |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
| text-shadow | 向文本添加阴影。 | 3 |
| text-wrap | 规定文本的换行规则。 | 3 |
| word-break | 规定非中日韩文本的换行规则。 | 3 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
#字体
#转换变形
| Property | 描述 | CSS |
|---|---|---|
| transform | 适用于2D或3D转换的元素 | 3 |
| transform-origin | 允许您更改转化元素位置 |
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
3D转换属性
| 属性 | 描述 | CSS |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
3D转换方法
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
| perspective(n) | 定义 3D 转换元素的透视视图。 |
#过渡
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |