Xhtml規(guī)范
1.頁面必須有文檔頭;
2.Img必須有alt;
3.雙標簽必須閉合;
4.單標簽必須合理閉合;
5.標簽名和標簽的屬性必須小寫;
6.符號必須用英文符號;
(引號必須用雙引號,用在行間時用單引號)
書寫順序
background:url color no-repeat position;
font:weight style size family;
省略號 (必須給寬度)
white-space:nowrap; // 強制不換行
overflow:hidden; // 溢出隱藏
text-overflow:ellipsis; // 省略號
塊標簽 div h1-h6 p ul ol dl li dt dd
1.支持寬高
2.獨占一行
3.不受換行和空格的影響
4.寬度參照父級
5.支持四個方向的padding和margin
6.塊元素能嵌套所有標簽
7.特殊的:P標簽只能嵌套行內
行內標簽span a em i b strong
1.不支持寬高
2.受換行和空格的影響
3.合并到一行
4.寬高根據內容撐開
5.不支持上下的margin和padding
6.行內只能嵌套行內 不能嵌套自己
7.特殊的:a 能嵌套所有標簽 都可以嵌套img
行內塊img input
1.支持寬高
2.受換行和空格的影響
3.合并到一行
嵌套規(guī)則
1.塊元素能包含所有元素
2.P不能包塊,只能包行內
3.行內元素不能包塊元素
4.行內元素可以包行內元素,但是不能包自己
5.a標簽可以包任何元素但是不能包自己
6.任何標簽都可以包img
7.行內元素即使轉化成塊,也不能包塊元素
標簽偽類順序
link visited hover active 順序 l v h a
關于繼承
1.所有和文字相關的樣式都能繼承
2.a標簽不能繼承顏色
3.b strong h1-h6 不能繼承加粗
4.i em 不能繼承斜體
內邊距/內補白/內補丁
1.塊元素支持4個方向上的padding
2.行內元素支持左右方向的padding,不支持上下
3.父級最好給寬,子級不用給
4.給padding的時候要減去相應的值
外邊距/外補白/外補丁
margin 發(fā)生合并時,取最大值;
margin給上邊距的時候發(fā)生拖拽
1.加border
2.加overflow:hidden;
3.換做給父級加padding (推薦)
優(yōu)先級/權重
行內樣式>id>class>標簽>*
盒子模型
width height padding border
浮動 float的特性
1.浮動有方向left right none
2.合并到一行
3.脫離文檔流
4.父級寬度不夠會掉下來
5.浮動后寬度盡可能的窄,窄到內容的寬度
6.行內元素給浮動后變成了塊元素
7.文本環(huán)繞
8.盡可能的往上飄
9.同級元素都要給浮動
10.給浮動之后要清浮動
11.盡量給寬度
清浮動的3種方法
1.父級加:overflow:hidden;
2.同級加:clear:both
3.父級加:clearFix:after{ content:'';display:block;clear:both}
clearFix{ zoom:1;}
定位position
relative 相對定位
1.不能改變元素的本質
2.不脫離文檔流
3.根據自己定位
absolute 絕對定位
1.寬度盡可能的窄,窄到內容的寬度
2.可以把行內元素變成塊元素
3.父級沒有相對定位時,會一直往上找直到body
fixed 固定定位
1.根據可視區(qū)定位
2.行內元素轉化為塊
3.脫離文檔流
4.塊元素會變窄
層級 z-index
1.最大值2的32次方,值越大層級越高
2.子級永遠在父級的上面
3.只有在有定位的時候才好用
透明處理
opacity:0-1
filter:alpha(opacity:0-100)
雪碧圖/精靈圖
大小不宜超過50k
可以減少請求,不利于維護
必須給負值
表格
<table>
<thead></thead>表頭
<tbody></tbody>表身
<tfoot></tfoot>表尾
</table>
th,td{ border:1px solid #000; }
table{ border-collapse:collapse;}合并單元格
colspan 列合并
rowspan 行合并
align="center" 水平方向
left center right
valign="middle" 垂直方向
top middle bottom