對於剛學習web前端的同學，布局和排版都是乙個難點。雖然我們能夠通過各種除錯實現我們希望得到的頁面效果，但是如果不把其中的道理弄清楚的話，在下次布局的時候，也無法對整體頁面有乙個比較全面的掌控。只要弄清楚其中的道理，實現頁面的良好布局並不是一件特別難的事情。下面，我就談談我學習布局的經驗~初來乍到，多多指教~！
要學會web布局，首先要理解「流」的概念和工作原理。「流」，形象一點說，就像水流一樣，瀏覽器從html檔案的開頭，把元素流入頁面中，塊級元素獨佔一行，內嵌元素共享一行，按html檔案中的順序乙個接乙個的把它們「流」到頁面上，直到將最後乙個元素放到頁面上，這就是我們常說的「正常文件流」。這是瀏覽器預設的元素放置方式。這些元素按照它們的規則和順序被放置在同一層中。
很簡單，塊級元素在文件流中前後都有換行，故獨佔一行。而內嵌元素呢？內嵌元素會在水平方向上乙個接乙個地流，從左到右直到沒有足夠的空間，就流到下一行。
在我們的布局工具中，有乙個叫「float」屬性，意思是「浮動」。「float」屬性有兩個值：「left」、「right」。簡單來說，「float」屬性就是讓乙個元素
盡可能的靠左或靠右。既然叫做「浮動」，那麼它當然是漂浮在正常文字流之上的。因此，它脫離了正常文字流，然後再文字流之上，盡可能的浮動到左（右）邊。那麼，原先頁面中的元素會如何放置呢？
就像湖裡的水流一樣，你從中舀走一碗，旁邊的水流就會填充過來，湖面還是如鏡面一般平坦。當文字流中的乙個元素被「float」漂浮起來時，跟在它後面的元素就會填充它原本的位置。
對於正常文件流中的元素，被「float」的元素就像不存在一樣。你甚至會發現，浮動元素遮住了下面正常文字流中的塊元素。注意！正常文字流中的內嵌元素可不同，當內嵌元素遇到浮動元素時，它們會包圍在浮動元素邊界的周圍（最初「float」就是用於實現文字環繞的效果的）。
「float」屬性浮動的位置跟你的html檔案中新增了「float」屬性的元素的位置順序有關，浮動元素只會跟在它的上乙個元素（html檔案中，浮動元素的上乙個元素）後面進行浮動。
web頁面布局總結
幾乎完全參考 掘金 web網頁布局的主要方式 即傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫 時的布局來顯示。常規的pc的 都是靜態 定寬度 布局的，也就是設定了min width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個...
web前端布局之flex布局
總的來說，flex布局的原理通過給父元素新增flex屬性，來控制子元素的位置和排列方式。採用flex布局的元素稱為flex容器。flex容器中存在兩條軸，分別為主軸和側軸，容器中的每個單元稱為flex專案。在容器上可以設定6個屬性 分別為 flex direction flex wrap flex ...
Web開發之Layout布局
布局種類 頁面布局的幾種方式 靜態化布局 流式布局 自適應布局 響應式布局 彈性布局 使用建議 1.如果只做pc端，那麼靜態布局 定寬度 是最好的選擇 2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局 rem js 是最好的選擇，乙份css 乙份js調節font size搞定 3.如果...