摘要：效果圖為了讓效果更明顯，特意設置了兩邊字體大小不同關鍵代碼父容器子容器這里要提一下的是，只對于內聯元素或者內聯內容有效，比如說為塊級元素標簽設置行高，實際上是為標簽中的內聯文字設置了行高。允許指定負長度值和百分比值。

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

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

為了更容易理解，還是采用舉例的方式進行知識點說明

案例1:比如需要寫這樣一個評論區域，左側是固定寬度的區域放置評論者的頭像，右側是評論的內容和信息等

這時候可以這樣寫

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

案例2：如果把上個案例左邊的頭像換成評論者昵稱，由于昵稱長度不一定，所以左側的寬度不能寫死，此時采用如下寫法：

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

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

類似于上圖這種，需要顯示文章標題和發布時間情況，可能有些人會采取左側標題左浮動，右側時間戳右浮動的寫法來寫，這樣的寫法其實是不夠穩健的：如果標題的長度太長，或者說整個容器的寬度變小的時候，效果會變成這樣：右側的元素會被擠到下一行去

，而采用上面的寫法時是這樣的：

如果再配合上css的文字超出部分省略號，就可以變成這種效果：當容器寬度小的時候，標題根據長度自適應顯示。

(關于white-space這個屬性，在后續的文章會再提到，占個坑)
關鍵代碼：

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

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

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

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

.box{
      text-align:center;
    }

以上兩種都比較簡單和常見，不再贅述。

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

關鍵代碼：

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

這里要提一下的是，line-hight只對于內聯元素或者內聯內容有效，比如說為塊級元素p標簽設置行高，實際上是為p標簽中的內聯文字設置了行高。（行高的詳細計算也不在本文贅述，后續看情況是否另寫）

案例4：假設現在我們需要寫一個工具條，工具條的高度不確定，工具條內的圖標高度有可能不一樣，但是都要垂直居中。 目標效果圖：

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

//父容器
.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;
  }

這個例子可能需要詳細解釋下。首先先問一個問題吧：vertical-align: middle;這個屬性是怎么生效的？字面上翻譯過來是“垂直方向居中”，那請問這里的垂直方向居中是以什么為參照物的呢？,
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上是這樣描述的：
該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

簡單的來說，可以認為這些設置了inline-block內部塊盒，它們vertical-align的是相對于父容器的行高來設置的。好了，第二個關鍵點是,在上面的案例中 我們并不確定父元素box的行高，那這時候父元素box的行高就等于子行內元素中高度最高的一個，對于上面偽類屬性的作用大家肯定都知道，相當于給box添加一個子元素，由于我們給這個偽類設置了inline-block，使之具有內聯元素的特征，又設置了高度為100%，那么當父容器具有固定高度時，這個偽類元素能保證，父容器的行高等于高度,從而保證了其他元素的vertical-align: middle;能夠真正相對于父容器的高度居中。

還有一點就是，使用inline-block的元素會導塊級元素出現間隙（具體的原因關系到inline-block的屬性特性，本文暫時不提），通用的解決方案是給父容器加上font-size:0

對于已知寬高的絕對定位元素，可以簡單的這樣寫：

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

關鍵思路就是設置負邊距為自身寬高的一半。
如果在ie9以上，可以使用transform屬性簡化代碼,此時可以不需要知道元素自身的寬高

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

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