成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS用法的一些總結(jié)

Anchorer / 861人閱讀

摘要：黃金檔未垂直對(duì)齊同一行的一組為的使用了或者是時(shí)，如果某個(gè)的內(nèi)部標(biāo)簽中填充一些文字等內(nèi)容，可能就會(huì)出現(xiàn)垂直不對(duì)齊的情況。解決方法倒不難的應(yīng)用會(huì)被其他一些屬性破壞，例如和，所以與或是屬性最好不要同用。

工作上，除了Django和一些并不復(fù)雜的腳本以外，其余時(shí)間寫了大量的CSS和jQuery，現(xiàn)在回頭看之前的一些代碼，寫得十分丑陋又低效，其中的CSS就有很大改進(jìn)空間。
正如多數(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)

.clear-fix { overflow: hidden; zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }
DIV同行排列

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

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

.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)。

上圖所示，畫線左側(cè)是描述，字?jǐn)?shù)不定，即寬度不定，畫線占滿同一行的剩余部分。正好使用上面提到的BFC與浮動(dòng)元素的位置情況。

.desc { float: left;}
.line { overflow: hidden;}

 
黃金檔
未垂直對(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é)歡迎留言。解決方法倒不難：

.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值無(wú)反應(yīng)

垂直居中 
.content {
    display: table-cell;
    border: 1px solid #eee;
    width: 600px;
    text-align: center;
}

    
what a beautiful day
兩欄自適應(yīng)布局

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

.box {
    width: 70%;
}
.content {
    display: table-cell;
    border: 1px solid #eee;
}
.fix {
    float: left;
    color: #a8c;
}

    
This is left fixed block

    

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

上面提到過可以用table-cell讓div內(nèi)的元素垂直居中，但對(duì)div的float和position屬性有限制，現(xiàn)在介紹一種可以用在浮動(dòng)元素(容器)里的垂直居中方法，這是在工作中碰到使用了float不好使時(shí)發(fā)現(xiàn)的
使用一個(gè)用作協(xié)助的inline-block的幫助元素，此處是span并將該元素和準(zhǔn)備居中的元素都設(shè)置為vertical-align: middle即可

css

.frame {
    float: left;
    height: 220px;
    width: 300px;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img {
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

原理是相鄰的兩個(gè)inline-block元素可以互相對(duì)齊，所以使用一個(gè)不可見的100%高度的span可以幫助img對(duì)齊
來源：http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

不過這時(shí)仍然有個(gè)問題，假設(shè)上面的img后面要跟一個(gè)文字介紹的div塊(inline-block)，如下所示


    
    
    
ABCD

如果需求是設(shè)置.desc的margin-top: 10px，直接設(shè)置的話會(huì)發(fā)現(xiàn)前面居中對(duì)齊的img也會(huì)向下10px。
原因是因?yàn)閴K元素的vertical-align默認(rèn)是baseline，設(shè)置margin-top會(huì)導(dǎo)致整個(gè)baseline下降，所以之前已經(jīng)居中對(duì)齊的元素也會(huì)受到影響。解決辦法是將div.desc設(shè)置為其它的對(duì)齊方式，推薦vertical-align: top

另外一種解決辦法既能解決上面的問題，也能解決inline-block的塊元素設(shè)置margin無(wú)效的問題

.desc {
    postion: relative;
    top: 10px;
}
hover時(shí)顯示邊框

方法一
對(duì)于一個(gè)塊元素比如div，通常先設(shè)置好border-width，并將border-color設(shè)為#fff或transparent，hover時(shí)直接改變border的顏色即可

方法二
將寬高的值寫上，然后設(shè)置box-sizing: box，hover時(shí)直接設(shè)置border即可，此時(shí)邊框?qū)挾劝ㄔ?b>width或height的數(shù)值中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111062.html

相關(guān)文章

  • bootstrap select2 tags用法總結(jié)

    摘要：原創(chuàng)用法總結(jié)前言最近用到的，官方文檔中的例子也很多在此寫一些實(shí)際項(xiàng)目中用法總結(jié)，有需要的朋友可以借鑒一下。 （原創(chuàng)） bootstrap select2 用法總結(jié) 前言 最近用到bootstrap 的 select2，官方文檔中的例子也很多在此寫一些實(shí)際項(xiàng)目中用法總結(jié)，有需要的朋友可以借鑒一下。 效果圖 showImg(https://segmentfault.com/img/bV...

    Zack 評(píng)論0 收藏0

  • bootstrap select2 tags用法總結(jié)

    摘要：原創(chuàng)用法總結(jié)前言最近用到的，官方文檔中的例子也很多在此寫一些實(shí)際項(xiàng)目中用法總結(jié)，有需要的朋友可以借鑒一下。 （原創(chuàng)） bootstrap select2 用法總結(jié) 前言 最近用到bootstrap 的 select2，官方文檔中的例子也很多在此寫一些實(shí)際項(xiàng)目中用法總結(jié)，有需要的朋友可以借鑒一下。 效果圖 showImg(https://segmentfault.com/img/bV...

    flyer_dev 評(píng)論0 收藏0

  • css文本屬性用法總結(jié)

    摘要：稍稍總結(jié)了下文本的一些屬性用法，自己忘記的時(shí)候也可以用來查查，不用去查網(wǎng)站那么麻煩。稍稍總結(jié)了下css文本的一些屬性用法，自己忘記的時(shí)候也可以用來查查，不用去查網(wǎng)站那么麻煩。 下面是部分總結(jié)，也希望對(duì)其他人有用 ? 文本修飾 (1)text-decoration:? 文本修飾（橫線） 4個(gè)屬性值 overline?? line-through?? underline? blink (1)ov...

    masturbator 評(píng)論0 收藏0

  • [面試專題]一線互聯(lián)網(wǎng)大廠面試總結(jié)

    摘要：道阻且長(zhǎng)啊前端面試總結(jié)前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進(jìn)按鈕書簽?zāi)夸洖g覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構(gòu)建的，使用自主研發(fā)的渲染引擎，和都使用網(wǎng)絡(luò)用來 道阻且長(zhǎng)啊TAT(前端面試總結(jié)) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括： 用戶界面－ 包括地址欄、后退/前...

    lemanli 評(píng)論0 收藏0

  • [面試專題]一線互聯(lián)網(wǎng)大廠面試總結(jié)

    摘要：道阻且長(zhǎng)啊前端面試總結(jié)前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進(jìn)按鈕書簽?zāi)夸洖g覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構(gòu)建的，使用自主研發(fā)的渲染引擎，和都使用網(wǎng)絡(luò)用來 道阻且長(zhǎng)啊TAT(前端面試總結(jié)) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括： 用戶界面－ 包括地址欄、后退/前...

    xfee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Anchorer

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<