CSS加Div的實(shí)用技巧有哪些

這篇文章給大家介紹一波CSS+Div實(shí)用技巧小結(jié)，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

正如多數(shù)人的認(rèn)知一樣，HTML和CSS并不難學(xué)難用，從學(xué)習(xí)曲線上來說確實(shí)如此，難度甚至不如使用VIM。但是寫不寫得好又是另一回事，好的CSS代碼能用最少的代碼量實(shí)現(xiàn)功能，易修改且性能佳。易修改，舉個(gè)最簡(jiǎn)單的例子，比如要求修改一個(gè)div的高寬且保持其子div自適應(yīng)高寬，若是寫死了子div的高寬，修改工作很麻煩，所以最好是將子div在需求下盡可能寫成自適應(yīng)，這樣修改時(shí)就只需要修改父div的高寬即可。性能佳，能用CSS實(shí)現(xiàn)的絕對(duì)不用js實(shí)現(xiàn)，不管是網(wǎng)頁(yè)布局還是動(dòng)畫效果，原生的CSS都是快速又具備高度兼容性的選擇。
清除浮動(dòng)

清除浮動(dòng)是個(gè)常見問題，不少人的解決辦法是添加一個(gè)空的 div 應(yīng)用 clear:both。事實(shí)上僅需要使用after偽類即可在元素尾部自動(dòng)清除浮動(dòng)

CSS

1. .clear-fix { overflow: hidden; zoom: 1; }   

2. .clear-fix:after { display: table; content: ""; width: 0; clear: both; }  

DIV同行排列

最容易想到的是將一行div全設(shè)置為display:inline-block，但這種做法會(huì)使得兩個(gè)div之間存在“間隔”，這個(gè)“間隔”的大小通常由font-size決定。清除間隔可以通過使用注釋的方法實(shí)現(xiàn)。

CSS 

1. <div class="item"></div><!--   

2. --><div class="item"></div>  

更好的方式自然還是使用float

CSS

1. .item {float: left}  

靈活使用BFC

BFC（Block Formatting Context）直譯為“塊級(jí)格式化范圍”。當(dāng)一個(gè)HTML元素滿足以下任何一點(diǎn)時(shí)，就會(huì)產(chǎn)生BFC:

    float的值不為none
    overflow的值不為visible
    display的值為table-cell, table-caption或inline-block
    position的值不為relative和static

BFC提供了一個(gè)環(huán)境，這個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局。比如浮動(dòng)元素形成BFC，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的。BFC就是一個(gè)作用范圍，可看作是一個(gè)獨(dú)立的容器，并且這個(gè)容器的布局，與這個(gè)容器外的元素毫不相干。

BFC的元素不能與浮動(dòng)元素重疊，當(dāng)容器有足夠的剩余空間容納 BFC 的寬度時(shí)，所有瀏覽器都會(huì)將 BFC 放置在浮動(dòng)元素所在行的剩余空間內(nèi)。

未垂直對(duì)齊

同一行的一組class為item的div使用了display:inline-block或者是float:left時(shí)，如果某個(gè)div的內(nèi)部標(biāo)簽中填充一些文字等內(nèi)容，可能就會(huì)出現(xiàn)垂直不對(duì)齊的情況。但非常奇怪的是，這時(shí)內(nèi)部元素并沒有超出父級(jí)div的范圍，沒有任何溢出或撐開的情況，這點(diǎn)我也不是很理解，知道其發(fā)生原因的同學(xué)歡迎留言。解決方法倒不難：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .item { vertical-align: top;}  

display:table-cell的應(yīng)用

table-cell會(huì)被其他一些CSS屬性破壞，例如float和 position:absolute，所以display:table-cell與float:left或是position:absolute屬性最好不要同用。設(shè)置了該屬性的元素對(duì)寬度高度敏感，響應(yīng)padding屬性，對(duì)margin值無反應(yīng)
垂直居中

CSS 

1. .content {   

2.     display: table-cell;   

3.     border: 1px solid #eee;   

4.     width: 600px;   

5.     text-align: center;   

6. }   

7.   

8. <div class="content">   

9.     <p>what a beautiful day</p>   

10. </div>  

兩欄自適應(yīng)布局

適用于一欄寬度不固定，比如大小不確定的圖片，另一欄自動(dòng)調(diào)整占滿剩余寬度的場(chǎng)景。

CSS

1. .box {   

2.     width: 70%;   

3. }   

4. .content {   

5.     display: table-cell;   

6.     border: 1px solid #eee;   

7. }   

8. .fix {   

9.     float: left;   

10.     color: #a8c;   

11. }   

12.   

13. <div class="box">   

14.     <div class="fix">This is left fixed block</div>   

15.     <div class="content">   

16.         風(fēng)住塵香花已盡，日晚倦梳頭。物是人非事事休，欲語淚先流。聞?wù)f雙溪春尚好，也擬泛輕舟。只恐雙溪舴艋舟，載不動(dòng)許多愁。   

17.     </div>   

18. </div>  

關(guān)于一波CSS+Div實(shí)用技巧小結(jié)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。