【CSS基礎】CSS常見問題

垂直居中

單行文本垂直居中

父元素高度爲auto

一個父元素若是不設置高度的話，默認就是緊包裹着子元素，若是父元素設置的pading-top和padding-bottom相同，這自己就是一個垂直居中效果，可是當子元素並非獨佔一行，而是inline元素和inline-block元素組合成一行，好比下面這個例子：

inline元素和inline-block元素在同一行顯示，因爲圖片這個inline-block元素自己有高度，就會把整個行撐開，可是文字和圖片依然在一行，細看能夠發現，圖片自己並無和文字最下邊對齊，這是因爲inline-block默認帶有vertical-align屬性，其值默認爲baseline，也就是圖片和文字的baseline對齊，注意vetical-align只對inline-block元素有效，這種狀況下，只須要對inline-block元素設置vertical-align:middle便可實現垂直居中。效果以下：

父元素height爲固定值

這種狀況只須要在父元素上設置line-height屬性等於父元素的height屬性便可(line-height = height)，這種只適用於單行文本，且父元素高度固定，對於多行文本就無能爲力了。

父元素height固定，子元素是塊元素

子元素高度固定

這種狀況下能夠利用absolute定位來實現垂直居中。缺點就是脫離了普通文檔流。

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    height:200px;
    margin-top:-100px;
}
// 或者下面的實現方法
.child {
    position:absolute;
    top:0;
    bottom:0;
    height:200px;
    margin:auto 0;
}

子元素height不固定

該狀況下對子元素是塊級元素或非塊級元素都可以。

.parent {
    display:table-ceil;
    height:200px;
    vetical-align:middle;
}

該方法因爲display:table-ceil屬性的兼容性不夠好，只能在IE8及更高版本使用。

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

該方法因爲transform:translateY(-50%)屬性的兼容性不夠好，只能在IE9及更高版本使用。

flex

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

flex彈性佈局更加的靈活簡單，對頁面中其餘元素的影響更小，在IE11以及更高版本才能兼容，若是是在移動端開發，儘可能使用該屬性實現各類複雜的佈局。

常見的佈局

兩列布局

兩欄佈局：一欄定寬，一欄自適應，自適應的一欄做爲內容主體。

1：使用float + margin屬性。

.left {
    width:200px;
    float:left;
}
.right {
    margin-left:200px;
}

也可使用absolute定位來實現。

.container {
    position:relative;
}
.left {
    position:absoulte;
    left:0;
    width:200px;
}
.right {
    position:absolute;
    left:200px;
    right:0;
}

三列布局

三列布局也是常常使用到的一種佈局，它的特色是兩邊兩列固定，中間自適應。
1：左右兩欄使用float屬性，中間欄使用margin屬性。

<div class="left">左欄</div>
<div class="right">右欄</div>
<div class="middle">中間欄</div>

.left,.right {
    float:left;
    width:200px;
}
.right {
    float:right;
}
.middle {
    margin:0 200px;
}

該方法必需要將中間欄放在最後，且若是父元素的寬度小於左右兩欄寬度時，右側欄會被擠下去。
2：使用position佈局

.container {
    position:relative;
}
.left,.right {
    width:200px;
    left:0;
}
.right {
    left:auto;
    right:0
}
.middle {
    margin:0 200px;
}

該方法的缺點是若是父元素有內外邊距的時候，會致使中間欄的位置出現誤差。