一.常用的骨灰級(jí)清除浮動(dòng)
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
解讀浮動(dòng)閉合最佳方案：clearfix
二.使用斜杠/分割的關(guān)鍵字
1.font
H2{
font:12px/100% sans-serif;
}
分割的分別是 字體大小 與 行高 ,其他關(guān)鍵是用空白符分割。
2.background
div{
background:#fff url(../images/xx.jpg) center center/50% 50%
}
分割的是background-position/background-size
3.border-radius
div{
border-radius: 30% / 20%;
}
分隔的是:水平半徑/垂直半徑
三.內(nèi)聯(lián)元素相連之間存在間隙
原因:內(nèi)聯(lián)元素是當(dāng)做字體來(lái)處理的，字體之間是有間隔的
解決:
1.多個(gè)標(biāo)簽寫在一行
2.將要閉合標(biāo)簽的地方與開始標(biāo)簽的地方重合
3.使用注釋頭尾相連
4.在父級(jí)上寫：font-size:0;
5.使用display：block(img是內(nèi)聯(lián)元素)
6.使用letter-spacing屬性
多個(gè)Img標(biāo)簽之間的間隙處理方法
四.布局
注意父元素的定位方式 是相對(duì) 還是靜態(tài) 這決定了其內(nèi)部絕對(duì)定位與浮動(dòng)元素
五.塊級(jí)元素包裹內(nèi)聯(lián)元素的時(shí)候，總會(huì)出現(xiàn)幾像素的差
<!--例子1-->
<div>
<img src="images/o_u=3986871593,628400456_fm=21_gp=0.jpg">
</div>
<!--例子2-->
<ul>
<li>
<img src="imsges/o_u=3986871593,628400456_fm=21_gp=0.jpg">
</li>
</ul>
<!--例子3-->
<div>
<span>asdasdasd</span>
</div>
解決：設(shè)置內(nèi)聯(lián)元素屬性:display:block;
六.css hack(hack有風(fēng)險(xiǎn),使用需謹(jǐn)慎)
1.html hack
<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->
在css中使用:
.ie6 body{
background-color:red;
}
2.選擇器 hack
* html .test{color:#090;} /* For IE6 */
* + html .test{color:#ff0;} /* For IE7 */
3.屬性hack
color:#fff\0; /*：選擇IE8+和Opera*/
color:#090\9; /* For IE瀏覽器 */
*color:#f00; /* For IE7 */
_color:#ff0; /* For IE6 */
七.box-sizing
1.常規(guī)的盒模型: box-sizing : content-box(width == content 不包括padiing border)
2.box-sizing : border-box width == content + padiing + border(相當(dāng)于低級(jí)瀏覽器的怪異模式)
八.圖片格式區(qū)別
格式 區(qū)別
jpg 有損壓縮
png 無(wú)損壓縮,透明圖
gif 動(dòng)態(tài)圖像
webp 支持有損壓縮和無(wú)損壓縮的圖片文件,壓縮率極高,且畫面豐富(有瀏覽器兼容性問(wèn)題)
九.px,em,rem的區(qū)別
em,rem 相對(duì)大小
em相對(duì)父元素font-size
rem相對(duì)html根元素的font-size
px 絕對(duì)大小
十.不能繼承的屬性
多數(shù)邊框類屬性:如邊框，補(bǔ)白，背景等。
十一.css中選擇器的權(quán)重
依次變小:id>class>標(biāo)簽
十二.css顏色的問(wèn)題
盡量使用16進(jìn)制的顏色，類似#fff;一位內(nèi)16進(jìn)制的顏色是確定的一個(gè)色值。
而red這類的顏色值不是確定的，可能會(huì)受到用戶代理即user agent stylesheet的影響。
十三.ie6.7不支持box-sizing: border-box;
解決:使用https://github.com/Schepp/box-sizing-polyfill這個(gè)墊片
注意：*behavior: url(../resource/js/lab/boxsizing.htc);這個(gè)URL是相對(duì)于HTML頁(yè)面的！！
十四.IE6.7 font與font-family
font起作用了 但是微軟雅黑不起作用
解決:必須要設(shè)置font-family:"microsoft yahei"
十五.text-align text-indent vertical-align
1.text-align:作用于塊級(jí)元素
如果要使得img居中，使用text-align是不行的，因?yàn)閕mg不是塊狀元素。只需要在img外面套一層div即可。
<div style="text-align:center"> <img src="XXX.jpg"/> </div>
2.text-indent:作用于塊級(jí)元素
3.vertical-align:作用于行內(nèi)元素,基于baseline的位置調(diào)整
十六.ul中l(wèi)i下面的間隔線用li布局邊框問(wèn)題
在IE低版本下有bug，會(huì)多出li的寬高
間隔線使用li的border去做
十七.ie8及一下的瀏覽器不支持:befor.:after
使用jquery的一個(gè)庫(kù)：jquery.pseudo.js 做兼容 兼容低版本瀏覽器的時(shí)候
注意:不要使用太高的JQuery版本,會(huì)報(bào)錯(cuò)！(我用的是1.10)
十八.IE6不支持position:fixed
.leftTop{
position:absolute;
left:expression(eval(document.documentElement.scrollLeft));
top:expression(eval(document.documentElement.scrollTop));
}
position:fixed; 閃動(dòng)問(wèn)題
解決: *html{ background-image:url(about:blank); background-attachment:fixed;
十九.IE6雙倍margin,padding邊距的問(wèn)題
一旦元素浮動(dòng)，就會(huì)出現(xiàn)雙倍的bug
解決：display:inline
二十.IE6中設(shè)置寬高位10px的時(shí)候出現(xiàn)的是長(zhǎng)方形
這個(gè)現(xiàn)象的另一種情況是:在IE6中定義比較小的高度問(wèn)題。
原因:IE6有默認(rèn)行高
解決：使用font-size:0;line-height:0;
二十一.IE6無(wú)法識(shí)別偽對(duì)象:first-letter/:first-line
p:first-letter {}
解決;在first-letter與"{"間增加空格
二十二.IE6下忽略!important
div{color:#f00!important;color:#000;}
解決:分開寫，并且將!important的屬性且在前面
div{color:#f00!important;}
div{color:#000;}
【 微信掃一掃 】
