在開始之前，我們有必要簡單了解一下 css 中那些容易導(dǎo)致 bug 的屬性：

1. "width:100%;" , 如果有 margin / padding 存在，內(nèi)容常常會超過界面；
2. 設(shè)置固定 height, 缺點就是當(dāng)內(nèi)容太多的時候，顯示不完全；
3. "display:inline-block;" , 會經(jīng)常出現(xiàn)一些間隔問題，所以每當(dāng)用到這個的時候我們都會響應(yīng)的加上："vertical-align:top";

進入正題

一、水平布局

水平布局中，我們最常用到的屬性是 float，效果是讓 element 脫離文檔流。

1.left & right

一般我們讓兩個元素水平左右布局的話，可以設(shè)置一個元素 float: left; 另一個 float: right;

2.百分比

我們也可以考慮相同方向上的 float，然后設(shè)置 element 的寬為百分比，只要保證水平上的 elements width 之和不大于一就可以實現(xiàn)水平布局。
這種方式在多個元素水平布局上就更適合。

3.position

在父級元素設(shè)置 postion: relative;，然后分別設(shè)置子元素：

.left {
    position: absolute;
    left: 0;
    top: 0;
}
.right {
    postion: absolute;
    right: 0;
    top: 0;
}

注意

1）默認(rèn)情況下，我們設(shè)置的 width 只是針對 element 的 content 部分，也就是說，當(dāng)有 padding / margin 存在的時候，element 的實際占用寬度會大于設(shè)定值，這會導(dǎo)致 element 無法擠到一起水平布局，解決的方法就是：
設(shè)置 box-sizing: border-box，或者把 padding / margin 設(shè)為 0；

2）因為 float 會讓元素脫離文檔流，就會出現(xiàn)子元素跑到父元素外部的結(jié)果：

float1

解決的方法：利用 clear 屬性（可以理解為克制 float 屬性）給父元素加上有 clear 屬性的空白內(nèi)容；

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

clearfix

3）還有一個比較麻煩的問題，如圖：

對齊1

本來我們想要的是整齊的 float，但是因為左邊元素的字體比右邊的大，整個元素的方框就比右邊大一點點，導(dǎo)致下一列的元素卡在了奇怪的位置 ……

解決的辦法就是給每個元素設(shè)定一樣的 height 或 line-height;

但是，這又會導(dǎo)致另一個問題，我們前面說了設(shè)置固定高度容易導(dǎo)致 bug 就提現(xiàn)在這里，如果我們的內(nèi)容比較多，就可能會出現(xiàn)顯示問題。

固定 height

當(dāng)然，我們也可以考慮給每一行的元素套上一個 div 作為一個整體，再加上一個上面提到的 .clearfix class.

其實還有更好的解決方法，用上 flexbox ，這個以后在討論。

二、居中

1.水平居中

1）block elements

對于 block 元素自身，設(shè)置左右兩邊 margin 為 auto margin-left: auto; margin-right: auto 可以在父元素內(nèi)水平居中；

2）inline elements
a. 在父級元素中設(shè)置 text-align: center; 可以讓內(nèi)部的 inline 元素水平居中；
b. 內(nèi)聯(lián)元素設(shè)置左右 padding 為相同值，可以讓內(nèi)部內(nèi)容居中；
內(nèi)聯(lián)元素這種的居中也有它的優(yōu)點：可以自動隨著內(nèi)容長度的變化而變化

2.垂直居中

1）設(shè)置相同的上下 padding；
2）設(shè)置 line-height 等于 父元素的 height；

這兩種方式的缺點非常明顯，父元素里面無法同時存在其它內(nèi)容。更為高級的用法在下面；

3.水平、垂直居中

利用，position 和 transform (translate);

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

對于 block 和 inline 元素都有效！愛怎么調(diào)就怎么調(diào)

4.背景居中

用這個：

background-position: center center;

如果還需要背景的自動放縮：

background-size: cover;