在開始之前却音，我們有必要簡單了解一下 css 中那些容易導(dǎo)致 bug 的屬性：
- "width:100%;" , 如果有 margin / padding 存在个盆，內(nèi)容常常會(huì)超過界面；
- 設(shè)置固定 height, 缺點(diǎn)就是當(dāng)內(nèi)容太多的時(shí)候抄瓦，顯示不完全死宣；
- "display:inline-block;" , 會(huì)經(jīng)常出現(xiàn)一些間隔問題，所以每當(dāng)用到這個(gè)的時(shí)候我們都會(huì)響應(yīng)的加上："vertical-align:top";
進(jìn)入正題
一冤寿、水平布局
水平布局中，我們最常用到的屬性是 float青伤，效果是讓 element 脫離文檔流督怜。
1.left & right
一般我們讓兩個(gè)元素水平左右布局的話，可以設(shè)置一個(gè)元素 float: left; 另一個(gè) float: right;
2.百分比
我們也可以考慮相同方向上的 float狠角，然后設(shè)置 element 的寬為百分比号杠，只要保證水平上的 elements width 之和不大于一就可以實(shí)現(xiàn)水平布局。
這種方式在多個(gè)元素水平布局上就更適合擎厢。
3.position
在父級(jí)元素設(shè)置 postion: relative;究流，然后分別設(shè)置子元素：
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
postion: absolute;
right: 0;
top: 0;
}
注意
1）默認(rèn)情況下辣吃，我們?cè)O(shè)置的 width 只是針對(duì) element 的 content 部分动遭，也就是說，當(dāng)有 padding / margin 存在的時(shí)候神得，element 的實(shí)際占用寬度會(huì)大于設(shè)定值厘惦，這會(huì)導(dǎo)致 element 無法擠到一起水平布局，解決的方法就是：
設(shè)置 box-sizing: border-box，或者把 padding / margin 設(shè)為 0宵蕉；
2）因?yàn)?float 會(huì)讓元素脫離文檔流酝静，就會(huì)出現(xiàn)子元素跑到父元素外部的結(jié)果：
解決的方法：利用 clear 屬性（可以理解為克制 float 屬性）給父元素加上有 clear 屬性的空白內(nèi)容；
.clearfix::after {
content: "";
display: block;
clear: both;
}
3）還有一個(gè)比較麻煩的問題羡玛，如圖：
本來我們想要的是整齊的 float别智，但是因?yàn)樽筮呍氐淖煮w比右邊的大，整個(gè)元素的方框就比右邊大一點(diǎn)點(diǎn)稼稿，導(dǎo)致下一列的元素卡在了奇怪的位置 ……
解決的辦法就是給每個(gè)元素設(shè)定一樣的 height 或 line-height;
但是薄榛，這又會(huì)導(dǎo)致另一個(gè)問題，我們前面說了設(shè)置固定高度容易導(dǎo)致 bug 就提現(xiàn)在這里让歼，如果我們的內(nèi)容比較多敞恋，就可能會(huì)出現(xiàn)顯示問題。
當(dāng)然谋右，我們也可以考慮給每一行的元素套上一個(gè) div 作為一個(gè)整體硬猫，再加上一個(gè)上面提到的 .clearfix class.
其實(shí)還有更好的解決方法，用上 flexbox 改执，這個(gè)以后在討論啸蜜。
二、居中
1.水平居中
1）block elements
對(duì)于 block 元素自身辈挂，設(shè)置左右兩邊 margin 為 auto margin-left: auto; margin-right: auto 可以在父元素內(nèi)水平居中盔性；
2）inline elements
a. 在父級(jí)元素中設(shè)置 text-align: center; 可以讓內(nèi)部的 inline 元素水平居中；
b. 內(nèi)聯(lián)元素設(shè)置左右 padding 為相同值呢岗，可以讓內(nèi)部內(nèi)容居中冕香；
內(nèi)聯(lián)元素這種的居中也有它的優(yōu)點(diǎn)：可以自動(dòng)隨著內(nèi)容長度的變化而變化
2.垂直居中
1）設(shè)置相同的上下 padding；
2）設(shè)置 line-height 等于 父元素的 height后豫；
這兩種方式的缺點(diǎn)非常明顯悉尾，父元素里面無法同時(shí)存在其它內(nèi)容。更為高級(jí)的用法在下面挫酿；
3.水平构眯、垂直居中
利用，position 和 transform (translate);
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
對(duì)于 block 和 inline 元素都有效早龟！愛怎么調(diào)就怎么調(diào)
4.背景居中
用這個(gè)：
background-position: center center;
如果還需要背景的自動(dòng)放縮：
background-size: cover;
（待補(bǔ)充……）
