頁面布局進化史

布局是前端開發最基礎作重要的技能，兩列，三列布局是**頁面中應用最多的一種布局樣式基本上是：左右結構左邊是分類右邊是內容，左中右結構，主要內容在中間，兩邊放次要內容。在css剛剛興起的時候頁面的布局都是用的**來實現的，隨著css發展，各種浮動，定位布局開始流行，特別是css3的出現使得我們在實現一些複雜的頁面布局變的簡單，flex，grid，

記得我剛從事網際網路工作的時候先接觸的就是table**布局頁面，當時css並沒有那麼的普及（也或是是我不太了解）哪個時候還是用的asp，access開發**。當時做乙個頁面，要實現乙個效果都是**巢狀**，乙個背景圖為了實現自適應需要把它分成三份分別放到不同的單元格當中，當時如果要做好乙個比較複雜的頁面需要寫上好幾百個**單元格才能實現。

width
="100%"
border
="0"
cellpadding
="0"
cellspacing
="0"
>
>
width
="20%"
>
左td>
width
="auto"
>
右td>
tr>
table
>

上邊**是通過**實現的左右兩列布局結構，**布局優點：寬度自適應，高度左右列能做到一樣高；缺點：html**多，寫起來比較複雜，結構和表現都寫在一起在頁面結構複雜情況下不利於**維護。

css的出現使得頁面結構和樣式完全分離開，頁面的內容由html結構來完成，內容的展示樣式就交給了css來實現。同時樣式可以單獨寫在乙個檔案裡html中只需要通過link引入樣式檔案即可，使維護變得簡單。

是通過給元素設定左右浮動實現

class
="box"
>
class
="left"
>
左div
>
class
="right"
>
右div
>
div>
type
="text/css"
>
.left
.right
.box
style
>

從上邊**可以看出，html**比**布局少了很多，但是靈活性更強了，所有的樣式表現都有css來完成，我們可以在不改變html結構的情況下輕鬆讓左右結構互換位置。只需要改變浮動方向即可。但是簡單的同時又出現了新的問題，那就是元素浮動的時候已經脫離了文件流使得box元素不能按照內容高度自適應，高度變成了0畫素。這個時候我們就需要給他設定其他**來解決此問題。這就是所謂的浮動後父元素高度塌陷。

是通過給元素設定相對定位和絕對定位來實現

class
="box"
>
class
="left"
>
左div
>
class
="right"
>
右div
>
div>
type
="text/css"
>
.box
.left
.right
style
>

定位布局也會造成父容器高度塌陷的情況，一般情況定位屬性設定在乙個元素上左邊或者右邊，然後讓另乙個預設撐開父元素

通過inline-block可以設定寬度高度的特性，並且可以設定按照父級百分百寬度實現布局

class
="box"
>
class
="left"
>
左div
>
class
="right"
>
右div
>
div>
type
="text/css"
>
.box
.left
.right
style
>

flex布局又稱為彈性盒模型布局，也就是說它可以自適應寬高，並且能夠輕鬆的實現以前無法實現或者需要很複雜才能實現的效果。flex布局寫法更加簡單

class
="box"
>
class
="left"
>
左div
>
class
="right"
>
右div
>
div>
type
="text/css"
>
.box
.left
.right
style
>

上面的簡單**就實現了乙個兩列布局，左邊寬度300畫素，右邊自適應寬度，並且兩邊的高度永遠是等高的。我們看到使用flex方法能讓我們在寫**上變得少了很多。

grid布局又稱為網格布局，它是繼flex布局後又一種很靈活的布局模式，flex布局只是一維的布局系統，而grid是乙個二維的布局系統，它有行和列的概念，並且更靈活。

class
="box"
>
class
="left"
>
左div
>
class
="right"
>
右div
>
div>
type
="text/css"
>
.box
style
>

從上面**可以看到，grid布局在css**上更加簡單，只需要給父級設定屬性就能輕鬆實現上面的兩列布局

在現在的瀏覽器都能夠很好的支援flex和grid布局，我們在開發中可以放心大膽的使用更加簡單的布局方式

頁面布局進化史

for 迴圈進化史

C 進化史屬性

發布流程進化史

頁面布局進化史

for 迴圈進化史

C 進化史 屬性

發布流程進化史

相關推薦

C 進化史屬性