【前端知識點】CSS知識部分重點整理

選擇器的分組

CSS選擇器分爲

1.羣組選擇器  如：p, body, img, div{}

2.兄弟選擇器  如：p + p { color:#f00; }

3.屬性選擇器  如： p[title] { color:#f00; }

4.包含（後代）選擇器  如：body ul li{}

5.子元素選擇器 如：div > p{}

6.ID選擇器  如：#myDiv{}

7.類選擇器  如：.class1{}

8.僞元素選擇器  如：E:first-line，E:before

9.僞類選擇器  如：E:first-child ，E:visited，E:focus，E:enabled

10.標籤選擇器  如：p { font-size:1em; }

子選擇器和後代選擇器的區別：

後代選擇器的寫法就是把外層的標記寫在前面，內層的標記寫在後面，之間用空格分隔。
子選擇器只對直接後代有影響的選擇器，而對“孫子後代”以及多層後代不產生作用。

注意：在IE6中，只支持後代選擇器，不支持子選擇器

盒子模型

css框模型介紹：

給ul下的li設置寬度，那麼他們將平均掉它們所佔容器的寬度。div >ul> li> a標籤所佔寬度和高度：

當你爲body元素指定div時，每個div默認的寬爲瀏覽器的100%，高度在每個瀏覽器的解析都是不一樣的，比如在火狐下是131px，在chrome下則是142px，具體機制不明

css字體速記規則

當用css定義字體樣式的時候，你也許會這樣做：

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

沒有必要這麼做，因爲你可以使用css速記屬性：

 font: bold italic small-caps 1em/1.5em verdana,sans-serif

值得注意的是：css速記版本只會在你同時指定 font-size和font-family 屬性時纔會生效。如果你沒有指定font-weight, font-style,或者 font-variant，那麼這些值將會自動默認爲 normal

避免多餘選擇器

有時候你會有如下的寫法：

ul li { ... }

ol li { ... }
    
table tr td { ... }

但實際上這是沒必要的寫法，因爲<li>會且只會與<ul>或<ol>連用，就像<td>只能存在於<tr>和<table>中一樣，這兒真沒有把它們重複一次的必要。

!Important

所有被!important 標記的樣式，即使它後來被重寫，瀏覽器也只會採用被標記的那條。

 #content{
      height:960px !important;
      height:900px;
}

!important： IE7/IE8/IE9/FireFox可以識別上面附加!important的語句，看到附加!important的語句後，就不會再去執行第二句，儘管他們也“認識”第二句，但是附加“!important”的語句擁有絕對優先級，只要有它存在，第二句就不允許執行。

IE6會執行!important的語句後，再去執行第二句“height:900px”,用後面的樣式覆蓋了前面的樣式，所以在IE6下，最終的height值是900px。

@import and`<link>`

在決定使用使用哪種方法去包含你的樣式表之前，你應該明白這兩種方法被用來幹嘛？

鏈接式：

link就是把外部CSS與網頁連接起來，將其加在<head>頭部標籤中，具體形式如下：

 <link href="styles.css" type="text/css" />

導入樣式：

通過兩個或以上的css文件共同部分，在css頁面引入css文件，通過@import url（” “）

@import url("global.css");
@import url(global.css);
@import "global.css";

以上三種方式都有效，

區別：

    1）link屬於XHTML標籤，而@import是CSS提供的; 
    2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; 
    3）@import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題; 
    4）link方式的樣式的權重 高於@import的權重.

行內元素、塊元素和空元素

行內元素特點

1、和其他元素都在一行上；

2、元素的高度、寬度、行高及頂部和底部邊距不可設置；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

行內元素在設置水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果，但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。

塊級元素特點

1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設置。

3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行內元素（inline）元素。

塊級元素是可以設置寬高的，但是它的實際寬高是本身寬高+padding。block元素要單獨佔一行。內聯元素不單獨佔一行，給他設置寬高是沒有用的。

塊級元素和行內元素列表：

空元素

知名的空元素： <br> <hr> <img> <input> <link> <meta>
鮮爲人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

長度單位

em

em爲相對長度單位，相對於當前對象內文本的字體尺寸(font-size)。比如：Web頁面中body的文字大小在用戶瀏覽器下默認渲染是16px，所以，此時的1em = 16px;

in

英寸（Inches）。絕對長度單位。

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

pt

點（Points）。絕對長度單位。

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

small

<small> 標籤呈現小號字體效果。

`<strong>`，`<em>`和`<b>`，`<i>`標籤

`<strong>` 標籤和 `<em>` 標籤一樣，用於強調文本，但它強調的程度更強一些。
`em` 是 斜體強調標籤，更強烈強調，表示內容的強調點。相當於html元素中的 `<i>...</i>`;
`< b > < i >` 是視覺要素，分別表示無意義的加粗，無意義的斜體。
em 和 strong 是表達要素(phrase elements)。

b標籤和i標籤的區別



 b 元素現在描述爲在普通文章中僅從文體上突出的不包含任何額外的重要性的一段文本。
  例如：文檔概要中的關鍵字，評論中的產品名。或者代表強調的排版方式。

 i 元素現在描述爲在普通文章中突出不同意見或語氣或其他的一段文本，
  例如：一個分類名稱，一個技術術語，一個外語中的諺語，一個想法等。或者代表斜體的排版方式。

角度單位

deg

度（Degress）。一個圓共360度

90deg = 100grad = 0.25turn

grag

梯度（Gradians）。一個圓共400梯度

90deg = 100grad = 0.25turn

turn

轉、圈（Turns）。一個圓共1圈

90deg = 100grad = 0.25turn

rad

弧度（Radians）。一個圓共2π弧度

90deg = 100grad = 0.25turn

CSS 多類選擇器

一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記爲重要（important）和警告（warning），就可以寫作：

<p class="important warning">
This paragraph is a very important warning.
</p>

對於ID來說，就不能這樣寫了

所有瀏覽器下的CSS透明度

元素透明度時常是個惱人的問題，下面這種方式可以實現所有瀏覽器下的透明度設置：

.transparent {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Zoom屬性是IE瀏覽器的專有屬性，Firefox等瀏覽器不支持。它可以設置或檢索對象的縮放比例。除此之外，它還有其他一些小作用，比如觸發IE的hasLayout屬性，清除浮動、清除margin的重疊等。

當一個元素的 hasLayout屬性值爲true時，我們說這個元素有一個佈局（layout）

css float屬性

定義和用法

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會儘可能地窄。

註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間爲止。

偉大的塌陷

使用浮動(float)的一個比較疑惑的事情是他們怎麼影響包含他們的父元素的。如果父元素只包含浮動元素，那麼它的高度就會塌縮爲零。如果父元素不包含任何的可見背景，這個問題會很難被注意到

塌陷的直觀對立面更不好，看看下面的情況：

清除浮動

如果你很明確的知道接下來的元素會是什麼，可以使用 clear:both; 來清除浮動。這個方法很不錯，它不需要 hack，不添加額外的元素也使得它有良好的語義性。

使用css 僞選擇符(:after)來清除浮動：

.clearfix:after {
                   content: ".";
                   visibility: hidden;
                   display: block;
                   height: 0;
                   clear: both;
            }

漸進增強與優雅降級

概念

優雅降級和漸進增強印象中是隨着css3流出來的一個概念。由於低級瀏覽器不支持css3，但css3的效果又太優秀不忍放棄，所以在高級瀏覽中使用 css3而低級瀏覽器只保證最基本的功能。咋一看兩個概念差不多，都是在關注不同瀏覽器下的不同體驗，關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異。

漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。

區別

優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶。

visibility:hidden和display:none

display:none  隱藏對應的元素，在文檔佈局中不再給它分配空間，它各邊的元素會合攏，
就當他從來不存在。

visibility:hidden  隱藏對應的元素，但是在文檔佈局中仍保留原來的空間。

使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在。

text 文本屬性

text-indent

text-indent 屬性規定文本塊中首行文本的縮進。

註釋：允許使用負值。如果使用負值，那麼首行會被縮進到左邊。使用一個較大的負值進行縮進的話，文字將被隱藏，如-9999em

letter-spacing與word-spacing

letter-spacing 屬性與 word-spacing 的區別在於，前者是修改字母的間隔，後者是修改單詞或單個文字的間隔

text-transform

text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：

none
uppercase：所有的單詞都大寫
lowercase：所有的單詞都小寫
capitalize：只對每個單詞的首字母大寫

text-decoration

text-decoration 有 5 個值：

none
underline：下劃線
overline：上劃線
line-through：在文本中間畫一個貫穿線
blink：讓文本閃爍

white-space

pre-line     合併空白符序列，但保留換行符 
normal      
nowrap      防止元素中的文本換行
pre      空白符不會被忽略
pre-wrap    保留空白符序列

原文鏈接：

佔有慾極強的無知偏執狂

發佈了15 篇原創文章 · 獲贊 25 · 訪問量 8萬+

私信關注