前端經常使用佈局

時間 2019-11-16

標籤前端經常使用佈局简体版

原文原文鏈接

一、水平居中

方法一：margin:0 auto；

是最多見的水平居中解決方案，但有其侷限性：塊級元素，已知寬度，父級元素有寬度html

方法二：text-align + inline-block

在父級元素上設置text-align：center;將須要居中的元素設置爲inline-block（或inline）ide

方法三：position絕對定位

對於須要居中的元素：佈局

position:absolute;(同時設置父級元素relative) 
left:50%;(包括了元素自己的寬度)
transform:translateX(-50%);

侷限性：CSS3屬性兼容性很差flex

方法四：flex彈性佈局之justify-content

做用於父級元素code

#parent{
  display:flex;
  justify-content:center;`
}

二、垂直居中

方法一：height +line-height

對於一個須要居中的 行內（塊）元素 ，設置父元素的高度與行高相等，便可實現垂直居中orm

方法二：table-cell + vertical-align

.parent{
  display:table-cell;
  vertical-align:middle
}

方法三：absolute+transform

相似於水平居中htm

方法四：flex+align-items

相似於水平居中blog

.parent{
  display:flex;
  align-items:center;
}

三、左邊固定右邊自適應

HTML
<div class="left"></div>
<div class="right"></div>

CSS
.left{
    float:left;
    width: 200px;
    height:400px;
    background-color: blue;
}

.right{
    height:400px;
    background-color: red;
        margin-left:210px;
}

四、右邊固定左邊自適應

方法與狀況三相似，但有一點須要注意：不管是哪一種狀況，再html結構中，都要把浮動塊寫在前面，不然浮動塊會被擠到下一行。文檔

HTML
<div class="right"></div>
<div class="left"></div>

CSS
.left{
    height:400px;
    background-color: red;
        margin-right:210px;
}

.right{
    float:right;
    width: 200px;
    height:400px;
    background-color: blue;
}

五、兩邊固定中間自適應

相似於兩欄佈局，一樣是浮動欄先渲染：it

HTML:
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
CSS:
.left{
    float:left;
    width: 200px;
    height:400px;
    background-color: red;
}

.right{
    float:right;
    width:200px;
    height:400px;
    background-color: blue;
}
.middle{
    height: 400px;
    background-color: yellow;
    margin:0 210px 0 210px;
}

但在實際狀況下，中間欄纔是主要內容，須要優先渲染，也就是說，DOM結構中，中間欄須要寫在最前面，可是上文中提到過，浮動塊必須寫在最前面；解決方案是：三欄全浮動。
有如下兩種經典的佈局方式，它們的共同點是：固比固佈局，中間欄放到文檔流前面，保證先行渲染。
實現方式是：三欄所有float:left浮動。
區別在於解決中間欄div的內容不被遮擋上：聖盃佈局是在父級添加左右padding，將三欄所有擠到中間，而後在兩側邊欄添加相對定位，配合left和right屬性，將它們挪向兩邊，爲中間內容騰出位置；而雙飛翼佈局是在中間欄的div中嵌套一個div，內容寫在嵌套的div裏，對嵌套的div設置margin-left和margin-right。

5.1 聖盃佈局

HTML:
<div class="container">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
CSS:
.container{
    overflow:hidden;
    padding:0 200px;
}
.middle{
    width:100%;
    height:400px;
    float:left;
    background-color: yellow;
}
.left{
    width:200px;
    height:400px;
    float:left;
    background-color: blue;
    margin-left:-100%;（擠上去）
    position:relative;
    left:-200px;
}
.right{
    width:200px;
    height:400px;
    float:left;
    background-color: darkseagreen;
    margin-left:-200px;（擠上去）
    position:relative;
    right:-200px;
}
/*
解決遮擋的代碼是：
.container中 padding:0 200px;
.left中 position:relative;left:-200px;
.right中 position:relative;right:-200px;
*/

5.2 雙飛翼佈局

HTML:
<div class="container">
    <div class="middle">
                 <div id="inside">middle</div>
        </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
CSS:
.container{
    overflow:hidden;
}
.middle{
    width:100%;
    height:400px;
    float:left;
    background-color: yellow;
}
.left{
    width:200px;
    height:400px;
    float:left;
    background-color: blue;
    margin-left:-100%;（擠上去）
}
.right{
    width:200px;
    height:400px;
    float:left;
    background-color: darkseagreen;
    margin-left:-200px;（擠上去）
}
/*解決遮擋*/
#inside{
    margin:0 210px;
    height:400px;
    background-color:red;
}

如圖：