.###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>