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