一.使用斜槓/分割的關鍵字
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%;
}
分隔的是:水平半徑/垂直半徑
二.佈局
注意父元素的定位方式 是相對 還是靜態 這決定了其內部絕對定位與浮動元素
三.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的影響。
九.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的位置調整