談談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