K60至尊版狂暴引擎2.0加持：超177萬跑分斬獲性能第一
Redmi的后性能時代戰(zhàn)略發(fā)布會今天下午如期舉辦，在本次發(fā)布會上，Redmi公布了多項關于和聯(lián)發(fā)科的深度合作，以及新機K60 Ultra在軟件和硬件方面的特性，例如：“K60 至尊版，雙芯旗艦
大家好，我是樹哥。
最近想著學習點前端知識，于是就學習了關于前端 Web 的布局知識，其實就是 CSS 那些事。關于 CSS 其實很早就接觸過了，但一直沒有沉下心來去學習，所以對于 CSS 布局的東西一直都不成體系。這次趁著重學前端，真正花時間學了一下 CSS 布局的知識點，順帶把知識點總結(jié)一下。
說到 CSS 布局，有寫過一些 CSS 頁面的同學腦海中可能會浮現(xiàn)一些字眼，例如：float、display、relative、absolute 等等。但這些屬性分別代表什么意思，它們之間都有什么區(qū)別，啥時候用 float 啥時候用 relative，你弄得懂嗎？對于我來說，我沒弄懂，有點懵。于是，我花了點時間弄懂它，這也是本文要重點弄懂的問題。簡單來說，看完這篇文章，你應該可以弄清楚如下幾個問題：
1、常用的幾個 CSS 布局屬性作用及區(qū)別。
2、CSS 布局的歷史以及當前流行的布局方式。
要注意的是，本文不會從零開始介紹 CSS 的知識點。只適合學習過 CSS，但是對 CSS 布局各種屬性沒弄明白的同學。如果你還沒學過 CSS 知識，那需要先去學習一下 CSS 基礎知識再來看這篇文章。
理解文檔流對于我們掌握 CSS 布局非常重要。簡單來說，我們在 HTML 中寫入的每一個元素，都是一個元素塊。默認情況下，它們按照我們在 HTML 中書寫的順序，從上到下、從左到右排列，這就是默認的文檔流。例如，對于如下所示的代碼片段，其在 HTML 中會按照順序顯示，如下圖所示。
<body> <p>段落1</p> <p>段落2</p> <p>段落3</p></body>
在 CSS 布局中，有三個常用的 CSS 屬性，分別是：display、float、position。它們具有不同的功能，適用于不同的場景。
就像 display 的名字一樣，其用來定義元素塊的展示形式，不同的展示形式會有不同的展示效果。 display 屬性的常用屬性有：
要注意的是，不同的 HTML 元素，其默認的展示形式是不同的。例如 p 元素（段落）的 display 屬性默認值是 block，而 a 屬性（鏈接）的 display 屬性默認值則是 inine。
下面，我們通過幾個簡單的例子來體會一下上面所說的內(nèi)容。如下圖所示的代碼，我們設置不同的 CSS 屬性，元素的展示形式會發(fā)生變化。
<body> <p class="display">段落1</p> <p class="display">段落2</p> <p class="display">段落3</p></body>設置的 CSS 屬性如下所示：
.display { background-color: red;}顯示效果如下圖所示。
-w524
如上圖可以看到，在 CSS 代碼中，我只是設置背景顏色。由于 p 元素的默認 display 屬性值是 block，因此每個段落都會占用一行的空間。
如果我們把 p 元素設置成 inline 顯示形式，那么它們就會多個元素排列在一行內(nèi)。如下圖所示。
.display { display: inline; background-color: red; /* width/height 屬性設置無效 */ width: 200px; height: 200px;}
-w228
如果我們把 p 元素設置成 inline-block 顯示形式，并且設置了寬高，那么它們就會多個元素排列在一行內(nèi)，并且寬高設置會生效。如下圖所示。
.display { display: inline-block; background-color: red; /* width/height 屬性設置無效 */ width: 200px; height: 200px;}
-w639
看到這里，相信大家應該可以弄清楚 display 屬性的作用了。display 屬性其實就是用來設置 HTML 元素的展示形式的，不同的展示形式會有不同的展示效果。給不同的元素設置合適的屬性值，可以幫助我們更好地進行頁布局。
display 屬性除了前面說得這三種屬性值之外，還有 flex、grid、table 等值。但目前用得最多的還是 flex 和 grid 這兩種，它們可以說是目前主流的 CSS 布局方式。關于這塊內(nèi)容，我們后面再細講，這里就不展開了。
就像 float 這個名字一樣，它代表著浮動。
啥意思呢？
要理解這個，就要從 CSS 的歷史說起了。很早之前，display 屬性只有兩個，分別是 block 和 inline。block 雖然支持設置寬高，但是不支持多個元素顯示在一行。inline 雖然支持多個元素顯示在一行，但是卻不能設置寬高。但是實際場景中，我們很多時候需要做多列布局的，即需要多個元素在同一行，并且同一行的元素都可以設置寬度，如下圖所示。
-w1173
這時候 CSS 就滿足不了我們的訴求了！
那怎么辦呢？
這時候 float 就橫空出世了！
簡單來說，float 就是讓塊級元素（block元素）浮起來。 塊級元素浮起來之后，塊級元素就不固定占用一行了，而是根據(jù)其設置的寬度顯示。如果一行的寬度能夠容納得下兩個浮動的塊級元素，那么它們就可以同時顯示在同一個行內(nèi)。
舉個簡單地例子，下面的 HTML 片段，設置了三個 block 元素塊。
<body> <p class="display">段落1</p> <p class="display">段落2</p> <p class="display">段落3</p></body>.display { display: block; width: 200px; height: 100px; background-color: red;}在沒有設置浮動之前，每個塊級元素都會占用一行，如下圖所示。
-w264
但是如果我們對元素設置了向左浮動，那么它們就會往左浮動，三個塊級元素都浮動到了同一行，如下圖所示。
.display { display: block; float: left; width: 200px; height: 100px; background-color: red;}
-w626
所以，float 元素的出現(xiàn)，是用來解決 block 元素塊無法同行顯示，從而無法實現(xiàn)特定布局場景的問題的。 在 float 出現(xiàn)的很長一段時間，基本上大家都靠 float 來進行頁面布局。
有同學會問：好像 inline-block 也能實現(xiàn)這個效果呀？沒錯，inline-block 也能實現(xiàn)這樣的效果。但實際上，inline-block 是在 float 之后才出現(xiàn)的。 我猜，是 CSS 官方覺得：好像確實需要有這么一個屬性值，可以讓多個元素顯示在同一行，又可以設置它們的寬高。人民群眾既然需要，那么我們就搞一個 inline-block 給大家用吧！
但從回顧過去，貌似大家用 float 更多一些，用 inline-block 更少一些。為啥呢？或許是 inline-block 出現(xiàn)之前，大家都習慣用 float 了。而 inline-block 比起 float 貌似沒什么太大的改變，于是就沒動力去換了吧。
后來 CSS3 的 flex、grid 出現(xiàn)了，CSS 才真正有了一個非常好用的布局工具。到了 2023 年的今天，除非是一些需要兼容古老瀏覽器版本的頁面需要用 float 布局，其他大多數(shù)的 Web 頁面布局都使用 flex、grid 進行布局了。
看到這里，信息量貌似有點大，怎么去理解 block -> float -> inline-block -> flex/grid 的這種布局變遷呢？知乎某前端大 V 賀師俊的理解，我覺得很好：
言歸正傳，CSS1時代的網(wǎng)頁還很簡陋，但是隨著萬維網(wǎng)的迅猛發(fā)展，Web界面也迅速進化，當初簡單的如同書頁般的通欄式網(wǎng)頁迅速絕跡，frameset由于天生存在的一堆問題也很快退出主流，這時CSS在GUI布局方面就顯出了缺陷，開發(fā)者被迫使用各種trick。比如歷史悠久的table布局。后來table布局被鄙視，開發(fā)者逐漸轉(zhuǎn)向了float布局。
要說float布局之所以流行，IE“功”不可沒。在IE中，has layout的元素是不會環(huán)繞float元素的（因為has layout的元素自己是一個控件，所以總是保持一個矩形區(qū)域）。這本來是一個bug，但是其效果卻正好符合常見的雙欄布局的需要。另外IE下float元素會自動撐開其父級container元素（當然前提是container元素也是has layout的），這其實也是bug，但是也恰好符合模塊布局的需求。后來所謂inline-block布局其實正是這些bug的合理化。
站在今天回望過去十多年的CSS實踐，我們可以發(fā)現(xiàn)，無論float布局還是后來的inline-block布局，其實都是trick。所謂trick，就是將一些特性挪作他用，以很曲折的方式實現(xiàn)出想要的效果。CSS作為樣式語言，其可維護性的最終來源，就是代碼能清晰的表達出設計意圖。而CSS trick當然不能很好的滿足這一點。
簡單來說，這樣的布局方式變化，其實是 CSS 不斷完善進化的結(jié)果。一開始的時候，CSS 的功能比較簡陋，所以需要我們自己用各種 trick 來實現(xiàn)需要的功能。到了后面，各種應用場景日趨完善，CSS 也不斷完善起來，最終我們可以用很簡單的 flex、grid 就實現(xiàn)之前所需要的效果。
以上關于 CSS 變遷的理解，來自于賀師俊的知乎回答，感興趣的同學可以點擊查看原文:在 CSS 中，用 float 和 position 的區(qū)別是什么？- 賀師俊的回答 - 知乎
如 position 名字的意思一樣，position 主要是用來調(diào)整元素位置用的。一般情況下，我們用 display 和 float 做好布局之后，可能需要對元素做一些微調(diào)，那么這時候就該 position 登場了。對于 position 來說，其有五個屬性值，分別是：static、relative、absolute、fixed、sticky。
static 關鍵字指定元素使用正常的布局行為，即元素在文檔常規(guī)流中當前的布局位置。
如下圖所示的 HTML 片段，我們不設置 position 屬性，或者設置 position 屬性為 static，其展示形式都不發(fā)生變化。
<div class="parent"> <div class="box"></div></div>.parent{ width: 200px; height: 200px; border: 1px solid red;}.box { position: static; width: 50px; height: 50px; background-color: black;}
-w241
relative 表示相對定位，即相對于其父級容器做偏移。偏移位置使用 left/right/top/bottom 屬性來設置。就如上面的例子中，如果我們使用如下的 CSS 設置，我們可以看到對應的塊元素相對父容器做了偏移，如下圖所示。
.parent{ width: 200px; height: 200px; border: 1px solid red;}.box { position: relative; left: 20px; top: 20px; width: 50px; height: 50px; background-color: black;}
-w232
absolute 表示絕對定位。元素會被移出正常文檔流，并不為元素預留空間。通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。
如下所示的 HTML 片段，我們使用如下的 CSS 設置進行設置，那么對應元素塊（box類所在元素）的偏移原點就不是其父級元素（son類所在元素），而是最頂層的非 static 定義的祖先元素了（parent類所在元素），如下圖所示。
<body> <div class="parent"> <div class="son"> <div class="box"></div> </div> </div></body>.parent{ position: relative; top: 50px; left: 800px; width: 300px; height: 200px; border: 1px solid red;}.son { top: 30px; left: 30px; width: 100px; height: 100px; border: 1px solid black;}.box { position: absolute; left: 20px; top: 20px; width: 50px; height: 50px; background-color: black;}
-w1245
fixed 也表示絕對定位。元素會被移出正常文檔流，并不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。其與 absolute 的區(qū)別是，fixed 是相對于屏幕 viewport 做偏移的，而 absolute 是相對于最近的一個非 static 祖先元素做偏移的。
如下所示的 HTML 代碼塊，其與上面 absolute 屬性里的代碼塊完全一致，我們只是將 box 類的 position 屬性值改為了 fixed，如下代碼所示。
<body> <div class="parent"> <div class="son"> <div class="box"></div> </div> </div></body>.parent{ position: relative; top: 50px; left: 800px; width: 300px; height: 200px; border: 1px solid red;}.son { top: 30px; left: 30px; width: 100px; height: 100px; border: 1px solid black;}.box { position: fixed; left: 20px; top: 20px; width: 50px; height: 50px; background-color: black;}其展示的效果如下圖所示。
-w1184
從這里我們可以較為清晰地看出 absolute 和 fixed 兩個屬性值的區(qū)別。
sticky 表示粘性布局，其可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。例如：
#one { position: sticky; top: 10px;}上面的代碼表示：在 viewport 視口滾動到元素 top 距離小于 10px 之前，元素為相對定位。等到距離小于 10px 之后，元素將變?yōu)?fixed 定位，元素將固定在與 viewport 頂部距離 10px 的位置。直到元素與 viewport 頂部的距離再次大于 10px，將再次變成相對定位。
一般情況下，這個用于一些滾動查看文本時，需要將某些信息置頂再頂部的情況，如下圖所示。
圖片
在 sticky 屬性之前，我們需要自己做很復雜的設置才能實現(xiàn)這樣的效果。但 sticky 屬性直接幫我們實現(xiàn)了，非常方便。
看到這里，我們基本上把 CSS 布局所需要了解的知識點都介紹了一遍。那我們在實現(xiàn) Web 頁面的時候，到底應該用哪些 CSS 屬性呢？是 float + block，還是 inlien-blcok，亦或是 flex 呢？
這里我直接給出答案：如果沒有歷史負擔，不需要去兼容老版本瀏覽器，那么直接上 flex/grid 布局。如果要兼容古老的瀏覽器版本，那么就先用 float，float 解決不了就用 position。
為啥是這樣呢？以為 flex 和 grid 布局是最新的 CSS3 提供的解決方案，是對之前 float + display + position 的總結(jié)，是更好的工具。但缺點也明顯，就是一些老版本瀏覽器不兼容，沒法使用。因此要兼容老版本瀏覽器的話，就只能用老古董的 float 這種 tricks 了。
如果你需要用 float 這種方式去做布局，那可以參考一下這篇文章：【CSS】CSS布局解決方案（終結(jié)版） - 掘金。文章里列舉了不少布局方式，還是比較實用的，讓你快速掌握常用的布局方式。
我把文章中涉及到的例子都整理到了 CodePen 上，方便大家嘗試，有需要的可以看看：https://codepen.io/Ronald-Chan/pen/wvRdBGL
對于 flex 布局來說，其使用也非常簡單，基本上把對應的屬性看一篇就知道怎么玩了。不像 float 布局一樣，需要思來想去的，非常麻煩。
考慮到問文章篇幅和主題問題，關于如何使用 flex、grid 進行排版布局，這里就不延展展開了，后續(xù)有機會再分享 flex 布局相關內(nèi)容。
對于 CSS 布局，之前自己只粗淺地知道 float、display 這些屬性，并沒有深入對比彼此的區(qū)別。當然也沒有去了解這些屬性背后的 CSS 發(fā)展歷程，于是很多時候都會被弄暈。
但這次通過將屬性之間進行對比，再深入了解了一下 CSS 的發(fā)展歷程，對 CSS 布局的知識有了整體的了解。知道過去用的是什么方式布局，現(xiàn)在及未來要用什么方式布局，對 CSS 布局就更有底了。
對于 CSS 布局來說，float 方式的布局慢慢會被淘汰，因此不必花大力氣去學習，只在有需要的時候?qū)W習一下就好。我們的學習重點應該放在 flex、grid 等布局方式的學習，這也是我后續(xù)的學習方向。
關于 CSS 布局知識的分享就到此為止。希望這篇文章也能給你帶來收獲，讓你更好掌握 CSS 布局技能。如果這篇文章對你有幫助，記得一鍵三連支持我！
本文鏈接：http://www.tebozhan.com/showinfo-26-10418-0.html一文帶你弄懂 CSS 布局知識
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號