1.樣式表
1.1 行內(nèi)樣式表
<input type="text" style="color:#ccc;font-size:25px">
1.2內(nèi)部樣式表
<head>
<style>
div {
color:blue;
font-size:13px;
}
</style>
<head>
1.3 外部樣式表
//style.css
div {
color:black;
}
2.選擇器
2.1基本選擇器
1.標簽選擇器（元素選擇器）
2.類名選擇器（上面點聲明碎紊，下面class調(diào)用）
3.多類名選擇器
4.id選擇器（#聲明，id調(diào)用）使用較少
5.通配符選擇器(適應(yīng)所有標簽) 一般不用
注意事項:
1.選擇器命名推薦使用中橫線音同，不使用下劃線(first-span);
2.推薦使用英文加字母(a1);
2.2 復(fù)合選擇器
1.后代選擇器
2.子代選擇器
3.交集選擇器
4.并集選擇器
2.3 偽類選擇器
:hover
a:hover {
color:red;
}
3.布局模式
- 塊級元素
獨占一行权均，有寬高 例如：div
- 行內(nèi)元素
同占一行痪寻，寬高無效(包裹) 例如：span
- 行內(nèi)塊元素
同占一行，有寬高 例如：標簽加上float屬性
例如<img /> <input /> <td /> - 元素塊轉(zhuǎn)化
各元素塊之間可以相互進行轉(zhuǎn)化蛇尚，以使用其他的特性
4.三大特性
- 層疊性(就近原則)
- 繼承性(子類可以繼承父類的部分屬性取劫，如font-研侣，text-，line-惦银，color)
- 優(yōu)先級
1.繼承和*的權(quán)重(0,0,0,0);類選擇器權(quán)重(0,0,1,0);標簽權(quán)重(0,0,0,1);id選擇器權(quán)重（0,1,0,0);行內(nèi)屬性權(quán)重(1,0,0,0);!important權(quán)重(無限大)
2.權(quán)重可以疊加
5 浮動
讓多個塊元素在一行顯示(設(shè)置該屬性的元素會漂浮在其他元素的上方)
5.1 使用浮動
1.浮動不占位置(實際影響的是后面的盒子)
2.浮動不會超越父級的padding值
3.元素添加浮動后可以讓其擁有行內(nèi)塊元素屬性
5.2 清除浮動
因為浮動會使元素不再占用位置扯俱，有時需要讓元素仍然占用空間喇澡，所以需要清除浮動。
1.額外標簽法(在父級的最后加上一個標簽读存，并加上clear屬性)
2.在父級加上overflow:hidden
3.偽元素清除法
4.雙偽元素清除法
6.定位(position)
由定位類型和外偏移組成
6.1 定位類型
6.1.1 相對定位
1.以自己為中心
2.會占位置
div {
positon:relative
top:10px;
left:10px;
}
6.1.2 絕對定位
- 以最近的并且有定位的父級為中心(直到瀏覽器為中心)
- 不會占位置
div {
positon:absolute;
bottom:10px;
right:10px;
}
6.1.3 固定定位
- 以瀏覽器為中心
- 不會占位置
6.2 邊偏移
div {
position:absolute;
left:0;
top:0;
}
6.3 定位層級
div {
z-index:0;
}
1.默認層級是0，后面的會在前面的上面
2.只有定位的元素才有層級屬性
7 顯示與隱藏
div {
display:none;//隱藏元素(不占位置敬察，類似gone)
display:block;//顯示元素(轉(zhuǎn)化為塊元素)
visibility:hidden;//隱藏元素(占位置拜英，類似unvisible)
visibility:visible;//顯示元素
overflow:auto;//文本超出時滾動
outline:none;//取消外邊框
overflow:hidden;//超出部分隱藏
text-flow:ellipsis;//超出部分為省略號
white-space:nowrap;//超出部分文本不自動換行
}
textarea{
resize:none;//防止拖拽
}
8 部分標簽特性
8.1 內(nèi)邊距和邊框
border,padding會使設(shè)置了寬高的容器撐大
