1. line-height的文字垂直居中方式
<style>
.test{
height:50px;
border:1px solid red;
line-height:50px;
}
</style>
2. SASS mixin根據(jù)不同設(shè)備像素比加載不同背影圖片
@mixin background-image($url: 'decrease_1'){
background-image($url + '@2x.png');
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3){
background-image($url + '@3x.png')
}
}
這個(gè)單獨(dú)拿出來(lái)做一個(gè)文件
3.踩坑：如果父級(jí)元素設(shè)置min-height:100%;子級(jí)元素再設(shè)置min-height:100%;不生效
設(shè)置百分比的值的話，參照的元素相應(yīng)的值必須是一個(gè)確定的值，不然不生效。
4. 把文字和圖片放在一起默認(rèn)是基線對(duì)齊，破的方法就是vertical-align:top;
之前用了很多次了，就不再舉例了。
5. float和清除浮動(dòng)
-
設(shè)置了浮動(dòng)的話，它就會(huì)浮到當(dāng)前行的最左邊或者最右邊，形成方圖環(huán)繞的效果。
-
浮動(dòng)的元素脫離了文檔流，會(huì)遮住div元素，但是不會(huì)遮住div的具體內(nèi)容，浮動(dòng)元素不會(huì)撐起父級(jí)元素的高度，父級(jí)元素的高度是由沒(méi)有脫離文檔流的元素?fù)纹饋?lái)的。
-
float最重要的技巧：清除浮動(dòng)。浮動(dòng)的元素脫離文檔流，不會(huì)撐起父元素的高度，所以如果浮動(dòng)元素高度大于父元素，就會(huì)跑出來(lái)，那么在這種情況下如何將父元素包住它，如何讓浮動(dòng)元素來(lái)?yè)纹鸶冈氐母叨龋?/p>
使用clear方法。設(shè)置一個(gè)元素clear:both;它的左邊和右邊都不能有浮動(dòng)元素，這樣它就會(huì)跑到浮動(dòng)元素的下面，而它又是處于文檔流中，這樣就使它上方的浮動(dòng)元素也被父元素包起來(lái)。而這個(gè)元素我們通常會(huì)用父元素的偽元素來(lái)寫(xiě)。（踩坑：這里就不能寫(xiě)position了。。。。寫(xiě)了還怎么撐高度呀）
<style>
.parent{
border:1px solid red;
}
.parent:after{
display:block;
content:'';
/* position:absolute; 這里不能寫(xiě)position寫(xiě)了就脫離文檔流了，就不能撐起父元素的高度了，蠢貨！*/
clear:both;
}
img{
float:left;
opacity:0.5;
}
</style>
這里踩了一個(gè)坑，如果用偽元素來(lái)?yè)胃叨鹊脑?，怎么能?xiě)position呢？流汗！流汗！
6. 清除浮動(dòng)的三種方法
寫(xiě)一個(gè)div標(biāo)簽，設(shè)置clear:both;
在父元素寫(xiě)一個(gè)CSS偽類（類似一個(gè)span標(biāo)簽），設(shè)置clear:both; 這種辦法用的最多
-
設(shè)置父元素overflow:hidden/auto;
