day02

作者: 区块链B哥 | 来源:发表于2017-11-07 15:27 被阅读0次

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变蓝色

C.今天没有掌握什么

全部掌握了,明天加油

相关文章

网友评论

      本文标题:day02

      本文链接:https://www.haomeiwen.com/subject/lgljmxtx.html