CSS中的重點

2021-08-03 06:00:20 字數 2812 閱讀 3629

給父元素設定一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性。

並不是所有的屬性都可以繼承,以color/font-/text-/line/list-開頭的屬性可以繼承。(text-decoration不可繼承)

繼承性中的特殊性

- a標籤的文字顏色是不能繼承的

- h標籤的文字大小是不能繼承的

合理使用繼承可以減少冗餘的css**

當多個選擇器選擇同乙個標籤並設定相同的屬性時,樣式會發生重疊,這時候元素所應用的樣式就是優先順序最高的選擇器所設定的樣式。

行內樣式》內聯樣式》外部鏈結樣式

!important>id>類》標籤》萬用字元》繼承》瀏覽器預設

就近原則:當優先順序一樣時離目標元素越近的樣式,越先運用

優先順序權重(繼承不用計算)

當使用組合選擇器控制同乙個標籤時,不同的選擇器有不同的權重。根據計算的權重判斷組合選擇器的優先順序。

權重的計算規則

◦首先先計算選擇器中有多少個id, id多的選擇器優先順序最高

◦如果id的個數一樣, 那麼再看類名的個數, 類名個數多的優先順序最高

◦如果類名的個數一樣, 那麼再看標籤名稱的個數, 標籤名稱個數多的優先順序最高

◦如果id個數一樣, 類名個數也一樣, 標籤名稱個數也一樣, 那麼就不會繼續往下計算了, 那麼此時誰寫在後面聽誰的。

這裡有乙個問題?

網上說類選擇器的權重是10,標籤選擇器的權重是1,我用11個標籤選擇器組合選中乙個元素並設定樣式,然後用該元素的類選擇器設定樣式,此時元素的樣式應該由權重為11組合選擇器控制,但實際上還是類選擇器控制樣式。

css盒模型只是為了方便我們理解塊級框所定義的乙個比喻。

css盒模型指那些可以設定寬度高度/內邊距/邊框/外邊距的標籤。

物件如何計算

說明內容

width和height的屬性值

css所設定的width和height是元素內容的寬高,不是元素的寬高

元素邊框盒

寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框

高度同理

元素邊框盒是指border圍繞的空間,所以設定padding和border會撐大空間

元素空間

在元素寬度和高度的基礎上加上外邊距

元素空間是指在元素在文件中所佔據的空間,這包括margin,雖然margin看不見,但它所佔的空間還是存在的。

box-sizing屬性

css3中新增了乙個box-sizing屬性, 這個屬性可以保證我們給盒子新增padding和border之後, 盒子元素的寬度和高度不變。

box-sizing取值

border-box (表明width和height設定元素的寬高)

在早期有兩種css盒模型:w3c盒模型和ie盒模型。區別就是w3c的盒模型的width和height是content的寬高,而ie的width和height是內容、內邊距和邊框的寬度的總和。

外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

父子框的外邊距在垂直方向上也會發生合併,子框的外邊距會和父框的外邊距發生合併。

所以儘管子框有外邊距,但是最後還是和父框的上邊框緊貼。

簡單列舉幾點注意事項:

要想清除父子框的合併有如下方法:

css 有三種基本的定位機制:普通流、浮動和絕對定位

其實瀏覽器預設的排版方式就是標準流的排版方式

在css中將元素分為三類, 分別是塊級元素/行內元素/行內塊級元素

在標準流中有兩種排版方式, 一種是垂直排版, 一種是水平排版

float的出現就是為了解決水平布局的問題(line-block是css2.1才新增的屬性值)。我們知道標準流的塊級框都是垂直布局的,為了能使塊元素水平布局,必須使元素脫離標準流,然後重新定義乙個水平布局的方式,這就是浮動。

浮動的元素會被重新建立它的顯示樣式,也就是說不管元素在浮動前是塊級元素還是行內元素,浮動後都是塊級框。只不過這個塊級框和標準流中的塊級框的布局方式不同。注意浮動元素在浮動時要給框設定乙個寬度。

清除浮動css清除浮動

為了更好的布局,我們需要清除浮動元素帶來的影響。

1.清除不能撐起父元素帶來的影響

直接給父元素設定高度;

給父元素設定overflow樣式為auto或hidden;

2.清除浮動元素給後面元素帶來的影響

給後面元素設定clear:both;

用css設定浮動元素的父元素的:after樣式來清除浮動。

應不應該用inline-block代替float?

應不應該用inline-block代替float?

通過使用 position 屬性,我們可以選擇 4 種不同型別的定位,這會影響元素框生成的方式。

position 屬性值的含義:

z-index

z-index 屬性指定乙個元素的堆疊順序。

擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

注意:z-index僅能在定位元素上奏效(例如 position:absolute;)!

CSS中的重點

給父元素設定一些屬性,子元素也可以使用,這個我們就稱之為繼承性。並不是所有的屬性都可以繼承,以color font text line list 開頭的屬性可以繼承。text decoration不可繼承 繼承性中的特殊性 a標籤的文字顏色是不能繼承的 h標籤的文字大小是不能繼承的 合理使用繼承可以...

css複習重點

css複習要點 1.float浮動塌陷 父元素只包含浮動元素,且父元素未設定高度和寬度的時候。那麼它的高度就會塌縮為零 解決 塌陷 問題有以下三個方法 1.在使用float元素的父元素結束前加乙個高為0寬為0且有clear both樣式的div 2.在使用float元素的父元素新增overflow ...

CSS重點小結

css三大板塊 盒子模型,浮動,定位,其他都是細節。1.盒子模型 把html頁面元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。每個矩形都由元素的內容 內邊距 padding 邊框 border 和外邊距 margin 組成。box sizing border box免去計算盒子大小,盒子不會被...