======= SEO專用
- table-cell
- 定高水平垂直居中
- 不定高水平垂直居中
- 單行定高水平垂直居中
- 單行不定高水平垂直居中
- 多行定高水平垂直居中
- 多行不定高水平垂直居中
- 多列等高布局
- 左邊定寬右邊自適應(yīng)布局
- 左邊右邊定寬中間自適應(yīng)三列布局
=======
最近開發(fā)遇到一些布局上的問題，由于不確定因素比較多，比如不定寬高毅人、單行多行的情況需要顯示的樣式基本相同润绵。這樣的情況會(huì)比較復(fù)雜茎刚，后來找到display:table-cell這個(gè)布局神器蚁袭，這些問題也就不是問題了。比如以下這種情況：
基于這樣的需求枝秤，我們通常都是每一種情況需要單獨(dú)的寫一份hack樣式嗽交，這樣寫起來很麻煩卿嘲。我們多么希望寫一份樣式，不管你里面的節(jié)點(diǎn)如何變夫壁，定不定寬高拾枣，多行與否都能表現(xiàn)一致。針對(duì)水平|垂直居中的情況盒让，我找到了table-cell布局的方式梅肤，基本能解決。下面會(huì)總結(jié)一下table-cell的布局原理以及列舉一些日常布局所遇到的情況邑茄。
1姨蝴、table的一些特性與表現(xiàn)形式
雖然table布局因?yàn)樗囊恍┓钦Z義化、布局代碼冗余撩扒，以及不好維護(hù)改版等缺點(diǎn)被趕出了布局界似扔。但是在css不給力時(shí)期，table布局也曾風(fēng)靡一時(shí)搓谆，就算現(xiàn)在看來table的一些布局的特性也是非常給力的，而幸好css也吸取了table布局一些好的特性為己用豪墅。讓我們可以使用更少泉手、更語義化的標(biāo)簽來模擬table布局，可以跳過table布局的缺點(diǎn)又實(shí)現(xiàn)我們想要的效果偶器，所以我們首先需要了解table的一些特性以及對(duì)應(yīng)的css屬性斩萌。
我們?cè)诓痪又惺褂玫降囊簿褪莟able、tr屏轰、td的一些特性颊郎，所以我們只需要了解這三個(gè)標(biāo)簽的特性就足夠了。
- table標(biāo)簽（display:table）
- table可設(shè)置寬高霎苗、margin姆吭、border、padding等屬性唁盏。屬性值的單位可以使用px内狸，百分比值检眯。
- table的寬度默認(rèn)由內(nèi)容的寬高撐開，如果table設(shè)置了寬度昆淡，寬度默認(rèn)被它里面的td平均分锰瘸，如果給某一個(gè)td設(shè)置寬度，那么table剩余的寬度會(huì)被其他的td平均分（有點(diǎn)類似flex布局）
- 給table設(shè)置的高度起到的作用只是min-height的作用昂灵，當(dāng)內(nèi)容的高度高于設(shè)置的高度時(shí)避凝，table的高度會(huì)被撐高。
- tr標(biāo)簽（display:table-row）
- 給tr設(shè)置高度只起到min-height的作用眨补，默認(rèn)會(huì)平分table的高度管削。
- tr中的td默認(rèn)高度會(huì)繼承tr的高度，若給任一td設(shè)置了高度渤涌，其他td的高度也同樣變高佩谣。適合多列等高布局
- 設(shè)置寬度、margin实蓬、都不起作用
- td標(biāo)簽（display:table-cell）
- td默認(rèn)繼承table的高度茸俭，且平分table的寬度
- 若table（display:table）不存在，給td設(shè)置的寬高不能用百分比只能用準(zhǔn)確的數(shù)值
- 給td設(shè)置vertical-align: middle; td元素里面(除float安皱、position:absolute)所有的塊級(jí)调鬓、非塊級(jí)元素都會(huì)相對(duì)于td垂直居中
- 給td設(shè)置text-align: center; td元素里面所有非block元素(除float、position:absolute)都會(huì)相對(duì)于td水平居中酌伊，雖然block元素不居中腾窝，但其中的文字或inline元素會(huì)水平居中
了解了table的一些屬性，當(dāng)我們遇到一些水平垂直居中的布局時(shí)居砖，就會(huì)變得so easy了虹脯。
2、圖片定高|不定高水平垂直居中
圖片本身就是inline-block元素奏候，那么我們只要給它的父級(jí)元素加個(gè)display:table-cell就好了
.box{
height: 200px;
width: 200px;
display: table-cell;
text-align: center;
border: 1px solid #ccc;
vertical-align: middle;
}
<div class="box">
</div>
就是那么簡單循集。demo
3、多行定高|不定高|定寬|不定寬水平垂直居中
我們平時(shí)常見的就是單行水平垂直居中蔗草，其實(shí)就是簡單的text-align：center; 然后再是line-height:xx 就搞定了咒彤。但是多行的就相對(duì)于復(fù)雜點(diǎn)。但是使用了table-cell之后咒精，就變得很簡單了
當(dāng)然镶柱，里面也可以是多個(gè)標(biāo)簽形成的多行，然后進(jìn)行水平垂直居中
demo1 demo2
其實(shí)實(shí)現(xiàn)的原理還是使用table-cell模叙，先把外層box設(shè)置為table-cell歇拆，再把里面的元素設(shè)置為inline|inline-block(不定寬高|元素居中)或者block(寬度100%|文字居中)那么就可以控制里面的元素水平垂直居中了。基于這樣的布局方式查吊，你就可以把什么定高|不定高|定寬|不定寬|多行|單行的水平垂直居中都搞定了谐区。
4、左右浮動(dòng)元素垂直居中
由于display:table-cell對(duì)浮動(dòng)元素是不起作用的逻卖，當(dāng)我們需要兩個(gè)元素一個(gè)左浮動(dòng)一個(gè)右浮動(dòng)宋列，并且這連個(gè)元素還居中的時(shí)候。上面的方法就不起作用了评也。那我們可以換個(gè)法子炼杖，既然display:table-cell;的垂直居中不能直接對(duì)浮動(dòng)元素起作用，那就來個(gè)間接的嘛盗迟。給兩個(gè)浮動(dòng)的元素外面一個(gè)display:inline-block;的元素坤邪，并且清除浮動(dòng)。然后讓display:table-cell的垂直居中對(duì)inline-block元素起作用就好了罚缕。demo
如果你的需求還需要在兩個(gè)浮動(dòng)的元素中再添加水平垂直居中的話艇纺，那么同樣的道理，只需要在這兩個(gè)元素中構(gòu)造符合table-cell布局的結(jié)構(gòu)就好了邮弹。
5黔衡、一行多列水平垂直居中
經(jīng)常會(huì)有這樣的需求，一列里面可能會(huì)有1腌乡、2盟劫、3個(gè)子元素，不管幾個(gè)都是要居中的与纽。有了table-cell就可以輕松解決了侣签。
實(shí)現(xiàn)原理也基本是把外層box設(shè)置為display:table-cell;然后設(shè)置居中。里面的元素item設(shè)置成inline或者line-block;就可以了急迂，不管里面的item的個(gè)數(shù)多少影所，都會(huì)居中的，包括item是圖片也會(huì)這樣僚碎。demo
6型檀、多列等高布局
有這樣的需求，一行有三個(gè)item听盖，三個(gè)item的高度不定，但是這一行的三個(gè)item最終的高度以最高的那個(gè)為準(zhǔn)裂七。按照以前的做法要不就是砍掉需求皆看，必須定高。實(shí)在不行就是等加載完之后用js計(jì)算三個(gè)item的高度背零，然后把最高的高度給其他item設(shè)置高度腰吟。這樣有點(diǎn)惡心，并且會(huì)出現(xiàn)抖動(dòng)。有了table-cell之后毛雇，這個(gè)就不成問題了嫉称，因?yàn)樵谝粋€(gè)tr中，里面的td必須是等高的灵疮，而不管里面內(nèi)容的高度织阅。demo
認(rèn)證看代碼你會(huì)發(fā)現(xiàn)跟我們平時(shí)的定高布局布局不一樣，每行外面必須得有一個(gè)ul來保證里面item的等高震捣，并且里面還需要使用多余的li來控制間距荔棉。這樣做的原因是因?yàn)閠r里面的元素不會(huì)自動(dòng)換行，所以必須手動(dòng)換行蒿赢，給外面加個(gè)ul润樱，（說好的tr呢？）是這樣的羡棵，被設(shè)置為display:table-cell的元素會(huì)跟相鄰的兄弟元素共同生成一個(gè)虛擬的table壹若、tr把自己包起來，誰叫td只能包在table里面呢皂冰。但是你直接寫td標(biāo)簽是不會(huì)產(chǎn)生這樣的效果的店展。而使用多余的li來控制間距是因?yàn)閠able-cell元素不認(rèn)識(shí)margin，所以只能這樣做了灼擂。
在生成機(jī)構(gòu)的時(shí)候就需要判斷什么時(shí)候該換行了壁查，而不是像以前一樣在一個(gè)ul里面生成全部的li了
7、左邊定寬右邊自適應(yīng)
8剔应、左邊右邊定寬中間自適應(yīng)三列布局
總結(jié):
使用table-cell還可以實(shí)現(xiàn)很多的布局睡腿，需要自己去發(fā)揮想象【總結(jié)下來也就需要記住幾點(diǎn)席怪，設(shè)置了display:table-cell的元素具有以下特性。
- text-align纤控、vertical-align等對(duì)齊屬性起作用挂捻，margin不起作用。寬高百分比值不起作用船万。
- 會(huì)生成虛擬的table刻撒、tr把自己包裹住，如果有相鄰的兄弟元素也被設(shè)置了table-cell,則會(huì)跟兄弟元素一起生成虛擬的table耿导、tr把自己包裹住声怔，并一行等高顯示
- 多個(gè)table-cell元素會(huì)占滿被設(shè)置了display: table的元素的寬度，如果一個(gè)元素被設(shè)置了寬度舱呻，那么其他剩余的table-cell元素會(huì)占滿剩下的寬度醋火。當(dāng)然，如果只有一個(gè)table-cell元素，就算設(shè)置了寬度也會(huì)占滿table元素的寬度芥驳。
- 對(duì)設(shè)置了float柿冲、absolute的元素不起作用。且IE6兆旬、7不支持
這就是所謂的table布局大法假抄。
display: inline-block
- inline-block元素把自己變成特殊的inline元素，對(duì)于相鄰的元素來說表現(xiàn)出inline的特點(diǎn)爵憎，允許空格慨亲。對(duì)于內(nèi)部元素來說表現(xiàn)出block元素的特點(diǎn)，可以設(shè)置高度和寬度宝鼓。
- 空格是兩個(gè)標(biāo)簽中存在換行符or制表符or空格符（其實(shí)就是縮進(jìn)）的原因生產(chǎn)的刑棵，只需要給設(shè)置了inline-block屬性的父元素設(shè)置font-size:0,就可以使標(biāo)簽中的空格失去寬度
