A.今天学了什么

1.html的分类

块标签

特点:1.独占一行, 2.可以改变宽高

属性:display:block（块属性）

常见的块标签有: div,p,h1~h6,ul,li,dl,dt,dd.

内联标签

特点:并排显示,不能改变宽高,不能设置margin-top和margin-bottom

属性:display:inline

常见的内联标签有:a,span,em,strong

内联块标签

特点:并排显示,能改变宽高

属性:display:inline-block

常用的块联标签:img,input,button

2.选择器

分组选择器
p,h4{ color:blue;}

后代选择器
1.子类选择器:div>p{color:blue;}
2.后代选择器 div p{ color:blue;}

兄弟选择器
1.选择邻近的第一个兄弟 div+p{color:blue;}
2.选择所有的兄弟(可跳过部分非兄弟) div~p{color:blue;}

伪类选择器
1.div:hover{color:blue} 鼠标触碰div变蓝色
2.div:focus{color:blue} 鼠标点击div变蓝色

3.如何让内联元素和内联块元素水平居中

方法一:
display:block;
margin-left:auto;
margin-right:right;

方法二:
在其父类加入代码
text-align:center;

4.伪元素

p:before{
content:""; 可以在p元素之前插入新内容
}

p:after{
content:"";  可以在p元素之后插入新内容
}

5.属性选择

div[class="box1"]{color:blue;} div的class选择器为"box1"的 变蓝色

B.今天掌握了什么

1.如何让内联元素和内联块元素水平居中

方法一:
display:block;
margin-left:auto;
margin-right:right;

方法二:
在其父类加入代码
text-align:center;

2.伪元素

p:before{
content:""; 可以在p元素之前插入新内容
}

p:after{
content:"";  可以在p元素之后插入新内容
}

3.属性选择

div[class="box1"]{color:blue;} div的class选择器为"box1"的 变蓝色

4.html的分类

块标签

特点:1.独占一行, 2.可以改变宽高

属性:display:block（块属性）

常见的块标签有: div,p,h1~h6,ul,li,dl,dt,dd.

内联标签

特点:并排显示,不能改变宽高,不能设置margin-top和margin-bottom

属性:display:inline

常见的内联标签有:a,span,em,strong

内联块标签

特点:并排显示,能改变宽高

属性:display:inline-block

常用的块联标签:img,input,button

5.选择器

分组选择器
p,h4{ color:blue;}

后代选择器
1.子类选择器:div>p{color:blue;}
2.后代选择器 div p{ color:blue;}

兄弟选择器
1.选择邻近的第一个兄弟 div+p{color:blue;}
2.选择所有的兄弟(可跳过部分非兄弟) div~p{color:blue;}

伪类选择器
1.div:hover{color:blue} 鼠标触碰div变蓝色
2.div:focus{color:blue} 鼠标点击div变蓝色

全部掌握了，明天加油