谈谈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选择器：

1. id选择器(#test)
2. 类选择器(.test)
3. 标签选择器(h1,p,div)
4. 相邻兄弟选择器(div+p)
5. 子选择器(ul > li)
6. 后代选择器(ul li)
7. 通配选择器(*)
8. 属性选择器(a[href="www.a.com"])
9. 伪类选择器(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;}：这是很常见的一种写法，强烈不建议（主流大网站基本都不会采用这种写法，甚至在它们内部代码规范中禁止这种写法）

下面是淘宝样式初始化代码：

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, 5b8b4f53;
}

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;
}