概念
CSS指層疊樣式表(級(jí)聯(lián)樣式表)，作用是用來(lái)美化html標(biāo)簽
書寫位置
<head>
<style type="text/css">
//樣式代碼
</style>
</head>
選擇器
選擇器是一個(gè)選擇誰(shuí)的過(guò)程
- 基礎(chǔ)選擇器
- 標(biāo)簽選擇器
標(biāo)簽{
屬性:值;
}
- 類選擇器
.自定義類名{
屬性:值;
}
特點(diǎn)：誰(shuí)調(diào)用，誰(shuí)生效
一個(gè)標(biāo)簽可以多個(gè)類選擇器
多個(gè)標(biāo)簽可以調(diào)用同一個(gè)類選擇器
命名規(guī)則：不能用純數(shù)字或者數(shù)字開頭來(lái)定義類名
不能使用特殊符號(hào)（_除外）來(lái)定義類名
不推薦使用漢字來(lái)定義類名
不推薦使用標(biāo)簽名，屬性值，屬性來(lái)定義
- id選擇器
#自定義類名{
屬性:值;
}
特點(diǎn)：誰(shuí)調(diào)用，誰(shuí)生效
一個(gè)標(biāo)簽只能調(diào)用一個(gè)id選擇器
一個(gè)id選擇器在一個(gè)頁(yè)面只能調(diào)用一次
- 通配符
*{
屬性:值;
}
- 復(fù)合選擇器
- 交集選擇器
標(biāo)簽+類/id選擇器{
屬性:值;
}
特點(diǎn)：既是某個(gè)標(biāo)簽氓鄙，而且這個(gè)標(biāo)簽調(diào)用了類／id選擇器
- 后代選擇器
選擇器+空格+選擇器{
屬性:值;
}
后代選擇器的基本要求：包含/嵌套關(guān)系
特點(diǎn)：父在前，子在后
無(wú)限制隔代
只要能代表這個(gè)標(biāo)簽业舍，可以是標(biāo)簽選擇器抖拦，類選擇器，id選擇器自由組合
- 子代選擇器
選擇器>選擇器{
屬性:值;
}
特點(diǎn)：選擇的是直接下一代
- 并集選擇器
選擇器,選擇器,選擇器{
屬性:值;
}
文本元素
屬性
1.1 font-size：文字大小
1.2 font-weight ：文字粗細(xì) 100-900 其中700為加粗舷暮；不推薦使用font-weight:bold态罪；
1.3 font-family：文字字體，如微軟雅黑
1.4 font-style：文字樣式下面，normal正常（默認(rèn)）复颈，italic斜體
1.5 line-height：行高
1.6 color：文本顏色（前景色）
1.7 background-color：背景色
1.8 text-align：內(nèi)容的水平對(duì)齊方式，圖片也適用沥割，left／right／center
1.9 text-indent：首行縮進(jìn)券膀，通常為2em文本屬性連寫
font:italic 700 16px/40px 微軟雅黑;(最好按照這個(gè)順序書寫屬性值，其中連寫時(shí)font-size和font-family必寫)font-family的表達(dá)方式
1.直接寫中文名稱驯遇，如微軟雅黑,宋體，黑體
2.寫字體的英文名稱蓄髓，如microsoft yahei叉庐，SimSun,SimHei
3.unicode編碼,如/5FAE/8F6F/96C5/9ED1,/5B8B/4F53,/9ED1/4F53，獲取方法為在console面板中輸入escape("XXX")即可獲取会喝，把獲取到的值中’%u‘改為’／‘
樣式表書寫位置
- 內(nèi)嵌式寫法
<head>
<style type='text/css'>
樣式表內(nèi)容
<style>
</head>
- 外鏈?zhǔn)綄懛?/li>
<head>
<link rel='stylesheet' href='css文件路徑'>
</head>
行內(nèi)樣式表
如<p style='color:red;font-size:20px;'>...</p>三種寫法特點(diǎn)：
內(nèi)嵌式樣式：只作用于當(dāng)前文件陡叠，沒有真正實(shí)現(xiàn)結(jié)構(gòu)表現(xiàn)分離；
外鏈?zhǔn)綄懛ǎ鹤饔梅秶钱?dāng)前站點(diǎn)肢执，范圍廣枉阵，真正實(shí)現(xiàn)了結(jié)構(gòu)表現(xiàn)分離；
行內(nèi)樣式表：作用范圍僅限于當(dāng)前標(biāo)簽预茄，范圍小兴溜，結(jié)構(gòu)表現(xiàn)混在一起，不推薦使用耻陕。
標(biāo)簽分類（顯示方式）
塊元素
典型代表：div拙徽，h1-h6，p诗宣，ul膘怕，li
特點(diǎn)：獨(dú)占一行；可以設(shè)置寬高召庞；嵌套（包含）下岛心，子塊元素寬度（沒有定義的情況下）和父塊元素寬度默認(rèn)一致来破。行內(nèi)元素
典型代表：span，a忘古，strong徘禁，em，del存皂，ins
特點(diǎn)：在一行上顯示晌坤；不能直接定義寬高；寬高默認(rèn)根據(jù)內(nèi)容撐開行內(nèi)塊元素（內(nèi)聯(lián)元素）
典型代表：img旦袋，input
特點(diǎn)：在一行上顯示骤菠；可以設(shè)置寬高塊元素轉(zhuǎn)行內(nèi)元素：
display：inline;不能再設(shè)置寬高行內(nèi)元素轉(zhuǎn)塊元素：
display：block;可以設(shè)置寬高塊和行內(nèi)元素轉(zhuǎn)行內(nèi)塊元素：
display：inline-block;在一行上顯示并且可以設(shè)置寬高
css三大特性：
- 層疊性
當(dāng)多個(gè)樣式作用于同一個(gè)（同一類）標(biāo)簽時(shí)，樣式發(fā)生了沖突疤孕，總是執(zhí)行寫在下面的樣式 - 繼承性
繼承性發(fā)生的前提是包含（嵌套）關(guān)系
文字顏色商乎，文字大小，字體祭阀，文字粗細(xì)吸奴，文字樣式堡妒，行高可以繼承，即文字的所有屬性都可以繼承
特殊情況：
h系列不能繼承文字大小，
a標(biāo)簽不能繼承文字顏色 - 優(yōu)先級(jí)
默認(rèn)樣式<標(biāo)簽選擇器<類選擇器<id選擇器<行內(nèi)樣式<!important
==>>0<1<10<100<1000<1000以上
優(yōu)先級(jí)的特點(diǎn)
1.繼承的權(quán)重為0
2.權(quán)重會(huì)疊加
鏈接偽類
a:link{屬性:值;}<==>a{屬性:值;}效果是一樣的井辜，鏈接的默認(rèn)狀態(tài)
a:visited{屬性:值;} 鏈接訪問之后的狀態(tài)
a:hover{屬性:值;}鼠標(biāo)放到鏈接上顯示的狀態(tài)
a:active{屬性:值;}鏈接激活的狀態(tài)，即鼠標(biāo)放著不松手
:focus{屬性:值;}獲取焦點(diǎn)
label for id(獲取光標(biāo)焦點(diǎn))
<label for="...">***</label><input type='text' id='...'>
注意：如果四個(gè)鏈接偽類都使用灾搏，按順序書寫疼鸟。
文本修飾
text-decoration 默認(rèn)為none，下劃線underline 柏蘑，刪除線line-through
背景屬性
- background-color 背景顏色
- background-image 背景圖片url("")
- background-repeat 背景平鋪 no-repeat／repeat（默認(rèn)）／repeat-x／repeat-y
- background-position背景定位left／right／center／top／bottom
當(dāng)方位值只寫一個(gè)的時(shí)候幸冻，另外一個(gè)值默認(rèn)居中；
當(dāng)寫兩個(gè)方位值的時(shí)候咳焚，順序沒有要求
寫兩個(gè)具體值的時(shí)候洽损，如20px 30px，第一個(gè)值代表水平方向距左邊框的距離革半，第二個(gè)值代表垂直方向距上邊框的距離 - background-attachment 背景是否滾動(dòng)scroll （默認(rèn)）／fixed
如果為fixed碑定，position是相對(duì)瀏覽器的；如果為scrol又官，position是相對(duì)父標(biāo)簽的
背景屬性的連寫
background:red url("") no-repeat bottom fixed;
連寫的時(shí)候沒有順序要求不傅，url為必寫項(xiàng)
行高
瀏覽器默認(rèn)文字大小：16px
行高：基線與基線之間的距離即文字高度?上下邊距
基線：一段文字內(nèi)容中底部最高的底線
下邊距：文本盒子的最下面
上邊距：文本盒子的最上面
頂線：文字內(nèi)容的最上面
底線：文字內(nèi)容的最下面
一行文字行高和父元素高度一致時(shí)赏胚，垂直居中顯示
行高的單位
| 行高單位 | 文字大小 | 行高值 |
|---|---|---|
| px | 20px | 20px |
| em | 20px | 40px |
| % | 20px | 30px |
| 2 | 20px | 40px |
總結(jié)：
單位除了像素以外访娶，其余單位情況下行高都是與文字大小乘積
| 父元素行高單位 | 父元素文字大小 | 子元素文字大小 | 子盒子行高值 |
|---|---|---|---|
| 40px | 20px | 30px | 40px |
| 2em | 20px | 30px | 40px |
| 150% | 20px | 30px | 30px |
| 2 | 20px | 30px | 60px |
總結(jié)：
不帶單位時(shí)，行高是和子元素文字大小相乘觉阅，em和%的行高是和父元素文字大小相乘崖疤，行高以像素為單位秘车，就是定義的行高值
推薦行高使用像素為單位
盒子模型
作用：頁(yè)面布局
border：邊框
border-top-style線型solid（實(shí)線）／dotted（點(diǎn)線）／dashed（虛線）
border-top-color線的顏色
border-top-width線的寬度
border-top：5px solid red；（連寫特點(diǎn)：無(wú)順序要求,但是線型不能少）
border：5px solid red劫哼；
border：0 none叮趴；（input標(biāo)簽去除原始邊框）
outline-style：none；（input focus狀態(tài)時(shí)去除輪廓線）padding：內(nèi)邊距
padding-left／padding-right／padding-top／padding-bottom
連寫：padding：20px权烧；上下左右都是20px眯亦；
padding：20px 30px；上下20px般码，左右30px妻率；
padding：10px 20px 30px；上10px 板祝，左右20px宫静，下30px；
padding：10px 20px 30px 40px券时；上10px 右20px 下30px 左40px孤里；
內(nèi)邊距影響盒子大小：
內(nèi)邊距會(huì)撐大盒子橘洞，會(huì)影響盒子的寬度margin：外邊距捌袜，盒子和盒子之間的距離
margin-left/margin-right／margin-top／margin-bottom
連寫：margin：20px；上下左右都是20px炸枣；
margin：20px 30px琢蛤；上下20px，左右30px抛虏；
margin：10px 20px 30px；上10px 套才，左右20px迂猴，下30px；
margin：10px 20px 30px 40px背伴；上10px 右20px 下30px 左40px沸毁；垂直方向外邊距合并：
垂直方向的兩個(gè)盒子，如果都設(shè)置了垂直方向外邊距傻寂，取得是設(shè)置的比較大的值息尺。外邊距塌陷
嵌套的盒子，直接給子盒子設(shè)置垂直方向的外邊距疾掰，會(huì)發(fā)生外邊距塌陷
解決方法：
1.給父盒子設(shè)置邊框（不推薦使用）
2.給父盒子設(shè)置overflow：hidden搂誉；（bfc ：格式化上下文）
-
盒子的寬度=定義的寬度+左右邊框的寬度+左右內(nèi)邊距的寬度。
嵌套／包含的盒子如果子盒子沒有定義寬度静檬，給子盒子設(shè)置左右內(nèi)邊距且內(nèi)邊距小于父盒子的寬度炭懊，不會(huì)撐大盒子并级，但是如果左右內(nèi)邊距大于父盒子寬度，不會(huì)撐大盒子侮腹，自己會(huì)變大
邊框合并（table的屬性）
border-collapse：collapse嘲碧；
行內(nèi)元素可以定義左右的內(nèi)外邊距，上下會(huì)被忽略（不起作用）父阻。
行內(nèi)塊可以定義內(nèi)外邊距愈涩。
文檔流（標(biāo)準(zhǔn)流）
元素自上而下，自左而右加矛。塊元素獨(dú)占一行履婉，行內(nèi)元素在一行上顯示，碰到父元素的邊框換行
浮動(dòng)布局
float： left／right;
特點(diǎn)：
1.元素浮動(dòng)之后不占據(jù)原來(lái)的位置（脫標(biāo)）荒椭；
2.浮動(dòng)的盒子在一行顯示谐鼎；
3.行內(nèi)元素浮動(dòng)之后轉(zhuǎn)為行內(nèi)塊元素（不建議使用，因?yàn)槊摌?biāo)了趣惠，最好使用display）浮動(dòng)的作用
1.文本繞圖
2.制作導(dǎo)航
3.網(wǎng)頁(yè)布局清除浮動(dòng)
1.當(dāng)父盒子沒有定義高度狸棍，嵌套的盒子浮動(dòng)之后，下邊的元素發(fā)生未知錯(cuò)誤味悄，會(huì)頂上去草戈；
2.清除浮動(dòng)不是不用浮動(dòng)，而是清除浮動(dòng)產(chǎn)生的不好的影響侍瑟；
3.清除浮動(dòng)的方法：
clear：left／right／both
工作中最常用的是clear：both唐片；
3.1 額外標(biāo)簽法：在最后一個(gè)浮動(dòng)元素后添加標(biāo)簽（不推薦使用，因?yàn)樾枰砑雍芏囝~外的標(biāo)簽）
如<div style=“clear：both涨颜；”></div>
3.2 給父級(jí)元素使用格式化上下文：overflow：hidden费韭；（不推薦使用，因?yàn)楫?dāng)如果有內(nèi)容在盒子之外就會(huì)被剪裁庭瑰，不能使用）
3.3 給浮動(dòng)元素的父元素添加偽元素清除浮動(dòng)
.clearfix:after{
content:"."／" ";
display :block;
height：0星持；
line-height：0；
visibility:hidden;
clear：both弹灭；
}
//為了兼容ie瀏覽器督暂，加上以下代碼
.clearfix{
zoom:1;
}
css初始化
為了考慮到瀏覽器的兼容問題，其實(shí)不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的穷吮，如果沒有對(duì)css初始化逻翁，往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面差異。
- overflow：
1.visible（默認(rèn)捡鱼，內(nèi)容不會(huì)被修剪八回，內(nèi)容會(huì)呈現(xiàn)在元素框之外）
2.hidden（元素框之外的會(huì)被修剪）
3.scroll（超出的內(nèi)容被藏起來(lái)，需要滾動(dòng)顯示，不管有沒有超出辽社，都會(huì)顯示滾動(dòng)條）
4.auto（內(nèi)容超出s才會(huì)顯示滾動(dòng)條伟墙，反之不會(huì)）
定位
position
- 靜態(tài)定位
position：static；：（默認(rèn)滴铅，就是文檔流／標(biāo)準(zhǔn)流）
方向left／right／top／bottom
如left：100px戳葵； - 絕對(duì)定位
position：absolute；
特點(diǎn)：
1.元素使用絕對(duì)定位之后汉匙，不占據(jù)原來(lái)的位置（脫標(biāo)）拱烁；
2.元素使用絕對(duì)定位，位置從瀏覽器出發(fā)噩翠；
3.嵌套的盒子戏自，父盒子沒有使用定位，子盒子絕對(duì)定位伤锚，子盒子的位置從瀏覽器出發(fā)擅笔；
4.嵌套的盒子，父盒子子盒子都使用了絕對(duì)定位屯援，子盒子的位置從父盒子出發(fā)猛们；
5.給行內(nèi)元素使用了絕對(duì)定位，會(huì)變成行內(nèi)塊元素（不推薦使用狞洋，最好使用display：inline-block弯淘；）
z-index:調(diào)整元素的層疊順序，默認(rèn)值0-999吉懊，值越大庐橙，元素越在上面 - 相對(duì)定位
position：relative；
特點(diǎn)：
1.使用相對(duì)定位借嗽，位置從自身出發(fā)态鳖；
2.沒有脫標(biāo)，還占據(jù)原來(lái)的位置恶导；
3.??子絕父相（父元素相對(duì)定位浆竭，子元素絕對(duì)定位，不使用父元素絕對(duì)定位是因?yàn)楦冈貢?huì)脫標(biāo)甲锡，下面的元素會(huì)頂上去），子元素的位置會(huì)從父元素出發(fā)羽戒；4.行內(nèi)元素使用相對(duì)定位不能轉(zhuǎn)成行內(nèi)塊元素缤沦。 - 固定定位
position:fixed;
特點(diǎn)：
1.固定定位之后，不占據(jù)原來(lái)的位置易稠，會(huì)脫標(biāo)缸废；
2.元素使用固定定位之后，位置從瀏覽器出發(fā)；
3.行內(nèi)元素使用固定定位之后會(huì)變成行內(nèi)塊元素（不推薦使用企量，因?yàn)闀?huì)脫標(biāo)测萎，最好使用display：inline-block；）届巩。
定位的盒子居中顯示
1.margin：0 auto硅瞧；只能讓標(biāo)準(zhǔn)流的盒子居中；
2.定位的盒子居中（脫標(biāo)）恕汇，先向右走父元素盒子的一半腕唧，再向左走子盒子寬度的一半
left：50%；
margin-left：-width／2.0px瘾英；//(當(dāng)前元素寬度的一半枣接，向右為正數(shù)，向左為負(fù)）
標(biāo)簽包含規(guī)范
1.div可以包含所有的標(biāo)簽
2.p標(biāo)簽不能包含div缺谴，h1-h6等塊標(biāo)簽
3.h1可以包含p但惶，div等標(biāo)簽
4.行內(nèi)元素盡量包含/嵌套行內(nèi)元素
5.行內(nèi)元素不要包含塊元素
規(guī)避脫標(biāo)流
1.盡量使用標(biāo)準(zhǔn)流
margin-left：auto；將盒子左側(cè)充滿湿蛔，代替浮動(dòng)float：right膀曾；
2.標(biāo)準(zhǔn)流解決不了的時(shí)候用浮動(dòng)
3.浮動(dòng)解決不了用定位
圖片和文字垂直居中對(duì)齊
vertical-align對(duì)inline-block效果最好，默認(rèn)屬性是vertical-align：baseline煌集；
給圖片設(shè)置vertical-align：middle妓肢；可以讓圖片和文字垂直對(duì)齊；
vertical-align的其余值：top／bottom等
css可見性
overflow：hidden苫纤；溢出隱藏
visibility：hidden碉钠；隱藏元素，但是還占據(jù)原來(lái)的位置
display：none卷拘；隱藏元素喊废，不占用原來(lái)的位置
display：block；元素可見
display：none／block常配合js使用
css之內(nèi)容移除（寫了文字但是又不需要被看見栗弟，網(wǎng)頁(yè)優(yōu)化）
1.使用text-indent污筷，如
a{
display:inline-block;
text-indent:-5000em;
}
2.使用overflow：hidden，如
div{
width:300px;
height:0px;
padding-top:100px;
over-flow:hidden;
}
css精靈圖
屬性選擇器
如input[type=text][class]
emmet語(yǔ)法（插件）
