.###A我今天學到了什么
html標簽的分類
1、塊標簽：
獨占一行、能設置寬高;
常用的塊標簽：div, p,h1~h6,ul,li,dl,dt,dd.
display:block
2、內聯標簽：
并排顯示、不能設置寬高;不能設置margin-bottom,margin-top
常用的標簽：a,span,em,strong;
display:inline
3、內聯塊：
并排顯示、能夠設置寬高
常用的標簽：img,button,input
display:inline-block
4、如何讓內聯元素和內聯塊元素水平居中
方法一：轉化成塊元素
display：block
margin-left;margin-right.
方法二：
給父級加text-align:center
5、CSS選擇器的分類
<p class=‘test’ id='first'>hello word</p>
<h4>標題</h4>
CSS元素選擇器：
p{color:blue}
class選擇器：
.test{color:red}
id選擇器：
#first{color：yellow}
分組選擇器：
p,h4{background:gray}
后代選擇器：
div>span{}
//選取div所有子元素為span的標簽
div span{}
//選取div之后的所有的元素
兄弟選擇器：
div+p{}
選取緊鄰div的第一個兄弟元素p
div~p{}
選取div之后的所有元素
屬性選擇：
div[class='test']{}
偽類選擇器：
div:hover{}元素
input:focus{}搜索框
偽元素：
“before”：可以在元素的內容前面插入新內容
p:before{content:" "}
“after”:可以在元素的內容后面插入新內容
p:after{after:“ ”}
選擇器的優先級排序：
！importent>ID選擇器>class選擇器>p元素選擇器
div{color:red !importent}>div#fiest{color:yellow}>div.test{color:red}>p{color:blue}
B我今天掌握了什么
1、塊標簽：
獨占一行、能設置寬高;
常用的塊標簽：div, p,h1~h6,ul,li,dl,dt,dd.
display:block
2、內聯標簽：
并排顯示、不能設置寬高;不能設置margin-bottom,margin-top
常用的標簽：a,span,em,strong;
display:inline
3、內聯塊：
并排顯示、能夠設置寬高
常用的標簽：img,button,input
display:inline-block
4、如何讓內聯元素和內聯塊元素水平居中
方法一：轉化成塊元素
display：block
margin-left;margin-right.
方法二：
給父級加text-align:center
CSS選擇器的分類
<p class=‘test’ id='first'>hello word</p>
<h4>標題</h4>
CSS元素選擇器：
p{color:blue}
class選擇器：
.test{color:red}
id選擇器：
#first{color：yellow}
分組選擇器：
p,h4{background:gray}
后代選擇器：
div>span{}
//選取div所有子元素為span的標簽
div span{}
//選取div之后的所有的元素
兄弟選擇器：
div+p{}
選取緊鄰div的第一個兄弟元素p
div p{}
選取div之后的所有元素
屬性選擇：
div[class='test']{}
偽類選擇器：
div:hover{}元素
input:focus{}搜索框
偽元素：
“before”：可以在元素的內容前面插入新內容
p:before{content:" "}
“after”:可以在元素的內容后面插入新內容
p:after{after:“ ”}
選擇器的優先級排序：
！importent>ID選擇器>class選擇器>p元素選擇器
div{color:red !importent}>div#fiest{color:yellow}>div.test{color:red}>p{color:blue}
C哪里掌握的不好
1.內聯元素
常用的內聯元素
a,span,i,em,strong
//特點：
a.并排顯示
b.不能設置width和height
c.不能設置margin-top和margin-bottom
2.后代選擇器
//HTML
<div>
<p>hello world</p>
<p>hello world</p>
<ul>
<li><p>hello world</p></li>
<li><p>hello world</p></li>
</ul>
</div>
//css
<style>
div>p{}
div p{}
</style>
