Python 前端開發之CSS標準文檔流及元素

一、標準文檔流

宏觀的將，我們的web頁面和ps等設計軟件有本質的區別，web 網頁的制作，是個“流”，從上而下 ，像 “織毛衣”。而設計軟件 ，想往哪里畫東西，就去哪里畫

標準文檔流下 有哪些微觀現象？

空白折疊現象：

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

高矮不齊，底邊對齊：

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

自動換行，一行寫不滿，換行寫：

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

二、塊級元素和行內元素

在以前的HTML知識中，我們已經將標簽分過類，當時分為了：文本級、容器級。

我們也學習了行內元素和塊級元素的分類，其實這種分類方式是從CSS的角度講的。

行內元素：

與其他行內元素并排；

不能設置寬、高。默認的寬度，就是文字的寬度。

塊級元素：

霸占一行，不能與其他任何元素并列；

能接受寬、高。如果不設置寬度，那么寬度將默認變為父親的100%。

1、塊級元素和行內元素的相互轉換

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

一旦，給一個塊級元素（比如div）設置：

display:?inline;

那么，這個標簽將立即變為行內元素，此時它和一個span無異。inline就是“行內”。也就是說：

此時這個div不能設置寬度、高度；

此時這個div可以和別人并排了

同樣的道理，一旦給一個行內元素（比如span）設置：

display:?block;

那么，這個標簽將立即變為塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：

此時這個span能夠設置寬度、高度

此時這個span必須霸占一行了，別人無法和他并排

如果不設置寬度，將撐滿父親

ps：

標準流里面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要并排、并且就要設置寬高，那該怎么辦呢？辦法是：移民！脫離標準流！ css中一共有三種手段，使一個元素脫離標準文檔流： （1）浮動 （2）絕對定位 （3）固定定位

軟件開發 人工智能 云計算 機器學習

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。