A我學習到了什么？
1溫習day01的知識點
盒子模型：
margin外邊距，border邊框，padding內(nèi)框的直接畫面調(diào)節(jié)
樣式重置：開發(fā)環(huán)境中的默認值
如：*｛margin：0；padding：0；｝
水平居中：
margin-left:auto;
margin-right:auto;
僅限是塊標簽的水平居中
常用HTML語義化：
div：//塊元素，
p：//段落,
h1~h6：標題,
img//圖片項,
input//對話框,
a//鏈接,
button//按鍵
套標簽：
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：文本對齊方向；
border-width：邊框?qū)挾龋?border-style:邊框樣式；
border-color:邊框顏色；
p:hover{color:red;}光標移動到元素變色；
CSS常用選擇器：
p{},元素選擇器；
class選擇器：.text{};
id:選擇器；
偽選擇器：p:hover；
重要選擇器：！importinent；
//他們比較級的大小
//元素<class<id<!importinent
2拓展HTML標簽的分類
塊標簽：特點是獨占一行，設(shè)置寬高
div,h1~h6,p,ul,li,dl,dt,dd
默認樣式【display:block;】
內(nèi)聯(lián)標簽：特點是并排顯示，不能設(shè)置寬高
不能設(shè)置margin-top,margin-bottom
如：a,span,em,strong
默認樣式【display:inline;】
內(nèi)聯(lián)塊:特點是并排顯示，可以設(shè)置寬高
button,img,input
默認樣式【display:inline-block;】
讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
display:block;//以改變默認樣式進行
margin-left:auto;
margin-right:auto;//僅限塊標簽
給父級加text-align:center//僅限內(nèi)聯(lián)塊標簽
3CSS選擇器
分組選擇器：
p,h4，~{background:gray}//可以設(shè)置標簽屬性的樣式
后代選擇器：
div>span{} //選取div所有子元素為span的標簽
div span{} //選取div之后的所有span元素
//可以設(shè)置標簽屬性的樣式
兄弟選擇器:
div+p{}選取緊鄰div之后的第一個兄弟元素//僅限下個元素指定的元素
//div+h3+p可以跳過指定
div~p{}選取緊鄰div之后的所有兄弟元素
//可以設(shè)置標簽屬性的樣式
偽類選擇器：
div:hover{}//光標移動到改變
input:focus{}//光標聚焦到改變
//可以設(shè)置標簽屬性的樣式
偽元素：
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
p:before{
content:''//可以不寫，但是必寫語句
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
content:''//可以不寫，但是必寫語句
}
//可以設(shè)置標簽屬性的樣式
屬性選擇：
div[class='test']{}
//區(qū)分特定的標簽以及文件
B我掌握到了什么
1溫習day01的知識點
盒子模型：
margin外邊距，border邊框，padding內(nèi)框的直接畫面調(diào)節(jié)
樣式重置：開發(fā)環(huán)境中的默認值
如：*｛margin：0；padding：0；｝
水平居中：
margin-left:auto;
margin-right:auto;
僅限是塊標簽的水平居中
常用HTML語義化：
div：//塊元素，
p：//段落,
h1~h6：標題,
img//圖片項,
input//對話框,
a//鏈接,
button//按鍵
套標簽：
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：文本對齊方向；
border-width：邊框?qū)挾龋?border-style:邊框樣式；
border-color:邊框顏色；
p:hover{color:red;}光標移動到元素變色；
CSS常用選擇器：
p{},元素選擇器；
class選擇器：.text{};
id:選擇器；
偽選擇器：p:hover；
重要選擇器：！importinent；
2拓展HTML標簽的分類
塊標簽：特點是獨占一行，設(shè)置寬高
div,h1~h6,p,ul,li,dl,dt,dd
默認樣式【display:block;】
內(nèi)聯(lián)標簽：特點是并排顯示，不能設(shè)置寬高
不能設(shè)置margin-top,margin-bottom
如：a,span,em,strong
默認樣式【display:inline;】
內(nèi)聯(lián)塊:特點是并排顯示，可以設(shè)置寬高
button,img,input
默認樣式【display:inline-block;】
讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
display:block;//以改變默認樣式進行
margin-left:auto;
margin-right:auto;//僅限塊標簽
給父級加text-align:center//僅限內(nèi)聯(lián)塊標簽
3CSS選擇器
分組選擇器：
p,h4，~{background:gray}//可以設(shè)置標簽屬性的樣式
后代選擇器：
div>span{} //選取div所有子元素為span的標簽
div span{} //選取div之后的所有span元素
偽類選擇器：
div:hover{}//光標移動到改變
input:focus{}//光標聚焦到改變
//可以設(shè)置標簽屬性的樣式
偽元素：
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
p:before{
content:''//可以不寫，但是必寫語句
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
content:''//可以不寫，但是必寫語句
}
//可以設(shè)置標簽屬性的樣式
屬性選擇：
div[class='test']{}
//區(qū)分特定的標簽以及文件
C我沒有掌握的
兄弟選擇器:
div+p{}選取緊鄰div之后的第一個兄弟元素//僅限下個元素指定的元素
//div+h3+p可以跳過指定
div~p{}選取緊鄰div之后的所有兄弟元素
//可以設(shè)置標簽屬性的樣式
兄弟選擇器，后代選擇器還是不怎么熟練，可能要多接觸
QQ圖片20170913194942.jpg
QQ圖片20170913193305.png
