摘要：至于說(shuō)，，，屬性是脫離文檔流的，這個(gè)估計(jì)也是我們剛開始用得最多的，最方便的一個(gè)，同時(shí)也會(huì)給我們帶來(lái)許多問(wèn)題，這一次你會(huì)發(fā)現(xiàn)與前面的，有相同的地方，都是覆蓋，不同的是，里文字被擠出來(lái)，這也是之前主要是用來(lái)做文字環(huán)繞效果有關(guān)。

一般在html有塊級(jí)元素和行級(jí)元素，主要的塊級(jí)元素有

div，p，h1-h6,ul,ol,li,dl,dt,dd,table,tr,th,td,有好記的辦法，div，p，顯示標(biāo)題的，列表，表格，定義列表相關(guān)的

行內(nèi)元素，也稱行級(jí)元素，主要有a,span,em,i,strong,input,img,label,select,textarea等
一般塊級(jí)元素會(huì)獨(dú)占一行，而行內(nèi)元素不會(huì)，行內(nèi)元素會(huì)擠在一行，直到一行排滿，針對(duì)行內(nèi)元素和會(huì)級(jí)元素，主要在后面布局用到的是，可以將一些行內(nèi)元素的display屬性變成block，display:block;,也可以使用dispaly:inline-block屬性，

在這里順便提一下block,inline-block,inline,的區(qū)別。對(duì)設(shè)置了display:block;的標(biāo)簽，你可以設(shè)置width，height，margin，padding，這些都會(huì)起作用，而對(duì)于display:inline;的標(biāo)簽，你在css里設(shè)置的width，height，margin-top，margin-bottom，padding-top，padding-bottom是沒(méi)有用的（margin-left，margin-right,padding-left,padding-right是有效的）,這里有一個(gè)疑問(wèn)？？padding的所有屬性都在起作用，margin的top和bottom確實(shí)不起作用，代碼是這樣的：

   
son

常用的與定位相關(guān)的有float，static，relative，absolute,fixed，記得剛開始學(xué)習(xí)的時(shí)候一直搞不清楚relative和absolute，之前一直在濫用float，現(xiàn)在情況少一些，static是默認(rèn)的，一個(gè)一個(gè)說(shuō)吧。

relative，當(dāng)把position設(shè)定為position：relative時(shí)，我們一般還會(huì)用到left，top，right，bottom這幾個(gè)屬性，還是用上邊那個(gè)列子。這里父級(jí)div相對(duì)于自己原來(lái)的位置向左，向下移動(dòng)10px，坐標(biāo)軸以左上角為原點(diǎn)，向右為x軸，向下為y軸，你還可以設(shè)置left，top的值為負(fù)值，relative是相對(duì)于自身而言，不會(huì)脫離文檔流，一般要定位先要將父級(jí)設(shè)置為relative。

   
son

absolute，首先你得找一個(gè)父級(jí)作為參照，并將父級(jí)設(shè)置為relative，假如不這樣設(shè)定的話，都是以body作參照，下面還是舉個(gè)列子?？梢钥吹剑瑂ibling跑到前面去了，說(shuō)明position：absolute；是脫離文檔流的，與float有點(diǎn)類似，這里你可能會(huì)有疑問(wèn)，為什么sibling的有些部分會(huì)被覆蓋，這是因?yàn)閟on設(shè)置為position：absolute，（他的z-index有默認(rèn)屬性吧?。﹤€(gè)人猜測(cè)，要想將sibling放到son上面，你可以給sibling設(shè)置也為position：absolute，z-index:[number],number比son的大即可。

  
   
   
       
       
       
   
   
       

       
son
       
sibling
 
       
   
   

3.fixed,以瀏覽器窗口為參照，固定位置不動(dòng)，具體自己可以動(dòng)手操作試試。
4.至于說(shuō)float，float：left，float：right，float屬性是脫離文檔流的，這個(gè)估計(jì)也是我們剛開始用得最多的，最方便的一個(gè)，同時(shí)也會(huì)給我們帶來(lái)許多問(wèn)題，

    

    
son
    
sibling
 
    


    

這一次你會(huì)發(fā)現(xiàn)與前面的position：absolute，有相同的地方，都是.son覆蓋sibling，不同的是，float里文字被擠出來(lái)，這也是之前主要是用來(lái)做文字環(huán)繞效果有關(guān)。關(guān)于定位的內(nèi)容還有很多，這里不一一細(xì)說(shuō)。

初學(xué)階段，我們一定會(huì)遇到清除浮動(dòng)的問(wèn)題，這是在寫頁(yè)面里一定會(huì)碰到的問(wèn)題，關(guān)于清除浮動(dòng)的問(wèn)題，網(wǎng)上也是一搜一大把，下面我自己先歸納一下吧！還是先來(lái)一個(gè)列子。

    

    
son1
    
son2
 
    

首先我們會(huì)碰到，不能將父元素進(jìn)行撐開，怎樣才能解決呢？有好幾種解決方法。下面我列舉幾種常見的解決辦法。

方法一：使用空標(biāo)簽

    

    
son1
    
son2
 
    

    

優(yōu)點(diǎn)：簡(jiǎn)單，代碼少，瀏覽器兼容性好。缺點(diǎn)：需要添加大量無(wú)語(yǔ)義的html元素，代碼不夠優(yōu)雅，后期不容易維護(hù)。

方法二：使用CSS的overflow屬性，這個(gè)的原理主要是運(yùn)用BFC（塊級(jí)格式化上下文），今天剛看到，BFC（浮動(dòng)、絕對(duì)定位元素（position 為 absolute 或 fixed）、行內(nèi)塊元素 display:inline-block、表格單元格 display:table-cell、表格標(biāo)題 display:table-caption 以及 overflow 屬性值不為 visible 的元素（除了該值被傳播到視點(diǎn) viewport 的情況）將創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。）我們對(duì)父元素使用overflow：hidden;也可以達(dá)到效果。效果和之前的一模一樣。

方法三：可能是使用的最廣，最高大上的一種方法，使用：after偽類，實(shí)現(xiàn)原理應(yīng)該就是在clearfix后面的偽類添加內(nèi)容， 設(shè)置了clear：both樣式。為了IE6-7兼容性，還要添加一條樣式，來(lái)觸發(fā)haslayout（）事件，寫法：

.clearfix:after {clear: both; content: ".";height:0; visibility: hidden; display: block;}
.clearfix {  zoom: 1; /*觸發(fā) haslayout*/ }

這三種方法基本能幫我們解決這一類問(wèn)題，其中第三種用得最廣泛。

1.水平居中： 在父元素添加樣式，要注意的是要給父元素一個(gè)寬度 {margin:0 auto;}
2.垂直居中： 這有一個(gè)比較詳細(xì)的博客詳解垂直居中，專業(yè)講解各種居中
3.水平和垂直居中，不定寬高和定寬高兩種方式，寬高固定這一種比較簡(jiǎn)單，直接上代碼

①：{width: 200px; height: 200px; position: absolute; top:50%; left: 50%; margin-top:-100px;/*-height/2*/ margin-left:-100px;/*-width/2*/ }
②：{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
③：{display: flex; justify-content: center; align-items: center; border: 2px solid #f22;}

暫時(shí)就總結(jié)這一些。。。