1.引入css
<link rel="stylesheet" type="text/css" href="">
2.常用默认样式
*{
box-sizing: border-box;
}
ul,ol{
list-style: none;
}
a{
text-decoration:none;
color:#333;
}
3.伪元素
::before,::after(css2里是单冒号)
example:
<p>::before 123 ::after</p>
4.伪类
a:link | visited | hover | active
:first-child
:last-child
5.组合选择器
div+p 紧接再div后面的第一个p
div>p div的所有为p的子元素
div p div内的所有p
div~p div后面的所有兄弟p
6.样式优先级
后面的覆盖前面的
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
- 内联样式表的权值为 1000
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
7.position:releative偏移后，仍然占用原来位置的空间
8.用纯CSS创建一个三角形
把上、左、右三条边隐藏掉（颜色设为 transparent） #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
9.淘宝的样式初始化代码： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
10.ios scroll 卡顿问题
-webkit-overflow-scrolling: touch;
原文地址：https://www.cnblogs.com/fullmetalcoder/p/11583779.html