前端開發人員在開發頁面的時候,必定會涉及到一面佈局。好像現在的頁面佈局方法大致有兩種,一種是傳統的盒子模型(margin、border、padding、content);另外一種是比較新興的技術FlexBox彈性盒子模型。

▍傳統盒子模型

傳統盒子模型就是由外邊距(margin)、邊框(border)、內邊距(padding)以及內容(content)組成。示意圖如下:

利用這種盒子模型能完成大部分的頁面佈局,但是對於一些特殊的頁面佈局,這種傳統的盒子模型實現起來非常的不方便,比如垂直居中等等。

▍FlexBox彈性盒子模型

Flex佈局,可以簡便、完整、響應式地實現各種頁面佈局。

具體flex使用方法可參考這兩個教程:菜鳥教程冰川的部落格

【注意】設為Flex佈局以後,子元素的float、clear和vertical-align屬性將失效。

▍示例:將DIV三等分

一般使用的方法不外乎4種:百分比(浮動(float)+百分比、行內元素(inline-block)+百分比)、display:table+display:table-cell、flex佈局、bootstrap柵格系統。這裡簡述使用百分比和flex佈局兩種方法:

HTML如下:

<div class="father">
    <div class="child child-first"></div>
    <div class="child child-second"></div>
    <div class="child child-third"></div>
</div>

1、百分比

.father{
    width: 400px;
    height: 150px;
    background-color: black;
}

.child{
    float: left;
    width: 33.3%;
    height: 150px;
}

.child-first{
    background-color: red;
}

.child-second{
    background-color: blue;
}

.child-third{
    background-color: yellow;
}

效果如下

粗看好像是達到效果了,但是一旦將頁面放大就露出馬腳了,在最右側暴露出了一個黑色塊

33.3%*3=99.9%,並沒有完全真正的佔滿整個父元素,這可能造成一些不必要的隱患。

2、flex佈局

.father{
    display: flex;
    width: 400px;
    height: 150px;
    background-color: black;
}

.child{
    flex: 1;
    height: 150px;
}

.child-first{
    background-color: red;
}

.child-second{
    background-color: blue;
}

.child-third{
    background-color: yellow;
}

無論放大還是縮小,底部的黑色塊都完全被遮蓋住了。

▍結語

FlexBox彈性盒子模型比傳統盒子模型更為精巧一些。