CSS高效開發實戰

khlbat 發布于2019-08-29 10:56 / 2419人閱讀

摘要：選擇器子元素選擇器符號，左邊是父元素，右邊是子元素。如果兩個元素不是嚴格的父子關系，則使用子元素選擇器的定義不會生效。

CSS高效開發實戰

@(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)]	用于子表達式，以配合布爾運算符
&	[if (lte IE 9)&(gt IE 6)]	AND運算符
	[if (gt IE 6)](!IE)	OR運算符

常用的屬性前綴

-webkit:webkit核心瀏覽器，包括Chrome、Safari等。

-moz:火狐(FIrefox)瀏覽器

-ms:IE瀏覽器

-o:Opera瀏覽器

在實際的開發過程中，對于大多數css3效果來說，考慮到兼容性，往往需要把所有的前綴屬性都寫上去，譬如這樣：

.transform {
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);//把標準屬性放在最后寫
}

float

對于塊級元素來說，在不設置寬度的情況下，默認的寬度是100%，一旦設置了浮動，它的寬度就會根據內容進行自動調整。

設置了浮動的元素會脫離正常的文檔流，我們可以這樣理解：設置浮動后，元素不僅在y軸上浮了起來，在z軸上，也浮了起來。譬如：在默認情況下，父元素的高度會根據子元素的內容進行調整，而如果我們將子元素設置為浮動，父元素的高度就會變為0。

雖然浮動的元素脫離了文檔流，但是里面的內容仍然占據空間，會根據相對位置進行布局。

清除浮動

清除浮動主要應用的是css中的clear屬性，clear屬性定義了元素的哪一側不允許出現浮動元素。可選項有left、right、both。
_

CSS定位技術

CSS使用position選項來定義元素的定位屬性，該選項有5個可選值：static、relative、absolute、fixed、inherit，默認值為static。

static：如果使用默認值，在CSS中為元素定義top、left、right、bottom、z-index都不會生效。

relative：relative的表現和static一樣，只不過可以通過設置偏移量和z-index來控制相對于其正常位置進行的偏移。

absolute：absolute是相對上一個不為static的父元素進行絕對定位。換句話說，如果不指定父元素的position，absolute將相對于整個html文檔進行絕對定位。只有指定了container的position(非static)，子元素才能相對于父元素進行絕對定位。

fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。也就是說，不論網頁如何滾動，該元素始終停留在屏幕的某個位置上。

絕對定位元素有以下幾個特點：

塊級元素的寬度在未定義時不再為100%，而是根據其內容自動調整。

在不定義z-index的情況下，absolute元素會覆蓋在其他元素之上。

它會脫離正常的文檔流，不再占據空間，類似于浮動后的效果。

absolute和fixed都屬于絕對定位的范疇。

CSS選擇器

子元素選擇器：">"符號，">"左邊是父元素，右邊是子元素。如果兩個元素不是嚴格的“父子關系”，則使用子元素選擇器的定義不會生效。例如：

test

test

//css
li>a{
    color:blue;
}

后代元素選擇器：一個空格。后代包括子輩、孫子輩等，不同于子代選擇器。例如：

test

test

//css
li a{
    color:blue;
}

相鄰元素選擇器：“+”，用于選取和某個元素相鄰的同級元素。相鄰元素選擇器的使用有兩個條件：

二者必須擁有同一個父元素

二者相鄰

屬性選擇器：屬性選擇器的語法是用一對中括號“[]”，例如[title]、a[href][title]

組選擇器：如果要對多個元素定義同樣的樣式，則可以用組選擇器來縮減重復代碼。組選擇器的語法關鍵字是一個“,”

:nth-child(n)：選擇器中的n表示一個簡單的表達式，它可以是大于等于0的整數，比如在基礎樣例中應用：

li:nth-child(2){
    background-color:#333;
    color:white;
}
//n取2，就是取某個父元素內第二個li元素，即需要同時滿足兩個條件：1.是不是第2個
//2.是不是li元素

:nth-last-child(n)：和nth-child(n)相反

:nth-of-type(n)：這個選擇器和:nth-child(n)類似，區別在于，如果使用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相當于:nth-of-type(1)，:last-of-type相當于:nth-last-of-type(1)

:only-child：如果一個父元素只有一個子元素，那么選取這個子元素。如果加了限定條件，例如p:only-child則取交集，即如果一個父元素只有一個子元素，且這個子元素為

，這個選擇器才會生效。

:only-of-type：基本同:only-child，區別在于如果不指定type而直接使用:only-of-type的話會造成body被選中，而:only-child不會出現這種情況。

媒介查詢

Media Type的類型匯總

設備	指代
all	匹配所有設備
braille	匹配觸覺反饋設備
embossed	凸點字符印刷設備
handheld	手持設備
print	打印機設備
projection	投影儀設備
screen	彩色計算機顯示器設備
speech	語音合成器設備
tty	柵格設備
tv	電視設備

認識響應式網頁設計

響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定版本。
_

媒介查詢的基本語法

可以將Media Query看成是添加了CSS屬性判斷的Media Type，其基本語法如下：

@media screen and(max-width:600px){
    .class{
        background:#ccc;
    }
}

GPU云服務器云服務器 css實戰 css實戰精粹實戰開發前端實戰開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111320.html

只會CSS還不夠，LESS、SASS、BootStrap、Foundation一網打盡！

摘要：有些人想學，不知如何下手有些人已經學會的各種屬性，卻不知如何運用有些人會平面設計，不知道如何與網頁設計結合有些人會，就是學不會。有些人想學CSS，不知如何下手；有些人已經學會CSS的各種屬性，卻不知如何運用；有些人會平面設計，不知道如何與網頁設計結合；有些人會HTML，就是學不會CSS。試問自己，圖中的技術你都會了嗎？ showImg(https://segmentfault.co...

tain335 2019-08-21 10:18 評論0 收藏0
你需要的前端進階書籍清單，分享下載

摘要：寫在前面目前專注深入學習，特花了點時間整理了一些前端學習相關的書籍。大致分為以下大系列系列系列基礎系列應用系列進階系列類庫系列框架系列。這些書籍在這里免費提供下載，有興趣的一起學習。寫在前面目前專注深入JavaScript學習，特花了點時間整理了一些前端學習相關的書籍。大致分為以下7大系列：CSS系列、DOM系列、JavaScript基礎系列、JavaScript應用系列、Ja...

yuanzhanghu 2019-08-26 10:28 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

awesome23 2019-08-20 18:23 評論0 收藏0
前端資源收集整理

摘要：工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。工作原因，最近一年斷斷續續寫了一點前端代碼，收集整理了一些資料，和大家共享。 Github版本：Front-End Resource Collection 前端相關資源匯總學習指導精華文章 Web前端的路該怎么走？：文章超長，但是干貨超級多，值得反復精讀！聽說2017你想寫前端？：適合于已經度過了小白階...

antyiwei 2019-08-29 13:03 評論0 收藏0