day02

A我今天学到了什么

1HTML标签的分类

块标签：div，h1~h6，p，ul，li，dl，dt，dd
特点：独占一行，能够设置宽高
属性：display：block

内联标签：a，span，em，strong
特点：并排显示，不能设置宽高
不能使用margin-top ，margin-botton
属性：display：inline；

内联块：button，img，input
特点：并排显示，可以设置宽高
属性

让内联元素和内联块居中
方法一：display：block
margin-left:auto；
margin-right:auto;
方法二：给父级加text-align：center

2.1分类

1.css元素选择器
p{color：red}

2. class选择器
.class{color:yellow}

3. id选择器
#first{color：blue}

4.分组选择器
p，h4{color：red}

5.后代选择器
div>span{}//选取div所有子元素为span标签
div span{}//选取div之后的span标签

6.兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的兄弟元素

7.属性选择
div[class=“text”]{}

8.伪类选择器
div：hover{}悬停
input：focus{}焦点

2.2选择器的优先排序

元素选择器

3伪元素

“:before”伪元素可以在元素的内容前面插入新内容
例：p：before{
content："
}

“:after”伪元素可以在元素的内容之后插入新内容
例：p:after{
content;"
}

B我掌握好的地方

块标签：div，h1~h6，p，ul，li，dl，dt，dd
特点：独占一行，能够设置宽高
属性：display：block

内联标签：a，span，em，strong
特点：并排显示，不能设置宽高
属性：display：inline；

内联块：button，img，input
特点：并排显示，可以设置宽高

让内联元素和内联块正中间居中
方法一：display：block
margin-left:auto；
margin-right:auto;
方法二：给父级加text-align：center
.css元素选择器
p{color：red}

. class选择器
.class{color:yellow}

. id选择器
#first{color：blue}

.分组选择器
p，h4{color：red}

.属性选择
div[class=“text”]{}

“:before”伪元素可以在元素的内容前面插入新内容
例：p：before{
content："
}

“:after”伪元素可以在元素的内容之后插入新内容
例：p:after{
content;"
}

C我掌握不好的地方

5.后代选择器
div>span{}//选取div所有子元素为span标签
div span{}//选取div之后的span标签

6.兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的兄弟元素