1 基本長度單位
1.1 px 像素
最常用的 CSS 長度單位
width: 900px;
height: 80px;
font-size: 32px;/* 默認(rèn)字體大小為16px */
1.2 em 元素字體大小的倍數(shù)
如果元素設(shè)置過 font-size，就按照font-size來設(shè)置秦效；如果元素沒有設(shè)置過 font-size雏蛮，按照默認(rèn)字體大小來設(shè)置。
width: 10em;/* 如果該元素設(shè)置過 font-size阱州，則元素寬度為font-size的10倍挑秉，否則為默認(rèn)字體大小的10倍即160px */
height: 4em;/* 如果該元素設(shè)置過 font-size，則元素高度為font-size的4倍苔货，否則為默認(rèn)字體大小的4倍即64px */
font-size: 2em;/* 默認(rèn)字體大小為16px犀概，該設(shè)置使字體大小為默認(rèn)大小的2倍，即32px */
1.3 % 百分比
使用百分比設(shè)置寬參照父元素寬夜惭；
使用百分比設(shè)置高參照父元素高姻灶；
使用百分比設(shè)置字體大小參照默認(rèn)字體大小（默認(rèn)字體大小的順序：父元素字體大小、祖先元素字體大小诈茧、都未設(shè)置則按16px）产喉。
width:150%;/* 父元素寬度的150% */
height:20%;/* 父元素高度的20% */
font-size: 200%;/* 如果父元素設(shè)置了字體大小，則為父元素字體大小的200%敢会；如果父元素沒設(shè)置曾沈，祖先元素設(shè)置了，則為祖先元素字體大小的200%鸥昏；如果沒有任何地方設(shè)置過字體大小塞俱，則為16px的的200%，即32px */
2 顏色設(shè)置方式
2.1 顏色名方式
使用顏色的英文名表示顏色
background-color:yellow;
2.2 rgb 方式
使用0255的數(shù)字或0%100%的百分比設(shè)置該顏色中紅吏垮、綠障涯、藍(lán)的比例，以表示顏色
r red 紅色 取值范圍：0~255 或者 0%~100%
g green 綠色 取值范圍：0~255 或者 0%~100%
b blue 藍(lán)色 取值范圍：0~255 或者 0%~100%
background-color:rgb(255,0,0);/* 紅 */
background-color:rgb(0,255,0);/* 綠 */
background-color:rgb(0,0,255);/* 藍(lán) */
background-color:rgb(0,0,0);/* 黑 */
background-color:rgb(100,100,100);/* 灰惫皱，3個(gè)數(shù)相同為灰色像樊，數(shù)字越大灰色越淺尤莺，數(shù)字越小灰色越深 */
background-color:rgb(255,255,255);/* 白 */
/* 使用百分比表示 */
background-color:rgb(100%,80%,40%);
2.3 十六進(jìn)制方式
原理同 rgb 方式旅敷，但用十六進(jìn)制數(shù)來代替rgb中的數(shù)字。兩個(gè)十六進(jìn)制的數(shù)字表示一個(gè)顏色颤霎，共需6個(gè)十六進(jìn)制的數(shù)字媳谁。每組的取值范圍是 00 ~ ff。
#rrggbb;
#rgb;/* 簡寫友酱，如果每組中表示顏色的兩個(gè)數(shù)字是一樣晴音，則可以簡寫為3個(gè)十六進(jìn)制數(shù)字來表示 */
background-color:#ff0000;/* 紅 */
background-color:#00ff00;/* 綠 */
background-color:#0000ff;/* 藍(lán) */
/* 16進(jìn)制表示顏色的簡寫 */
background-color: #f90;/* #ff9900 */
background-color: #ff19a0;/* 無法簡寫 */
background-color: #ccc;/* #cccccc */
2 選擇器
2.1 四種基本選擇器
- 優(yōu)先級(jí)：style 行內(nèi)式 > ID選擇器 > 類名選擇器 > 標(biāo)簽名選擇器 > 全局選擇器
- 若優(yōu)先級(jí)一致，則后面的覆蓋前面的缔杉。
① 標(biāo)簽名（元素名）選擇器
標(biāo)簽名 {
}
② 類名選擇器
- 不同的元素可以設(shè)置相同類名锤躁，以達(dá)到給不同元素設(shè)置相同樣式的效果
- 一個(gè)元素可以有多個(gè)類名
.類名 {
}
③ ID選擇器
每個(gè)元素的 id 應(yīng)是唯一的。
#ID名 {
}
④ 全局選擇器
可選中所有的元素或详，包括 html 系羞、body郭计。
* {
}
3 盒子模型
3.1 盒子模型的顯示模式
① 塊級(jí)（block）元素
顯示模式為塊級(jí)的元素稱之為塊級(jí)元素， 特點(diǎn)如下：
1. 塊級(jí)元素獨(dú)占一行椒振。
2. 塊級(jí)元素可以設(shè)置寬高昭伸。
② 行內(nèi) （inline）元素
顯示模式為行內(nèi)的元素稱之為行內(nèi)元素， 特點(diǎn)如下：
1. 行內(nèi)元素不獨(dú)占一行澎迎。
2. 行內(nèi)元素?zé)o法設(shè)置寬高庐杨，不能用于頁面布局。
③ 行內(nèi)塊（inline-block）元素
顯示模式為行內(nèi)塊的元素稱之為行內(nèi)塊級(jí)元素夹供， 特點(diǎn)如下：
1. 行內(nèi)塊元素不獨(dú)占一行灵份。
2. 行內(nèi)塊元素可以設(shè)置寬高。
3.2 HTML 元素的默認(rèn)顯示模式
① 塊級(jí)元素
格式排版標(biāo)簽罩引、列表標(biāo)簽各吨、表格標(biāo)簽（除th和td）、form 標(biāo)簽袁铐、option
h1~h6揭蜒、p、hr剔桨、br屉更、pre、div洒缀、ul瑰谜、ol、li树绩、dl萨脑、dt、dd饺饭、table渤早、caption、thead瘫俊、tbody鹊杖、tfoot、tr扛芽、form骂蓖、option
② 行內(nèi)元素
文本標(biāo)簽、a 標(biāo)簽川尖、span 標(biāo)簽登下、label 標(biāo)簽
em、strong、del被芳、ins银酬、sup、sub筐钟、a揩瞪、span、label
③ 行內(nèi)塊元素
圖片標(biāo)簽篓冲、th和td李破、表單標(biāo)簽（除form和option）、iframe 標(biāo)簽
img壹将、th嗤攻、td、input诽俯、button妇菱、textarea、select暴区、iframe
3.3 修改元素的顯示模式
CSS屬性display ：設(shè)置元素的顯示模式闯团，值為：
block 設(shè)置為塊級(jí)顯示模式
inline 設(shè)置為行內(nèi)顯示模式
inline-block 設(shè)置為行內(nèi)塊顯示模式
none 隱藏元素，不顯示（可用于子菜單的顯示）
4 常用 CSS 屬性
4.1 字體屬性
| 屬性名 | 作用 | 屬性值 |
|---|---|---|
| font-family | 設(shè)置字體族科 | 字體名稱仙粱、字體列表 |
| font-size | 設(shè)置字體大小 | 長度 |
| font-weight | 設(shè)置字體粗細(xì) | ①用關(guān)鍵字 normal：正常（默認(rèn)） bold：粗體字 lighter：細(xì)體字 ②用 100 ~ 900 的整百數(shù)字 600~900：粗體字 400房交、500：正常 100~300：細(xì)體字 |
| font-style | 設(shè)置字體風(fēng)格 |
normal： 正常（默認(rèn)） italic： 斜體字 |
| font | 復(fù)合屬性 | 可設(shè)多個(gè)值，每個(gè)值之間用空格隔開伐割。至少有字體大小和字體族科兩個(gè)值候味，且始終寫在最后，其他值寫在前面隔心，無順序要求白群。 |
-
字體族科 font-family：
/* 設(shè)置單個(gè)字體族科 font-family */ font-family:"宋體"; /* 設(shè)置字體列表 font-family */ /* 可設(shè)置一個(gè)或多個(gè)字體族科，如果客戶電腦上沒有前面的字體硬霍，可使用后面指定的字體帜慢，各個(gè)字體族科用逗號(hào)隔開 */ font-family:"宋體", arial, 微軟雅黑, "Microsoft YaHei";注意：
字體能否顯示取決于打開該網(wǎng)頁的電腦是否安裝該字體；
字體可以分為襯線字體和非襯線字體兩大類：
襯線字體： serif 须尚，筆畫粗細(xì)不一致崖堤，如：宋體侍咱、楷體耐床、仿宋 等
非襯線字體： sans-serif，筆畫粗細(xì)一致楔脯，如：微軟雅黑撩轰、黑體、思源黑體、蘭亭黑體等
-
復(fù)合屬性 font：
font 是 font-family堪嫂、font-size偎箫、font-weight、font-style 的復(fù)合屬性皆串，line-height 也是 font 的子屬性淹办；
可設(shè)多個(gè)值，每個(gè)值之間用空格隔開恶复。至少有字體大小和字體族科兩個(gè)值怜森，且始終寫在最后，其他值寫在前面谤牡，無順序要求副硅。
/* font 復(fù)合屬性至少要設(shè)置兩個(gè)：字體大小和字體族科 */ font:20px "宋體","黑體",serif; /* 設(shè)置字體粗細(xì)、字體大小翅萤、字體族科 */ font:700 20px "宋體","黑體",serif; /* 設(shè)置字體風(fēng)格恐疲、字體大小、字體族科 */ font:italic 10px "宋體","黑體",serif; /* 設(shè)置字體粗細(xì)套么、字體風(fēng)格培己、字體大小、字體族科 */ font:700 italic 10px "宋體","黑體",serif; /* 設(shè)置字體風(fēng)格胚泌、字體粗細(xì)漱凝、字體大小、字體族科 */ font:italic 700 10px "宋體","黑體",serif;
4.2 文字顏色
| 屬性名 | 作用 | 屬性值 |
|---|---|---|
| color | 設(shè)置文字顏色 | 顏色 |
4.3 文本屬性
| 屬性名 | 作用 | 屬性值 |
|---|---|---|
| letter-spacing | 設(shè)置字母間距 | 長度 |
| word-spacing | 設(shè)置單詞間距 | 長度 |
| text-decoration | 文本修飾 |
none：無修飾效果诸迟。（最常用茸炒，除超鏈接默認(rèn)下劃線外，none是大部分元素的默認(rèn)值阵苇，因此可用 none 來取消超鏈接的下劃線） underline：下劃線壁公。 overline：上劃線。 line-through：刪除線绅项。 |
| text-indent | 首行縮進(jìn) | 長度 |
| text-align | 設(shè)置文本在元素中的水平對(duì)齊方式 |
left： 靠左對(duì)齊紊册。 right：靠右對(duì)齊。 center： 居中對(duì)齊快耿。 |
| vertical-align | 設(shè)置沿基線的對(duì)齊方式 |
baseline： 沿基線對(duì)齊囊陡。 top：沿頂線對(duì)齊。 bottom：沿底線對(duì)齊掀亥。 middle：沿中線對(duì)齊撞反。 設(shè)置長度，表示與基線的距離搪花，允許正負(fù)值遏片。 |
| line-height | 設(shè)置行高 | 長度 |
-
vertical-align
使用場景：
- 用于給行內(nèi)元素或者行內(nèi)塊元素設(shè)置與同行文本的對(duì)齊方式（該屬性一定要設(shè)置到行內(nèi)或行內(nèi)塊元素）
- 設(shè)置表格單元格中內(nèi)容垂直對(duì)齊方式嘹害。
-
line-height
1、行高：本行文本與上一行文本的中線（頂線/基線/底線）之間的距離吮便。
行距：上一行文本底線與本行文本頂線之間的距離笔呀。 設(shè)置行高會(huì)對(duì)行距產(chǎn)生影響。2髓需、設(shè)置文本在元素中垂直居中：設(shè)置元素的行高=元素高度值（適用于只有一行文本內(nèi)容的情況）许师。
3、子屬性和復(fù)合屬性會(huì)相互覆蓋僚匆，復(fù)合屬性寫后面會(huì)覆蓋前面的子屬性枯跑，子屬性寫后面會(huì)覆蓋前面的復(fù)合屬性中對(duì)應(yīng)的部分。
4白热、line-height 是 font 的子屬性敛助，寫在字體大小的后面：
/* line-height 可以復(fù)合 font 屬性中 */ /* font 復(fù)合屬性寫在后面會(huì)覆蓋前面單獨(dú)設(shè)置的 line-height */ font: 20px/100px "翩翩體-簡";
