css常识

Posted 2022-12-01 fullmetalcoder

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;