1. 首先咱們最簡單的就是 居中
   這是一個很重要的基礎(chǔ)，在很多時候會用到。

• 塊級水平居中可以使用margin:0 auto
• text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
  • 作用：水平居中；
  • 作用在塊級元素上；
  • 能夠使inline元素和inline-block元素水平居中。

上面兩個是相對用的比較多，還可以用flex布局，定位等等

2. 定位 position

普通流與相對定位

• CSS有三種基本的定位機制：普通流，相對定位和絕對定位

• 普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式

• 相對定位比較簡單，對應(yīng)position屬性的relative值，如果對一個元素進行相對定位，它將出現(xiàn)在他所在的位置上，然后可以通過設(shè)置垂直或水平位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)出來的位置會改變

• 絕對定位與固定定位

• 相對定位可以看作特殊的普通流定位，元素位置是相對于它在普通流中位置發(fā)生變化，而絕對定位使元素的位置與文檔流無關(guān)，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對定位元素不存在一樣

• 絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊兒（body或html神馬的）元素。

• 因為絕對定位與文檔流無關(guān)，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index屬性控制疊放順序，z-index越高，元素位置越靠上。

• 最后要說的就是fixed屬性了，應(yīng)用fixed也叫固定定位，固定定位是絕對定位的一種，固定定位的元素也不包含在普通文檔流中，差異是固定元素的包含塊兒是視口（viewport）

  總結(jié)：

  • absolute偏移的參考點是具有position屬性（除了static屬性）的最近的祖先元素。
  • relative偏移的參考點是元素本身的初始位置。（不脫離文檔流）
  • fixed偏移的參考點是瀏覽器窗口。

浮動 float（脫離文檔流）

浮動元素的特征：

• 浮動元素將脫離文檔流，不會再占據(jù)空間;

• 無論是塊元素還是內(nèi)聯(lián)元素，沒有寬度時默認內(nèi)容撐開寬度;

• 內(nèi)聯(lián)元素支持寬高；

• 設(shè)置寬高和float后，相當于懸浮的inline-block。

浮動元素對其他元素的影響：

• 對其他浮動元素的影響：后浮動的元素永不會超過先浮動元素;

• 對普通元素的影響，普通元素會占據(jù)浮動元素原來所在的文檔位置;

• 對文字而言，除了自身的文字外，其他元素中的文字一律環(huán)繞浮動元素周圍；

BFC清理浮動

• BFC的全稱是 Block Format Content，有三個特性

• BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊

  • 按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊。 因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊

• BFC不會重疊浮動元素

• BFC可以包含浮動

我們可以利用BFC的第三條特性來“清浮動”，這里其實說清浮動已經(jīng)不再合適，應(yīng)該說包含浮動。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC

• float為 left|right
• overflow為 hidden|auto|scroll
• display為 table-cell|table-caption|inline-block
• position為 absolute|fixed
  我們可以對父容器添加這些屬性來形成BFC達到“清浮動”效果

通用的清除浮動法案

• 總而言之清除浮動兩種方式：
  • 利用 clear屬性，清除浮動
  • 使父容器形成BFC

plan1:
.clearfix:after{ /*在class屬性名是clearfix的元素的子元素的最后再添加一個子元素*/
       content: ''; /*內(nèi)容是空*/
       display: block; /*設(shè)置為塊級元素*/ 
       clear: both; /*這個元素左右兩邊不允許有浮動元素*/
}
.clearfix{ /*設(shè)置class屬性是clearfix的元素*/ 
       *zoom: 1; /*設(shè)置縮放比例為1。這是IE專有屬性?；鸷屠习姹镜膚ebkit核心的瀏覽器都不支持這個屬性。*/}

plan2:
.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:left;
}

plan3
.clearfix{
    *zoom:1;
}
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

負margin

負邊距即margin屬性的值設(shè)為負值，在CSS布局中是一個很有用的技巧。值為正的場景很常見，大家都很熟悉其表現(xiàn)

• 當margin-top、margin-left為負值的時候，會把元素上移、左移，同時文檔流中的位置也發(fā)生相應(yīng)變化,這點與position:relative的元素設(shè)置top、left后元素還占據(jù)原來位置不同
• 當margin-bottom、margin-right設(shè)為負值的時候，元素本身沒有位置變化，后面的元素會上移、左移

position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
區(qū)別：

1. 負margin會使元素在文檔流中的位置發(fā)生偏移，它會放棄偏移之前占據(jù)的空間，緊挨其后的元素會填充這部分空間；

2. 相對定位后元素位置發(fā)生偏移，它仍會堅守原來占據(jù)的空間，不會讓文檔流的其他元素流入。

z-index 有什么作用

z-index用于設(shè)置元素的堆疊順序，z-index的值越高，則其堆疊順序越前，則是顯示在較低z-index的值的前面。

1. z-index僅對定位元素有效（position:relative||absolute||fixed）
2. z-index只可比較同級元素

布局

感覺自己還是沒能理解透，沒法自己寫，只能復(fù)制這篇先放著
http://www.itdecent.cn/p/be7a452bf707

還有flex布局

還有bootstrap

還有。。。