1. 首先咱們最簡(jiǎn)單的就是 居中
   這是一個(gè)很重要的基礎(chǔ)，在很多時(shí)候會(huì)用到。

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

上面兩個(gè)是相對(duì)用的比較多，還可以用flex布局，定位等等

2. 定位 position

普通流與相對(duì)定位

• CSS有三種基本的定位機(jī)制：普通流，相對(duì)定位和絕對(duì)定位

• 普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來(lái)的static時(shí)就會(huì)按照普通流定位，這也是我們最常見(jiàn)的方式

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

• 絕對(duì)定位與固定定位

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

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

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

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

  總結(jié)：

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

浮動(dòng) float（脫離文檔流）

浮動(dòng)元素的特征：

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

• 無(wú)論是塊元素還是內(nèi)聯(lián)元素，沒(méi)有寬度時(shí)默認(rèn)內(nèi)容撐開(kāi)寬度;

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

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

浮動(dòng)元素對(duì)其他元素的影響：

• 對(duì)其他浮動(dòng)元素的影響：后浮動(dòng)的元素永不會(huì)超過(guò)先浮動(dòng)元素;

• 對(duì)普通元素的影響，普通元素會(huì)占據(jù)浮動(dòng)元素原來(lái)所在的文檔位置;

• 對(duì)文字而言，除了自身的文字外，其他元素中的文字一律環(huán)繞浮動(dòng)元素周?chē)?/p>

BFC清理浮動(dòng)

• BFC的全稱(chēng)是 Block Format Content，有三個(gè)特性

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

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

• BFC不會(huì)重疊浮動(dòng)元素

• BFC可以包含浮動(dòng)

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

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

通用的清除浮動(dòng)法案

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

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

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;
}

負(fù)margin

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

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

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

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

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

z-index 有什么作用

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

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

布局

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

還有flex布局

還有bootstrap

還有。。。