1. 实现三角形
三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。
2. 实现水平居中
(1) 内联元素水平居中
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效
(2) 内联块级元素水平居中
通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。
(3) 多级块状元素水平居中
使用inline-block: 如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型（display）为inline-block和父容器的text-align属性为center.从而使多块级元素水平居中。
利用display:flex: 利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
3. 垂直居中
(1) 单行内联元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
(2) 多行元素垂直居中
利用表（table）布局： 设置父元素显示类型（display）为table。子元素显示类型（display）为table-sell。利用表布局的vertical-align: middle可以实现子元素的垂直居中
利用flex布局： 利用flex布局实现垂直居中，设置显示类型（display）为flex.其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。
利用‘精灵元素ghost element’：即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。
(3) 块级元素垂直居中
固定高度的块级元素：父元素position设置为relative，子元素position设置为absolute。通过绝对定位元素距离顶部（top）50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。
未知高度的块级元素：当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
4. 水平垂直居中
固定宽高元素水平垂直居中： 通过margin平移元素整体宽度（包括padding等）的一半，使元素水平垂直居中。
未知宽高元素水平垂直居中：利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。transform: translate(-50%, -50%);
利用flex布局（display:flex）：其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式（center）；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式（center）。
利用grid布局（display:grid）：兼容性较差，不推荐
在屏幕上水平垂直居中：常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。
5. CSS3新增
(1) transform变形
对元素进行平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）
transform 不会对其它元素布局产生影响
(2) Transition过渡
指定从一个状态到另一个状态时如何过渡
(3) Animation复杂动画
可以实现更复杂的样式变化效果
使用方法：定义关键帧样式；应用动画到元素上
6. 盒子模型
从外到内依次是：margin(外边距)，border(边框),padding(内边距),content(内容)
7. 清除浮动
给浮动元素的父元素添加高度：如果一个元素要浮动，那么它的父元素一定要有高度。高度的盒子，才能关住浮动。可以通过直接给父元素设置height，实际应用中我们不大可能给所有的盒子加高度，不仅麻烦，并且不能适应页面的快速变化；另外一种，父容器的高度可以通过内容撑开（比如img图片），实际当中此方法用的比较多。
clear:both; 在最后一个子元素新添加最后一个冗余元素，然后将其设置clear:both,这样就可以清除浮动。这里强调一点，即在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。
伪元素清除浮动： 结合 :after 伪元素和 hasLayout。 可以完美兼容当前主流的各大浏览器
给父元素使用overflow:hidden; 这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。
br标签清浮动： br标签存在一个属性：clear。这个属性就是能够清除浮动的利器，在br标签中设置属性clear，并赋值all。即能清除掉浮动。
8. css选择器
1、标签选择器 div h1 p
2、id选择器 #id
3、类选择器 .class
4、子代选择器 ul > li
5、后代选择器 div p
6、通配符选择器 *
7、属性选择器 div[height=100px]
8、伪类选择器 a:hover (link, visited,hover,active)
可继承样式：font-size、font-family、color
不可继承的样式：border、padding、margin、height、width
9. 样式的优先级
优先级就近选择：同权重情况下，样式定义最近的为准
同权重：内联样式(标签内部)> 嵌入样式表(当前文件中)>外部样式(外部文件中)
\1. 使用了 !important声明的规则。
\2. 内嵌在 HTML 元素的 style属性里面的声明。
\3. 使用了 ID 选择器的规则。
\4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
\5. 使用了元素选择器的规则。
\6. 只包含一个通用选择器的规则。
10. CSS3新增伪类
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
11. 重绘和重排
减少重绘重排的方法有：
· 不在布局信息改变时做DOM查询，
· 使用csstext,className一次性改变属性
· 使用fragment
· 对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素
