第一章 CSS文件流與塊級元素和內聯元素

2022-04-29 11:57:13 字數 665 閱讀 8070

css文件流與塊級元素(block)、內聯元素(inline),之前翻閱不少書籍,看過不少文章, 看到所多的是零碎的css布局基本知識,比較表面.看過o'reilly的文件流

將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流.

每個非浮動塊級元素都獨佔一行, 浮動元素則按規定浮在行的一端. 若當前行容不下, 則另起新行再浮動.

內聯元素也不會獨佔一行. 幾乎所有元素(包括塊級,內聯和列表元素)均可生成子行, 用於擺放子元素.

有三種情況將使得元素脫離文件流而存在,分別是浮動,絕對定位, 固定定位. 但是在ie中浮動元素也存在於文件流中(還讓我覺得這樣很合理》<).

浮動元素不佔任何正常文件流空間,而浮動元素的定位還是基於正常的文件流,然後從文件流中抽出並盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當乙個元素從正常文件流中抽出後,仍然在文件流中的其他元素將忽略該元素並填補他原先的空間。

浮動概念讓人迷惑根源在於瀏覽器對理論的解讀造成的。只能說很多人以ie做標準,其實它不是。

基於文件流, 我們可以很容易理解以下的定位模式:

接下來還有幾個問題我搞不明白的

作為三大基本元素之一的內聯元素, 它跟塊級元素的主要區別在哪?

clear屬性取right值時怎麼理解? 貌似實驗情況總跟理論不符.

CSS文件流與塊級元素和內聯元素

塊元素 block element 一般是其他元素的容器元素 塊元素一般都從新行開始,它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊,它只能用來容納其他塊元素。如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種...

CSS文件流與塊級元素和內聯元素

文件流 將窗體自上而下分成一行行,並在每行中按從左至右的順序排放元素,即為文件流.每個非浮動塊級元素都獨佔一行,浮動元素則按規定浮在行的一端.若當前行容不下,則另起新行再浮動.內聯元素也不會獨佔一行.幾乎所有元素 包括塊級,內聯和列表元素 均可生成子行,用於擺放子元素.有三種情況將使得元素脫離文件流...

css世界 探索第一章

1.文件流 是css世界中的一種基本的定位和布局機制 是引導元素排列和定位的一條看不見的流。流向只能是正向的。浮動定位會脫離文件流。2.流體 布局 曾經風靡的 div css 布局 實際上指的就是這裡的 流體 布局 3.table 的世界 有著自己的世界,流 的特性對並不適用,一些 css 屬性的表...