【CSS基礎(chǔ)】CSS常見問題

villainhr 發(fā)布于2019-08-30 14:06 / 3366人閱讀

摘要：常見的布局兩列布局兩欄布局一欄定寬，一欄自適應(yīng)，自適應(yīng)的一欄作為內(nèi)容主體。三列布局三列布局也是經(jīng)常使用到的一種布局，它的特點(diǎn)是兩邊兩列固定，中間自適應(yīng)。左右兩欄使用屬性，中間欄使用屬性。

垂直居中 單行文本垂直居中 父元素高度為auto

一個(gè)父元素如果不設(shè)置高度的話，默認(rèn)就是緊包裹著子元素，如果父元素設(shè)置的pading-top和padding-bottom相同，這本身就是一個(gè)垂直居中效果，但是當(dāng)子元素并不是獨(dú)占一行，而是inline元素和inline-block元素組合成一行，比如下面這個(gè)例子：

inline元素和inline-block元素在同一行顯示，由于圖片這個(gè)inline-block元素本身有高度，就會(huì)把整個(gè)行撐開，但是文字和圖片依然在一行，細(xì)看可以發(fā)現(xiàn)，圖片本身并沒有和文字最下邊對齊，這是由于inline-block默認(rèn)帶有vertical-align屬性，其值默認(rèn)為baseline，也就是圖片和文字的baseline對齊，注意vetical-align只對inline-block元素有效，這種情況下，只需要對inline-block元素設(shè)置vertical-align:middle即可實(shí)現(xiàn)垂直居中。效果如下：

父元素height為固定值

這種情況只需要在父元素上設(shè)置line-height屬性等于父元素的height屬性即可(line-height = height)，這種只適用于單行文本，且父元素高度固定，對于多行文本就無能為力了。

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

這種情況下可以利用absolute定位來實(shí)現(xiàn)垂直居中。缺點(diǎn)就是脫離了普通文檔流。

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    height:200px;
    margin-top:-100px;
}
// 或者下面的實(shí)現(xiàn)方法
.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以及更高版本才能兼容，如果是在移動(dòng)端開發(fā)，盡量使用該屬性實(shí)現(xiàn)各種復(fù)雜的布局。

常見的布局 兩列布局

兩欄布局：一欄定寬，一欄自適應(yīng)，自適應(yīng)的一欄作為內(nèi)容主體。

1：使用float + margin屬性。

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

也可以使用absolute定位來實(shí)現(xiàn)。

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

三列布局

三列布局也是經(jīng)常使用到的一種布局，它的特點(diǎn)是兩邊兩列固定，中間自適應(yīng)。
1：左右兩欄使用float屬性，中間欄使用margin屬性。

左欄
右欄
中間欄

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

該方法必須要將中間欄放在最后，且如果父元素的寬度小于左右兩欄寬度時(shí)，右側(cè)欄會(huì)被擠下去。
2：使用position布局

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

該方法的缺點(diǎn)是如果父元素有內(nèi)外邊距的時(shí)候，會(huì)導(dǎo)致中間欄的位置出現(xiàn)偏差。