布局扩展之等高布局
利用margin-bottom负值和padding-bottom正值配合实现
<style>
*{margin: 0;padding: 0;}
.box{border: 10px solid;overflow: hidden;}
.box1{float: left;width: 100px;background: red;margin-bottom: -2000px;padding-bottom: 2000px}
.box2{float: right;width: 100px;background: blue;margin-bottom: -2000px;padding-bottom: 2000px}
</style> （更多…）
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
CSS hack
用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的css效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式
IE检测工具 IEtester
Hack分类
1.css属性前缀法
2.选择器前缀法
3.IE条件注释法 （更多…）
伪类和伪元素区别以及伪元素概念与意义
伪类和伪元素
在css2.1中对伪类和伪元素的区别比较模糊。css3中对这两个概念做了相对较清晰的解释，并且在语法上也做了很明显的区分
在css3中规定伪类由一个冒号开始，然后为伪类的名称；伪元素由两个冒号开始，然后为伪元素的名称 （更多…）
css3分栏多列布局
column-count 指定元素应分为的列数
column-width 指定列的宽度
column-gap 指定列之间差距
column-rule 一个用于设置所有列规则的简写属性
column-span 指定一个元素应该横跨多少列
column-fill 指定如何填充列
column-rule-color 指定的列之间颜色规则
column-rule-style 指定的列之间的样式规则
column-rule-width 指定的列之间的宽度规则
columns 缩写属性设置列宽和列数
遮罩mask
注：需要加浏览器前缀，默认平铺
mask:url地址 平铺方式 x轴 y轴/宽 高
url repeat x y/w h
倒影box-reflect
box-reflect：上 下 左 右 距离 遮罩/渐变
渐变只针对透明度的渐变，不支持颜色的渐变
倒影也可以用翻转transform:scale(-1)
模糊与计算
blur：filter:blur(模糊值)
calc：四则运算
width:calc(100% – 100px)
文本阴影
text-shadow:x y 模糊度 颜色,x1 y1 模糊度 颜色
阴影颜色默认跟文字颜色一样
盒子阴影
box-shadow:x y 模糊度 距离 颜色 内/外阴影
默认阴影颜色黑色和外阴影，如果设置outside不起作用，可选值只有inside内阴影
字体图标
font-face是css3中的一个模块，主要是把自己定义的web字体嵌入到网页中
阿里巴巴矢量图标库
https://www.iconfont.cn/
自定义字体图标
https://icomoon.io/app
好处： （更多…）
linear-gradient：线性渐变
background-image: linear-gradient(to right,red, yellow, blue);
radial-gradient：径向渐变
background-image: radial-gradient(red, yellow, blue);
css进度条 （更多…）
background-size：背景图的尺寸大小
参数：
cover覆盖，超过元素大小裁切
contain包含，等比拉伸
background-origin：背景图的填充位置
参数：
padding-box(默认)，border-box，content-box
background-clip：背景图的裁切方式
参数：padding-box，border-box(默认)，content-box
