資訊專欄INFORMATION COLUMN
摘要：選擇器子元素選擇器符號，左邊是父元素，右邊是子元素。如果兩個元素不是嚴(yán)格的父子關(guān)系，則使用子元素選擇器的定義不會生效。
CSS高效開發(fā)實戰(zhàn)
@(StuRep)
通過條件注釋加載不同的CSS除IE外都可識別
_
條件注釋的控制符| 項目 | 范例 | 說明 |
|---|---|---|
| ! | [if !IE] | “非”運算符 |
| lt | [if lt IE 5.5] | 小于運算符 |
| lte | [if lte IE 6] | 小于等于運算符 |
| gt | [if gt IE 6] | 大于運算符 |
| gte | [if gte IE 6] | 大于等于運算符 |
| () | [if (lte IE 6)] | 用于子表達(dá)式，以配合布爾運算符 |
| & | [if (lte IE 9)&(gt IE 6)] | AND運算符 |
| [if (gt IE 6)](!IE) | OR運算符 |
_
常用的屬性前綴-webkit:webkit核心瀏覽器，包括Chrome、Safari等。
-moz:火狐(FIrefox)瀏覽器
-ms:IE瀏覽器
-o:Opera瀏覽器
在實際的開發(fā)過程中，對于大多數(shù)css3效果來說，考慮到兼容性，往往需要把所有的前綴屬性都寫上去，譬如這樣：
.transform {
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);//把標(biāo)準(zhǔn)屬性放在最后寫
}
_
float對于塊級元素來說，在不設(shè)置寬度的情況下，默認(rèn)的寬度是100%，一旦設(shè)置了浮動，它的寬度就會根據(jù)內(nèi)容進(jìn)行自動調(diào)整。
設(shè)置了浮動的元素會脫離正常的文檔流，我們可以這樣理解：設(shè)置浮動后，元素不僅在y軸上浮了起來，在z軸上，也浮了起來。譬如：在默認(rèn)情況下，父元素的高度會根據(jù)子元素的內(nèi)容進(jìn)行調(diào)整，而如果我們將子元素設(shè)置為浮動，父元素的高度就會變?yōu)?。
雖然浮動的元素脫離了文檔流，但是里面的內(nèi)容仍然占據(jù)空間，會根據(jù)相對位置進(jìn)行布局。
_
清除浮動清除浮動主要應(yīng)用的是css中的clear屬性，clear屬性定義了元素的哪一側(cè)不允許出現(xiàn)浮動元素。可選項有l(wèi)eft、right、both。
_
CSS使用position選項來定義元素的定位屬性，該選項有5個可選值：static、relative、absolute、fixed、inherit，默認(rèn)值為static。
static：如果使用默認(rèn)值，在CSS中為元素定義top、left、right、bottom、z-index都不會生效。
relative：relative的表現(xiàn)和static一樣，只不過可以通過設(shè)置偏移量和z-index來控制相對于其正常位置進(jìn)行的偏移。
absolute：absolute是相對上一個不為static的父元素進(jìn)行絕對定位。換句話說，如果不指定父元素的position，absolute將相對于整個html文檔進(jìn)行絕對定位。只有指定了container的position(非static)，子元素才能相對于父元素進(jìn)行絕對定位。
fixed：生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。也就是說，不論網(wǎng)頁如何滾動，該元素始終停留在屏幕的某個位置上。
塊級元素的寬度在未定義時不再為100%，而是根據(jù)其內(nèi)容自動調(diào)整。
在不定義z-index的情況下，absolute元素會覆蓋在其他元素之上。
它會脫離正常的文檔流，不再占據(jù)空間，類似于浮動后的效果。
absolute和fixed都屬于絕對定位的范疇。
__
CSS選擇器子元素選擇器：">"符號，">"左邊是父元素，右邊是子元素。如果兩個元素不是嚴(yán)格的“父子關(guān)系”，則使用子元素選擇器的定義不會生效。例如：
后代元素選擇器：一個空格。后代包括子輩、孫子輩等，不同于子代選擇器。例如：
相鄰元素選擇器：“+”，用于選取和某個元素相鄰的同級元素。相鄰元素選擇器的使用有兩個條件：
二者必須擁有同一個父元素
二者相鄰
屬性選擇器：屬性選擇器的語法是用一對中括號“[]”，例如[title]、a[href][title]
組選擇器：如果要對多個元素定義同樣的樣式，則可以用組選擇器來縮減重復(fù)代碼。組選擇器的語法關(guān)鍵字是一個“,”
:nth-child(n)：選擇器中的n表示一個簡單的表達(dá)式，它可以是大于等于0的整數(shù)，比如在基礎(chǔ)樣例中應(yīng)用：
li:nth-child(2){
background-color:#333;
color:white;
}
//n取2，就是取某個父元素內(nèi)第二個li元素，即需要同時滿足兩個條件：1.是不是第2個
//2.是不是li元素
:nth-last-child(n)：和nth-child(n)相反
:nth-of-type(n)：這個選擇器和:nth-child(n)類似，區(qū)別在于，如果使用p:nth-child(3)這樣的條件時，一旦第3個元素不為
元素，這個選擇器就不起作用，而p:nth-of-type(3)則查詢的是第3個
元素。
:nth-last-of-type：和上一個相反
:last-child：選擇的是元素的最后一個子元素
:first-of-type和:last-of-type：:first-of-type相當(dāng)于:nth-of-type(1)，:last-of-type相當(dāng)于:nth-last-of-type(1)
:only-child：如果一個父元素只有一個子元素，那么選取這個子元素。如果加了限定條件，例如p:only-child則取交集，即如果一個父元素只有一個子元素，且這個子元素為
，這個選擇器才會生效。
:only-of-type：基本同:only-child，區(qū)別在于如果不指定type而直接使用:only-of-type的話會造成body被選中，而:only-child不會出現(xiàn)這種情況。
_
媒介查詢Media Type的類型匯總
| 設(shè)備 | 指代 |
|---|---|
| all | 匹配所有設(shè)備 |
| braille | 匹配觸覺反饋設(shè)備 |
| embossed | 凸點字符印刷設(shè)備 |
| handheld | 手持設(shè)備 |
| 打印機設(shè)備 | |
| projection | 投影儀設(shè)備 |
| screen | 彩色計算機顯示器設(shè)備 |
| speech | 語音合成器設(shè)備 |
| tty | 柵格設(shè)備 |
| tv | 電視設(shè)備 |
_
認(rèn)識響應(yīng)式網(wǎng)頁設(shè)計響應(yīng)式網(wǎng)頁設(shè)計就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定版本。
_
可以將Media Query看成是添加了CSS屬性判斷的Media Type，其基本語法如下：
@media screen and(max-width:600px){
.class{
background:#ccc;
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111320.html
摘要：有些人想學(xué)，不知如何下手有些人已經(jīng)學(xué)會的各種屬性，卻不知如何運用有些人會平面設(shè)計，不知道如何與網(wǎng)頁設(shè)計結(jié)合有些人會，就是學(xué)不會。 有些人想學(xué)CSS，不知如何下手；有些人已經(jīng)學(xué)會CSS的各種屬性，卻不知如何運用；有些人會平面設(shè)計，不知道如何與網(wǎng)頁設(shè)計結(jié)合；有些人會HTML，就是學(xué)不會CSS。試問自己，圖中的技術(shù)你都會了嗎？ showImg(https://segmentfault.co...
摘要：寫在前面目前專注深入學(xué)習(xí)，特花了點時間整理了一些前端學(xué)習(xí)相關(guān)的書籍。大致分為以下大系列系列系列基礎(chǔ)系列應(yīng)用系列進(jìn)階系列類庫系列框架系列。這些書籍在這里免費提供下載，有興趣的一起學(xué)習(xí)。 寫在前面 目前專注深入JavaScript學(xué)習(xí)，特花了點時間整理了一些前端學(xué)習(xí)相關(guān)的書籍。 大致分為以下7大系列：CSS系列、DOM系列、JavaScript基礎(chǔ)系列、JavaScript應(yīng)用系列、Ja...
閱讀 997·2021-09-26 10:15
閱讀 2087·2021-09-24 10:37
閱讀 2591·2019-08-30 13:46
閱讀 2640·2019-08-30 11:16
閱讀 2432·2019-08-29 10:56
閱讀 2603·2019-08-26 12:24
閱讀 3487·2019-08-23 18:26
閱讀 2671·2019-08-23 15:43
