亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

一波CSS+Div實(shí)用技巧小結(jié)

segmentfault   發(fā)布時(shí)間：2015-07-18 18:23:18   作者：quietin   我要評(píng)論
這篇文章主要介紹了一波CSS+Div實(shí)用技巧小結(jié),隨看隨記,歡迎收藏~需要的朋友可以參考下

正如多數(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)頁布局還是動(dòng)畫效果，原生的CSS都是快速又具備高度兼容性的選擇。
清除浮動(dòng)

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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 Code復(fù)制內(nèi)容到剪貼板
  1. <div class="item"></div><!--   
  2. --><div class="item"></div>  

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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)。
2015718182851156.png (516×42)

未垂直對(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 Code復(fù)制內(nèi)容到剪貼板
  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 Code復(fù)制內(nèi)容到剪貼板
  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九宮格布局的五種方法

    本文主要介紹了css九宮格布局的五種方法，內(nèi)容包括grid布局、flex布局、table布局、float浮動(dòng)定位、inline-block+letter-spacing屬性這五種方法的實(shí)現(xiàn)，感興趣的可以了解下
    2023-09-18

  • CSS實(shí)現(xiàn)元素水平垂直居中的幾種方法

    在Web開發(fā)中，經(jīng)常會(huì)遇到需要將元素水平和垂直居中的情況,今天，將為大家分享幾種CSS方法，讓你的元素輕松居中，讓頁面更美觀吸引人，感興趣的小伙伴可以自己動(dòng)手試一試
    2023-09-08

  • css實(shí)現(xiàn)元素居中的6種方法

    相信大家在面試的時(shí)候也會(huì)經(jīng)常碰到css實(shí)現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評(píng)論區(qū)交流
    2023-09-07

  • flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐

    最近需要做個(gè)換行的布局，本文主要介紹了flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需
    2022-06-16

  • CSS布局之浮動(dòng)(float)和定位(position)屬性的區(qū)別

    今天看到有朋友留言問浮動(dòng)和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考
    2021-09-23

  • css實(shí)現(xiàn)元素居中的N種方法

    這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02

  • div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法

    這篇文章主要介紹了div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2021-01-21

  • waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)

    這篇文章主要介紹了waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2021-01-19

  • 頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法

    這篇文章主要介紹了頁面中有間隔的方格布局如何完美實(shí)現(xiàn)方法。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來
    2020-11-27

  • css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式

    這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2020-10-28

最新評(píng)論