谈谈CSS中一些比较"偏门"的小知识 前面我写了：谈谈html中一些比较"偏门"的知识，现在这篇(主要)想谈谈个人所见的CSS一些小知识点，加深印象；同时也希望有需要的人能有收获！
谈谈CSS中一些比较"偏门"的小知识 前面我写了：谈谈html中一些比较"偏门"的知识，现在这篇(主要)想谈谈个人所见的CSS一些小知识点，加深印象；同时也希望有需要的人能有收获！
前面我写了：谈谈html中一些比较"偏门"的知识，现在这篇(主要)想谈谈个人所见的CSS一些小知识点，加深印象；同时也希望有需要的人能有收获！
1.常见的浏览器内核：
以IE为代表：IE，MaxThon，TT，the World，360，搜狗浏览器等-----Trident内核[又称MSHTML]
Firefox，Netscape 6及以上版本，seaMonkey等-----Gecko内核
Opera7及以上----- Opera内核原为：Presto，现为：Blink;
Webkit内核：Safari,Chrome等。----- Chrome的：Blink（WebKit的分支）
2.对浏览器内核的理解：
分为两部分：渲染引擎(layout engineer或rendering engineer)+JS引擎.
渲染引擎：取得网页的内容（html,xml,图片等），整理信息（如加入css），以及网页的显示方式，并输出到显示器或打印机；
JS引擎：解析和执行JS代码实现网页动态效果。
ps：最开始时渲染引擎和JS引擎没有特别的区分开来，发展到现在，JS引擎越来越独立。故一般说内核指的就是渲染引擎。
3.页面导入样式，@import和link的区别：
当然，我们现在一般引入css文件用的是link。（推荐）
- link属于XHTML标签，除了能引入CSS，还能定义RSS，定义rel连接属性；而@import是css提供的，只能用于引入CSS文件；
- @import是css 2.1提出的，故而存在兼容性问题；而link是XHTML标签，不存在兼容性问题；
- @import引用的CSS会在页面加载完成后才执行；而link是与页面加载同时进行。
link用法：
<link rel="stylesheet" type="text/css" href="2.css">@import用法：
<style type="text/css">@import url('2.css');</style>4.CSS链接：
a{color:gold;}
a:link {color:blue;} /* 未访问链接*/
a:visited {color:red;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */顺序规则：
- a:hover必须在a:link和a:visited后面；
- a:active必须在a;hover后面
可记为love,hate(link,visited,hover,active)
善用a{color:gold;}
5.CSS优先级：
- 就近原则，同权重情况下，样式定义最近者为准；（三种方法引入css：内联<style="color:red">，内部<style>......</style>，外部引用<link>）
- 载入样式以最后定义的为准（会产生覆盖）。
优先级为：
！important>id>class>tag；important比内联优先级高。
<form style="color: red !important;color:blue">
<label for="name">点击这里,鼠标光标焦点转至输入框中</label>
<input type="text" name="name" id="name">
</form>如果color:red后面没加!important的话，color:blue就会覆盖前面的color:red。最终效果是红色字体显示“点击这里，鼠标光标焦点转至输入框中”。
6.盒子模型：
W3C盒子模型；低版本IE盒子模型
盒模型：内容（content），内边距/填充（padding），边框（border），外边距（margin）
区别：IE的盒模型content将padding和border算进去了。
7.display属性
/*该元素不被显示*/
display: none;
/*块元素显示*/
display: block;
/*内联元素显示*/
display: inline;
/*块元素显示，但内容像内联元素显示*/
display: inline-block;
/*块级表格显示，有换行*/
display: table;
/*内联表格显示，无换行*/
display: inline-table;
/*继承父元素的display属性*/
display: inherit;
/*作为列表显示*/
display: list-item;
/*根据上下文显示为块元素或内联元素*/
display: run-in;原先真是轻视了display属性，经常用到的也就其中四五个，谁知道它的属性竟有20个左右。更多点击此处
- display:none;隐藏元素，但没有占据空间，也就是说不会影响布局；
- visibility: hidden;也是隐藏元素，但是原先的空间还是被占据着，会影响布局。
关于display:inline-block;可点击此处查看
8.CSS选择器：
- id选择器(#test)
- 类选择器(.test)
- 标签选择器(h1,p,div)
- 相邻兄弟选择器(div+p)
- 子选择器(ul > li)
- 后代选择器(ul li)
- 通配选择器(*)
- 属性选择器(a[href="www.a.com"])
- 伪类选择器(a:hover,ul:nth-child,ul:first-child)
可继承的样式：font-size,font-family,color,ul,li等
不可继承的样式：border,margin,padding,width,height
9.CSS权重
标签或者伪元素权重：1；class/伪类权重：10；id选择器：100；行内样式：1000
/*权重为：100+10+10=120*/
#test .test a:hover{}
/*权重为：10+1+1=12*/
.test p a{}ps：如果权重相同，那么会后面定义的样式会覆盖前面的，尽量避免这种情况。
10.初始化CSS样式
原因：浏览器兼容问题，有些标签的默认值在不同浏览器下是不同的
缺点：对SEO有一定影响
*{padding: 0;margin:0;}：这是很常见的一种写法，强烈不建议（主流大网站基本都不会采用这种写法，甚至在它们内部代码规范中禁止这种写法）
下面是淘宝样式初始化代码：
1 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,
2 ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
3 margin: 0;
4 padding: 0;
5 }
6
7 body,button,input,select,textarea {
8 font: 12px/1.5tahoma, arial, \5b8b\4f53;
9 }
10
11 h1,h2,h3,h4,h5,h6 {
12 font-size: 100%;
13 }
14
15 address,cite,dfn,em,var {
16 font-style: normal;
17 }
18
19 code,kbd,pre,samp {
20 font-family: couriernew, courier, monospace;
21 }
22
23 small {
24 font-size: 12px;
25 }
26
27 ul,ol {
28 list-style: none;
29 }
30
31 a {
32 text-decoration: none;
33 }
34
35 a:hover {
36 text-decoration: underline;
37 }
38
39 sup {
40 vertical-align: text-top;
41 }
42
43 sub {
44 vertical-align: text-bottom;
45 }
46
47 legend {
48 color: #000;
49 }
50
51 fieldset,img {
52 border: 0;
53 }
54
55 button,input,select,textarea {
56 font-size: 100%;
57 }
58
59 table {
60 border-collapse: collapse;
61 border-spacing: 0;
62 }腾讯云开发者
