CSS加Div的實用技巧有哪些

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

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

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

CSS

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

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

DIV同行排列

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

CSS 

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

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

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

CSS

1. .item {float: left}  

靈活使用BFC

BFC（Block Formatting Context）直譯為“塊級格式化范圍”。當一個HTML元素滿足以下任何一點時，就會產生BFC:

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

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

BFC的元素不能與浮動元素重疊，當容器有足夠的剩余空間容納 BFC 的寬度時，所有瀏覽器都會將 BFC 放置在浮動元素所在行的剩余空間內。

未垂直對齊

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

CSS Code復制內容到剪貼板

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

display:table-cell的應用

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

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>  

兩欄自適應布局

適用于一欄寬度不固定，比如大小不確定的圖片，另一欄自動調整占滿剩余寬度的場景。

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.         風住塵香花已盡，日晚倦梳頭。物是人非事事休，欲語淚先流。聞說雙溪春尚好，也擬泛輕舟。只恐雙溪舴艋舟，載不動許多愁。   

17.     </div>   

18. </div>  

關于一波CSS+Div實用技巧小結就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。