今天学了什么
1.html标签的分类
块标签:div, h1~h6, p, ul, li, dl, dt, dd,
特点: 独占一行,能够设置宽高
属性:display:block
内联标签: a, span, em, strong
特点: 并排显示 ,不能设置宽高 不能设置margin-top. margin-bottom
属性 :display:inline;
内联块标签:button img input
特点:并排显示, 可以设置宽高
属性: display:inline-block
让内联元素和内联块元素水平居中
方法一
display:block, margin-left;aoto; margin-right;aoto;
方法二
给父级加 text-align:center;
- css 选择器
分组选择器:
p,h4{background:gray}
后代选择器
div>span{}选取div中所有子元素为span的标签
div span{}选取div之后的所span有标签
兄弟选择器
div+p{}选取div紧邻之后的一个兄弟元素 div~p 选取div紧邻之后的所有兄弟元素
伪类选择器
div:hover{} input: focus{}
属性选择
div[class="text"]{}
3.选择器的优先级排序
important>#id选择器>.class选择器>p元素选择器
div {} < div.class{} < div#first{} < div {,important}
4.伪元素
:“before”可以在元素前加新的内容
必须使用content
列:before{
content:
}
:“after”可以在元素后加新的内容
必须使用content
列:after{
content:
}
我学会了什么
1.html标签的分类
块标签:div, h1~h6, p, ul, li, dl, dt, dd,
特点: 独占一行,能够设置宽高
属性:display:block
内联标签: a, span, em, strong
特点: 并排显示 ,不能设置宽高 不能设置margin-top. margin-bottom
属性 :display:inline;
内联块标签:button img input
特点:并排显示, 可以设置宽高
属性: display:inline-block
让内联元素和内联块元素水平居中
方法一
display:block, margin-left;aoto; margin-right;aoto;
方法二
给父级加 text-align:center;
- css 选择器
分组选择器:
p,h4{background:gray}
后代选择器
div>span{}选取div中所有子元素为span的标签
div span{}选取div之后的所span有标签
兄弟选择器
div+p{}选取div紧邻之后的一个兄弟元素 div~p 选取div紧邻之后的所有兄弟元素
伪类选择器
div:hover{} input: focus{}
属性选择
div[class="text"]{}
3.选择器的优先级排序
important>#id选择器>.class选择器>p元素选择器
div {} < div.class{} < div#first{} < div {,important}
4.伪元素
:“before”可以在元素前加新的内容
必须使用content
列:before{
content:
}
:“after”可以在元素后加新的内容
必须使用content
列:after{
content:
}
我不会什么
无