谈谈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;}：这是很常见的一种写法，强烈不建议（主流大网站基本都不会采用这种写法，甚至在它们内部代码规范中禁止这种写法）

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

 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 }

View Code