摘要：效果圖為了讓效果更明顯，特意設(shè)置了兩邊字體大小不同關(guān)鍵代碼父容器子容器這里要提一下的是，只對(duì)于內(nèi)聯(lián)元素或者內(nèi)聯(lián)內(nèi)容有效，比如說為塊級(jí)元素標(biāo)簽設(shè)置行高，實(shí)際上是為標(biāo)簽中的內(nèi)聯(lián)文字設(shè)置了行高。允許指定負(fù)長(zhǎng)度值和百分比值。

先扯一段廢話來引入好了。又很久沒有寫文章了（間接性躊躇滿志，持續(xù)性混吃等死），幾個(gè)月了登上來看到有人收藏和點(diǎn)贊，感到很慚愧，最近主要精力花費(fèi)在react和redux，在寫項(xiàng)目的過程中發(fā)現(xiàn)當(dāng)前學(xué)習(xí)重心偏向js和框架學(xué)習(xí)，css的知識(shí)不夠扎實(shí)，正好碰到公司的技術(shù)大牛分享css心得，借此機(jī)會(huì)恰好梳理一下自己的知識(shí)。

本篇的內(nèi)容主要是pc端的常規(guī)布局，說到這里，雖然目前flex布局和grid布局比較火，用起來也確實(shí)很方便，但是這兩個(gè)方案有個(gè)比較致命的地方--需要高版本瀏覽器的支持（IE10以上），而很多項(xiàng)目需要考慮到IE8以下的兼容，所以目前在pc端項(xiàng)目中仍然使用一些常規(guī)的布局方案。

為了更容易理解，還是采用舉例的方式進(jìn)行知識(shí)點(diǎn)說明

案例1:比如需要寫這樣一個(gè)評(píng)論區(qū)域，左側(cè)是固定寬度的區(qū)域放置評(píng)論者的頭像，右側(cè)是評(píng)論的內(nèi)容和信息等

這時(shí)候可以這樣寫

 .left{
    position:absolute;
    width:200px;
  }
  .right{
    padding-left:200px;
  }

案例2：如果把上個(gè)案例左邊的頭像換成評(píng)論者昵稱，由于昵稱長(zhǎng)度不一定，所以左側(cè)的寬度不能寫死，此時(shí)采用如下寫法：

  .left{
    float: left;
  }
  .right{
   overflow: auto;  }

這種寫法的原理是觸發(fā)右邊元素的BFC特性（關(guān)于bfc的詳細(xì)介紹不在本篇提出，網(wǎng)上有比較多的文章介紹），可以先簡(jiǎn)單的說一下，BFC的簡(jiǎn)單來說，主要是使元素成為一個(gè)獨(dú)立的容器，不受外界因素的影響。這種寫法也可以用在有側(cè)邊欄的頁面布局上，以及常見的帶有標(biāo)題和時(shí)間戳的文章列表項(xiàng)上，看下面的例子：

類似于上圖這種，需要顯示文章標(biāo)題和發(fā)布時(shí)間情況，可能有些人會(huì)采取左側(cè)標(biāo)題左浮動(dòng)，右側(cè)時(shí)間戳右浮動(dòng)的寫法來寫，這樣的寫法其實(shí)是不夠穩(wěn)健的：如果標(biāo)題的長(zhǎng)度太長(zhǎng)，或者說整個(gè)容器的寬度變小的時(shí)候，效果會(huì)變成這樣：右側(cè)的元素會(huì)被擠到下一行去

，而采用上面的寫法時(shí)是這樣的：

如果再配合上css的文字超出部分省略號(hào)，就可以變成這種效果：當(dāng)容器寬度小的時(shí)候，標(biāo)題根據(jù)長(zhǎng)度自適應(yīng)顯示。

(關(guān)于white-space這個(gè)屬性，在后續(xù)的文章會(huì)再提到，占個(gè)坑)
關(guān)鍵代碼：

.left{
    float: left;
    background-color: lightpink;
    text-overflow: ellipsis;
    max-width: 171px;
    overflow: hidden;
    white-space: nowrap;
  }
  .right{
    overflow: auto;
    background-color: lightblue;
  }

對(duì)于定寬元素,直接使用margin:0 auto;(其實(shí)只有左右是auto即可 上下的可以設(shè)置其它值)：

.inner{
      width: 300px;
      height:400px;
      margin: 0 auto;
    }

對(duì)于非定寬的元素，在父容器上使用text-align:center即可

.box{
      text-align:center;
    }

以上兩種都比較簡(jiǎn)單和常見，不再贅述。

案例3：還是剛剛上面的文章列表項(xiàng)，如果需要讓標(biāo)題和時(shí)間戳都垂直居中， 那么可以讓子元素的line-height值等于li的高度，即可實(shí)現(xiàn)內(nèi)部的文字居中。
效果圖（為了讓效果更明顯，特意設(shè)置了兩邊字體大小不同）:

關(guān)鍵代碼：

    //父容器
   .box{
        height:40px;
    }
    //子容器
    .inner{
        line-height:40px;
    }
       

這里要提一下的是，line-hight只對(duì)于內(nèi)聯(lián)元素或者內(nèi)聯(lián)內(nèi)容有效，比如說為塊級(jí)元素p標(biāo)簽設(shè)置行高，實(shí)際上是為p標(biāo)簽中的內(nèi)聯(lián)文字設(shè)置了行高。（行高的詳細(xì)計(jì)算也不在本文贅述，后續(xù)看情況是否另寫）

案例4：假設(shè)現(xiàn)在我們需要寫一個(gè)工具條，工具條的高度不確定，工具條內(nèi)的圖標(biāo)高度有可能不一樣，但是都要垂直居中。 目標(biāo)效果圖：

像上面這種效果，可能會(huì)有人提出對(duì)不同的圖標(biāo)使用不同margin:top的值來使它們強(qiáng)制垂直居中，但是這樣的寫法是很不方便的，如果工具欄的高度有所變化，需要進(jìn)行相應(yīng)調(diào)整。比較合適的寫法是像下面這樣：

//父容器
.toolbar{
    font-size:0
    height：300px;
}
  .toolbar:after{
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
  }
//子容器
  .inner{
    display: inline-block;
    vertical-align: middle;
  }

這個(gè)例子可能需要詳細(xì)解釋下。首先先問一個(gè)問題吧：vertical-align: middle;這個(gè)屬性是怎么生效的？字面上翻譯過來是“垂直方向居中”，那請(qǐng)問這里的垂直方向居中是以什么為參照物的呢？,
css2.1里面提到：

for inline non-replaced elements, the box used for alignment is the box whose height is the "line-height" (containing the box"s glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.
在w3c上是這樣描述的：
該屬性定義行內(nèi)元素的基線相對(duì)于該元素所在行的基線的垂直對(duì)齊。允許指定負(fù)長(zhǎng)度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。

簡(jiǎn)單的來說，可以認(rèn)為這些設(shè)置了inline-block內(nèi)部塊盒，它們vertical-align的是相對(duì)于父容器的行高來設(shè)置的。好了，第二個(gè)關(guān)鍵點(diǎn)是,在上面的案例中 我們并不確定父元素box的行高，那這時(shí)候父元素box的行高就等于子行內(nèi)元素中高度最高的一個(gè)，對(duì)于上面?zhèn)晤悓傩缘淖饔么蠹铱隙ǘ贾?，相?dāng)于給box添加一個(gè)子元素，由于我們給這個(gè)偽類設(shè)置了inline-block，使之具有內(nèi)聯(lián)元素的特征，又設(shè)置了高度為100%，那么當(dāng)父容器具有固定高度時(shí)，這個(gè)偽類元素能保證，父容器的行高等于高度,從而保證了其他元素的vertical-align: middle;能夠真正相對(duì)于父容器的高度居中。

還有一點(diǎn)就是，使用inline-block的元素會(huì)導(dǎo)塊級(jí)元素出現(xiàn)間隙（具體的原因關(guān)系到inline-block的屬性特性，本文暫時(shí)不提），通用的解決方案是給父容器加上font-size:0

對(duì)于已知寬高的絕對(duì)定位元素，可以簡(jiǎn)單的這樣寫：

.inner {
   position: absolute;
    left:50%;
    top:50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    marigin-right: -50px;
}

關(guān)鍵思路就是設(shè)置負(fù)邊距為自身寬高的一半。
如果在ie9以上，可以使用transform屬性簡(jiǎn)化代碼,此時(shí)可以不需要知道元素自身的寬高

.inner {
   position: absolute;
    left:50%;
    top:50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%,-50%);
}

本文主要是對(duì)pc端常用的一些布局寫法做了整理，總體上還是偏向于在某種情況下怎么做的思路來寫的， 其實(shí)其中很多的東西值得深入研究，比如BFC,line-height和display:inline-block的一些內(nèi)容，但是由于篇（lan）幅（duo）的關(guān)系無法在文中詳細(xì)說明，后續(xù)再一一補(bǔ)上吧（如果懶癌沒有發(fā)作的話，畢竟每次寫文章之前寫結(jié)構(gòu)、畫圖、寫代碼、組織語言都要花費(fèi)一番功夫，寫完一次都會(huì)恐懼一段時(shí)間。。。）還有就是，很感謝那些支持和關(guān)注的人，你們給了我前進(jìn)的動(dòng)力。
然后是慣例：如果這篇文章對(duì)你有幫助，請(qǐng)大方的點(diǎn)收藏和推薦吧，以上內(nèi)容屬于個(gè)人見解，如果有不同意見，歡迎指出和探討。請(qǐng)尊重作者的版權(quán)，轉(zhuǎn)載請(qǐng)注明出處，如作商用，請(qǐng)與作者聯(lián)系，感謝！