精通CSS 第2章 視覺化格式模型

2021-08-27 22:23:31 字數 865 閱讀 8890

第2章 為樣式找到應用目標

選擇器

常用選擇器

1 類選擇器

2 後代選擇器

第三章 視覺化格式模型

3個最重要的css概念是浮動、定位、盒模型,這些概念控制在頁面上安排和顯示元素的方式

3.1 盒模型概述

外邊距疊加

外邊距:當二個或更多垂直外邊距相遇時,它們將形成乙個外邊距。這個外邊距的高度等於二個發生疊加的外邊距的高度中的較大者。

3.2定位

視覺化格式模型

p h1 div 等元素常被稱為塊級元素,strong span 等元素稱為行內元素。

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

相對定位

如果對乙個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素相對於它的起點移動。

3.2.3 絕對定位

絕對定位的元素的位置是相對於距離它最近的那個已定位的祖先元素確定的。如果元素沒有已定位的祖先元素,

那麼它的位置是相對於初始包含塊的。初始包含塊可能是畫布或html元素。

對於定位的主要問題是要記住每種定位的意義。相對定位是」相對於」元素在文件流中的初始位置,而絕對定位是相對於距離它最近的已定位祖先元素,如果不存在已定位的祖先元素,那麼相對於初始包含塊。

固定定位

3.2.4 浮動

浮動的框可以左右移動,直到它的外邊緣碰到包含框或另乙個浮動的邊緣。

行框和清理

浮雲會讓元素脫離文件流,不再影響不浮動的元素。實際上,並不完全如此。

如果浮動的元素後面有乙個文件流中的元素,那麼這個元素的框會表現得像浮動根本不存一樣。

行框被縮短,給浮**像留出空間。

CSS視覺化格式模型

在css中,一切都是框。div h1 或 p 元素常常被稱為塊級元素,意味著這些元素顯示為一塊內容,呈現出的是乙個個塊框。與之相反,span 和 strong 等元素稱為行內元素,這是因為它們的內容會被顯示在一行中,呈現出的是乙個個行內框。視覺化格式模型解釋的就是,怎樣把這些框,按照一定規則擺放在頁...

精通CSS chapter3(視覺化格式模型)

3.1盒模型 當兩個或者更多垂直外邊距相遇時,他們將形成乙個外邊距,這個外邊距的高度等於兩個發生疊加的外邊距的高度中的最大者。如果沒有外邊距疊加,後續所有段落之間的空間將是相鄰外邊和底外邊距的和,這意味著段落之間的空間是頁面頂部的兩倍,這樣就不太好看了 3.2定位概述 p,h1,div等元素成為塊級...

CSS3 視覺化的格式模型

在這個模型裡,文件樹上的每乙個元素都會生成零個,乙個或者多個盒子 根據盒子模型 這些盒子的布局由以下內容決定 本章和下一章定義的屬性同樣適用於連續類 continuous media 和頁面類 paged media 當然,對於頁面類 來說,margin屬性有些不一樣。視覺化格式模型沒有指定關於格式...