A我學(xué)習(xí)到了什么捌浩？
1溫習(xí)day01的知識(shí)點(diǎn)
盒子模型：
margin外邊距起宽，border邊框豫尽，padding內(nèi)框的直接畫面調(diào)節(jié)
樣式重置：開發(fā)環(huán)境中的默認(rèn)值
如：*｛margin：0箩溃；padding：0紧帕；｝
水平居中：
margin-left:auto;
margin-right:auto;
僅限是塊標(biāo)簽的水平居中
常用HTML語義化：
div：//塊元素区赵，
p：//段落,
h1~h6：標(biāo)題,
img//圖片項(xiàng),
input//對(duì)話框,
a//鏈接,
button//按鍵
套標(biāo)簽：
ul：無序列表挖滤，
li：列表描述;
dl:定義段，
dt：定義描述父款，
dd定義稱述
<ul>
<li></li>
</ul>
<dl>
<dt></dt>
<dd></dd>
</dl>
常用CSS的樣式：
background-color：背景顏色溢谤；
background-image:背景圖片；
color：顏色憨攒；
width：寬度世杀；
herght：高度；
line-herght:行高肝集；
text-aline：文本對(duì)齊方向瞻坝；
border-width：邊框?qū)挾龋?border-style:邊框樣式；
border-color:邊框顏色杏瞻；
p:hover{color:red;}光標(biāo)移動(dòng)到元素變色所刀；
CSS常用選擇器：
p{},元素選擇器衙荐；
class選擇器：.text{};
id:選擇器；
偽選擇器：p:hover浮创；
重要選擇器：忧吟！importinent；
//他們比較級(jí)的大小
//元素<class<id<!importinent
2拓展HTML標(biāo)簽的分類
塊標(biāo)簽：特點(diǎn)是獨(dú)占一行斩披，設(shè)置寬高
div,h1~h6,p,ul,li,dl,dt,dd
默認(rèn)樣式【display:block;】
內(nèi)聯(lián)標(biāo)簽：特點(diǎn)是并排顯示溜族，不能設(shè)置寬高
不能設(shè)置margin-top,margin-bottom
如：a,span,em,strong
默認(rèn)樣式【display:inline;】
內(nèi)聯(lián)塊:特點(diǎn)是并排顯示，可以設(shè)置寬高
button,img,input
默認(rèn)樣式【display:inline-block;】
讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
display:block;//以改變默認(rèn)樣式進(jìn)行
margin-left:auto;
margin-right:auto;//僅限塊標(biāo)簽
給父級(jí)加text-align:center//僅限內(nèi)聯(lián)塊標(biāo)簽
3CSS選擇器
分組選擇器：
p,h4雏掠，~{background:gray}//可以設(shè)置標(biāo)簽屬性的樣式
后代選擇器：
div>span{} //選取div所有子元素為span的標(biāo)簽
div span{} //選取div之后的所有span元素
//可以設(shè)置標(biāo)簽屬性的樣式
兄弟選擇器:
div+p{}選取緊鄰div之后的第一個(gè)兄弟元素//僅限下個(gè)元素指定的元素
//div+h3+p可以跳過指定
div~p{}選取緊鄰div之后的所有兄弟元素
//可以設(shè)置標(biāo)簽屬性的樣式
偽類選擇器：
div:hover{}//光標(biāo)移動(dòng)到改變
input:focus{}//光標(biāo)聚焦到改變
//可以設(shè)置標(biāo)簽屬性的樣式
偽元素：
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
p:before{
content:''//可以不寫斩祭，但是必寫語句
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
content:''//可以不寫乡话，但是必寫語句
}
//可以設(shè)置標(biāo)簽屬性的樣式
屬性選擇：
div[class='test']{}
//區(qū)分特定的標(biāo)簽以及文件
B我掌握到了什么
1溫習(xí)day01的知識(shí)點(diǎn)
盒子模型：
margin外邊距摧玫，border邊框，padding內(nèi)框的直接畫面調(diào)節(jié)
樣式重置：開發(fā)環(huán)境中的默認(rèn)值
如：*｛margin：0绑青；padding：0诬像；｝
水平居中：
margin-left:auto;
margin-right:auto;
僅限是塊標(biāo)簽的水平居中
常用HTML語義化：
div：//塊元素，
p：//段落,
h1~h6：標(biāo)題,
img//圖片項(xiàng),
input//對(duì)話框,
a//鏈接,
button//按鍵
套標(biāo)簽：
ul：無序列表闸婴，
li：列表描述;
dl:定義段坏挠，
dt：定義描述，
dd定義稱述
<ul>
<li></li>
</ul>
<dl>
<dt></dt>
<dd></dd>
</dl>
常用CSS的樣式：
background-color：背景顏色邪乍；
background-image:背景圖片降狠；
color：顏色；
width：寬度庇楞；
herght：高度榜配；
line-herght:行高；
text-aline：文本對(duì)齊方向吕晌；
border-width：邊框?qū)挾龋?border-style:邊框樣式蛋褥；
border-color:邊框顏色；
p:hover{color:red;}光標(biāo)移動(dòng)到元素變色睛驳；
CSS常用選擇器：
p{},元素選擇器烙心；
class選擇器：.text{};
id:選擇器；
偽選擇器：p:hover乏沸；
重要選擇器：淫茵！importinent；
2拓展HTML標(biāo)簽的分類
塊標(biāo)簽：特點(diǎn)是獨(dú)占一行屎蜓，設(shè)置寬高
div,h1~h6,p,ul,li,dl,dt,dd
默認(rèn)樣式【display:block;】
內(nèi)聯(lián)標(biāo)簽：特點(diǎn)是并排顯示痘昌，不能設(shè)置寬高
不能設(shè)置margin-top,margin-bottom
如：a,span,em,strong
默認(rèn)樣式【display:inline;】
內(nèi)聯(lián)塊:特點(diǎn)是并排顯示，可以設(shè)置寬高
button,img,input
默認(rèn)樣式【display:inline-block;】
讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
display:block;//以改變默認(rèn)樣式進(jìn)行
margin-left:auto;
margin-right:auto;//僅限塊標(biāo)簽
給父級(jí)加text-align:center//僅限內(nèi)聯(lián)塊標(biāo)簽
3CSS選擇器
分組選擇器：
p,h4炬转，~{background:gray}//可以設(shè)置標(biāo)簽屬性的樣式
后代選擇器：
div>span{} //選取div所有子元素為span的標(biāo)簽
div span{} //選取div之后的所有span元素
偽類選擇器：
div:hover{}//光標(biāo)移動(dòng)到改變
input:focus{}//光標(biāo)聚焦到改變
//可以設(shè)置標(biāo)簽屬性的樣式
偽元素：
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
p:before{
content:''//可以不寫辆苔，但是必寫語句
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
content:''//可以不寫扼劈，但是必寫語句
}
//可以設(shè)置標(biāo)簽屬性的樣式
屬性選擇：
div[class='test']{}
//區(qū)分特定的標(biāo)簽以及文件
C我沒有掌握的
兄弟選擇器:
div+p{}選取緊鄰div之后的第一個(gè)兄弟元素//僅限下個(gè)元素指定的元素
//div+h3+p可以跳過指定
div~p{}選取緊鄰div之后的所有兄弟元素
//可以設(shè)置標(biāo)簽屬性的樣式
兄弟選擇器驻啤，后代選擇器還是不怎么熟練，可能要多接觸
QQ圖片20170913194942.jpg
QQ圖片20170913193305.png
