权重
!important(强调) > inline style(行内样式) > id > calss > tag(标签) > *（通配符） > 继承
| 选择器 | 权重 |
|---|---|
| 通配符 | 1 |
| 标签 | 2 |
| 类/伪类/属性 | 10 |
| ID | 100 |
| 行内样式 | 1000 |
| important | 无穷大 |
@import的样式被置于当前css的顶部，所以会被下面的css层叠掉
css实现三角形
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
//箭头的朝向与颜色相反
BFC规则
wiki
是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。
形成条件（任意一条）
- float的值不是none
- position 的值不是static或者relative
- display的值是inline-block,table-cell,flex,table-caption或者inline-flex
- overflow的值不是visible
特性
内部的盒子会在垂直方向上一个接一个的放置 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此 BFC的区域不会与float的元素区域重叠 计算BFC的高度时，浮动子元素也参与计算 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
清除浮动
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
修改chrome记住密码后自动填充表单的黄色背景
autocomplete="off"禁止默认填充input:-webkit-autofill {webkit-box-shadow: 0 0 3px 100px #eee inset; }改变填充背景色
Chrome支持小于12px的文字
- 用图片代替
-webkit-text-size-adjust:none不支持chrome 27.0+transform:scale()css3缩放，
transform 对行内元素无效,所以元素必须是block或者inline-block，缩放后原来元素还是会占据对应的位置。因此需要做调整，最好是在外面再包一层元素，以免影响其他元素
网页字体变细
font-weight:lighter和font-famliy字体- css控制
-webkit-font-smoothing:antialiased
-moz-osx-font-smoothing: grayscale
text-shadow: 1px 1px 1px 1px rgba(0,0,0,0.005)
text-rendering: optimizeLegibility
display:inline-block间隙
原因：在标签之间存在回车符和空格时，会有间隙
解决：
1、父元素font-size：0
2、删除多余的空格
