標準文件流

2022-08-05 11:42:12 字數 1803 閱讀 7381

web頁面和ps等設計軟體有本質的區別,web 網頁的製作,是個「流」,從上而下 ,像 「織毛衣」。而設計軟體 ,想往**畫東西,就去**畫

標準文件流下有以下微觀現象

多個空格會被合併成乙個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張之間有間隙,如果在一行內寫img標籤,就解決了這個問題,但是我們不會這樣去寫我們的html結構。這種現象稱為空白摺疊現象。

文字還有大小不一,都會讓我們頁面的元素出現高矮不齊的現象,但是在瀏覽器檢視我們的頁面總會發現底邊對齊

如果在一行內寫文字,文字過多,那麼瀏覽器會自動換行去顯示我們的文字

標準文件流等級森嚴。標籤分為兩種等級:

比如h1標籤和span,同時設定寬高,來看瀏覽器效果,你會發現:

行內元素和塊級元素的區別:

行內元素:

塊級元素:

在html中,將標籤分為了:文本級、容器級。

從html的角度來講,標籤分為:

現在,從css的角度講,css的分類和上面的很像,就p不一樣:

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

塊級元素可以轉換為行內元素:

一旦,給乙個塊級元素(比如div)設定:

display: inline;
那麼,這個標籤將立即變為行內元素,此時它和乙個span無異。inline就是「行內」。也就是說:

同樣的道理,一旦給乙個行內元素(比如span)設定:

display: block;
那麼,這個標籤將立即變為塊級元素,此時它和乙個div無異。block」是「塊」的意思。也就是說:

標準流裡面的限制非常多,導致很多頁面效果無法實現。如果我們現在就要併排、並且就要設定寬高,那該怎麼辦呢?辦法是:移民!脫離標準流

css中一共有三種手段,使乙個元素脫離標準文件流:

浮動絕對定位

固定定位

標準文件流等級森嚴。標籤分為兩種等級:

比如h1標籤和span,同時設定寬高,來看瀏覽器效果,你會發現:

行內元素和塊級元素的區別:

行內元素:

塊級元素:

在html中,將標籤分為了:文本級、容器級。

從html的角度來講,標籤分為:

現在,從css的角度講,css的分類和上面的很像,就p不一樣:

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

塊級元素可以轉換為行內元素:

一旦,給乙個塊級元素(比如div)設定:

display: inline;
那麼,這個標籤將立即變為行內元素,此時它和乙個span無異。inline就是「行內」。也就是說:

同樣的道理,一旦給乙個行內元素(比如span)設定:

display: block;
那麼,這個標籤將立即變為塊級元素,此時它和乙個div無異。block」是「塊」的意思。也就是說:

標準流裡面的限制非常多,導致很多頁面效果無法實現。如果我們現在就要併排、並且就要設定寬高,那該怎麼辦呢?辦法是:移民!脫離標準流

css中一共有三種手段,使乙個元素脫離標準文件流:

浮動絕對定位

固定定位

標準文件流

標準文件流其實是瀏覽器渲染頁面的乙個規則 所有的頁面元素,都要按照它在html文件 現的先後順序,依次在瀏覽器中,從左上角開始,從上到下,從左到右的順序依次顯示。標準文件流的性質 1.空白摺疊 2.高低不齊,底端對齊 標準文件流可以把頁面分成兩大類 1.塊級元素 2.行內元素 塊級元素 1.單獨的佔...

標準文件流

1.組成 a.塊極元素 換行 block level 列表b.內聯元素 不換行 inline 內聯元素可以包含塊級標籤中,成為它的子元素,而反過來則不成立。2.display屬性 a.控制元素的顯示和隱藏 b.塊級元素與行極轉換 值 說明 block 塊級元素預設值 換行符 inline 內聯元素預...

標準文件流 浮動

定義 內容從左到右,從上到下書寫的。前面的內容大小或者位置發生變化時,後面的內容位置也會隨之變化。web頁面,就是乙個標準的文件流。內容跟咱們的書寫順序有關。1 空白摺疊現象 無論多少個空格,tab,換行都會摺疊為乙個空格。張老師 真帥 2 高矮不同,底部對齊 妖怪我要你助我修行 3 一行寫滿,自動...