css常识

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;