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选择器的优先排序

元素选择器<class选择器<ID选择器<！important

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;"
}

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

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

最后编辑于：2017.12.11 05:42:16

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。