簡述傳統盒子模型與FlexBox彈性盒子模型
阿新 • • 發佈:2018-12-31
前端開發人員在開發頁面的時候,必定會涉及到一面佈局。好像現在的頁面佈局方法大致有兩種,一種是傳統的盒子模型(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彈性盒子模型比傳統盒子模型更為精巧一些。