這是一個很經典的CSS布局問題，新人徹底理解了這個問題，HTML網頁布局思想便已掌握了七七八八了，
問題
先看一段HTML代碼：
<!DOCTYPE html>
<html>
<body>
<h1>這是一個標題</h1>
<div >
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>
</div>
</body>
</html>
因為p標簽默認是塊級元素，寬度默認會占滿父容器的100%，所以這個代碼默認展現出來的樣式是這樣的：
問題與這個示例有關，是這樣的：如何將三行文本“這是一個段落”合并到一行，從左向右排行顯示，且不用移除<p>標簽？
最簡單的解決方案只需要加一行CSS樣式代碼：
.wrapper p {
display: inline;
}
運行效果如下所示：
為什么簡單加一個inline樣式就可以解決問題？
早期網頁為了從向至下流式展示內容，根據需要將標簽元素默認分為了兩類：
- 塊級元素
- 行內元素
塊級元素默認占據父容器的100%寬度，同時可以有高度，在不指定高度的時候，高度由子元素堆積決定，例如div、p、h1~h6等標簽，凡是默認在網頁中占據全部頁面寬度的元素，都是塊級元素，
而行內元素用于在一行內從左向右展示小內容，行內元素默認只有寬度，沒有高度，并且它們的寬度也是由它們本身的內容所決定的，例如a、br、b、em、img、sub、sup、strong等標簽，凡是默認不占據100%父容器寬度的元素，都可以視為行內元素，如果想給行內元素指定高度，可以在父容器上給行元素設定line-height樣式，
這兩類元素的作用，就是合起來展示一個從上至下依次展示、每行從左至右依次排列的流布局，如下所示，
回頭看我們的示例，p標簽默認是塊級標簽，它在渲染時要占滿頁面容器的100%寬度，所以默認效果三行文本“這是一個段落”是從上向下依次排列的，
當我們通過類選擇器+標簽選擇器（.wrapper p），修改了所有p標簽的display樣式后，即將display樣式設定為inline，這時候這個頁面內的所有p標簽已經不是塊級元素了，都變成了行內元素，
HTML元素是什么塊級元素，還是行內元素，本質上是由它們攜帶的默認的CSS樣式決定的，也就是由display等于block或inline決定的，等于block就是塊級元素，等于inline就是行內元素，因為CSS可以控制一切HTML元素的樣式，事實上我們甚至可以將任何一個HTML元素修改為其他元素————當然如果真修改的話，這里還涉及元素屬性的問題，在這里我們只談樣式，HTML元素默認攜帶的樣式是由其名稱決定的，所有元素的默認樣式都是可以通過CSS代碼修改的，
當給p標簽設定了display樣式為inline以后，這時候p標簽的行為與span標簽類似了，于是三行文本“這是一個段落”便是從左向右，在一行內展示了，如果一行展示不了，內容還會自動換行，就像其他行內元素所表示出來的行為那樣，
由inline-block決定的行內塊級元素
隨著網頁布局復雜度的提升，后來又出現了inline-block樣式值，我們可以修改示例，看一看將display修改為inline-block之后的效果，如下所示，
效果與修改為inline是相似的，在這個示例中看不出什么差別，事實上inline-blcok代表行內的塊級元素，這樣的元素既可以在一行之內從左向右自動依次排列，可以擁有自己的高度，又可以作為一個區域的小容器，再容納其他子元素，
inline-blcok樣式的出現，代表CSS在網頁布局方面已經沒有什么能力短板了，只有網頁設計師想不到的，沒有CSS實作的布局，
flex布局
但CSS的網頁布局能力發展到這里并沒有停止，后來為了更好了處理父容器與子元素的組合樣式，flex布局被發明出來了，flex布局能夠實作的效果，用以往的CSS也可以實作，但用flex布局的方法實作，代碼會更簡潔、邏輯會更加清晰、頁面的擴展性也更好，
下面作者仍然拿上面的示例改造，如果不設定display為inline或inline-block，使用flex布局怎么達到同樣的效果呢？也是只添加一行CSS代碼就足夠了，如下所示，
<!DOCTYPE html>
<html>
<body>
<style>
.wrapper {
display: flex;
}
</style>
<h1>這是一個標題</h1>
<div >
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>
</div>
</body>
</html>
運行效果如下所示：
效果是一樣的，
將display設定為flex就代表了啟用flex布局，因為默認情況下flex-direction等于row，子元素會像行內元素那樣從左向右排行，所以只寫一行display等于flex樣式代碼就可以了，
flex布局能力很強大，它不僅可以處理從左向右的橫向布局，還可以處理從上向下的縱向布局，兩個方向的布局使用的是同一套樣式語意，
很多人都覺得這套語意記了又忘，實在很難記住，即使是富有經驗的網頁設計師在許久不手寫CSS代碼之后，也需要借助工具才可以將樣式代碼寫對，針對開發者的這個痛點，新版本的Chrome瀏覽器現在提供了這樣的一個flex布局輔助設計功能，如下所示，當我們給元素添加了display等于flex的樣式代碼后，后面會出現一個功能按鈕，點擊它，會展開一個flex布局互動小面板，點擊這個面板上具體的排列項，相應的樣式代碼即會自動生成，
以后不用再記那些難記的樣式名稱了，有需要的時候調出這個flex布局互動小面板，動手你發財的小手點一點，所有布局代碼都能搞定了，
小結
HTML開發主要有兩種布局思想：傳統div流式布局和flex布局，
還有一種全頁面都使用絕對值定位的布局思想，這種布局思想只適用于Web管理后臺或工具Web專案等開發場景，對于面向C端用戶的場景是不適用的，HTML網頁的根本設計哲學是流式布局————整體上從上向下、行內從左向右的流式布局，這種布局可以讓HTML內容可以一邊加載一邊渲染與展示，這是一種很好的設計哲學，不要輕易舍棄這種哲學，
flex布局本質上繼承了流式布局的思想，它與流式布局并不沖突，只是豐富了CSS在父容器子元素組合關系布局上的能力，在網頁設計中，現在普遍優先使用flex布局，用最簡單的CSS代碼達到設計的需求，在具體設計時，配合使用Chrome開發者工具中的flex布局小面板，寫起flex布局代碼也很容易，
著作權歸LIYI所有
基于CC BY-SA 4.0協議
原文鏈接：https://yishulun.com/posts/2022/34.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541296.html
標籤：Html/Css
上一篇：JavaScript 自執行函式防止沖突全域作用域變數 - 在線客服原始碼實作彈窗效果JavaScript SDK