day02
2017-10-25 本文已影响0人
执念念不直
A今天学了什么
1.html标签的分类及特点和属性
块标签有:p
h1~h6
ul,li
dl,dt,dd
div
特点:独占一行,可设置宽高
属性:display:block
内联标签有:a
span
em
strong
特点:并排,不可设置宽高
不能用margin-top,margin-bottom
属性:display:inline
内联块标签有:
img
input
button
特点:并排显示,可以设置宽高
属性:display:inline-block
2.让内联标签和内联块标签的方法
方法一:margin-left:auto
margin-right:auto
display:block
方法二:给父级加text-aline:center
3.css选择器:
p元素选择器 p{ }
class选择器 .one{ }
id选择器 #tow{ }
分组选择器 p,h1{ }
后代选择器
div>span{ }
特点:可以选取div所有子元素的span标签
div span{ }
特点:选取div之后的所有span标签
兄弟选择器
div+p{ }
特点:选取div后紧临的p标签
div~p{ }
特点:选取div后所有的兄弟标签
属性标签
div[ ]
伪类标签
div:hover{ }
input:focus{ }
选择器的优先级排序:
!important>#two>.one>p
4.伪元素
before 伪元素可以在元素内容前面插入新的内容
after 伪元素可以在元素内容之后插入新的内容
B我掌握好的地方
1.html标签的分类及特点和属性
块标签有:p
h1~h6
ul,li
dl,dt,dd
div
特点:独占一行,可设置宽高
属性:display:block
内联标签有:a
span
em
strong
特点:并排,不可设置宽高
不能用margin-top,margin-bottom
属性:display:inline
内联块标签有:
img
input
button
特点:并排显示,可以设置宽高
属性:display:inline-block
2.让内联标签和内联块标签的方法
方法一:margin-left:auto
margin-right:auto
display:block
方法二:给父级加text-aline:center
3.css选择器:
p元素选择器 p{ }
class选择器 .one{ }
id选择器 #tow{ }
分组选择器 p,h1{ }
兄弟选择器
div+p{ }
特点:选取div后紧临的p标签
div~p{ }
特点:选取div后所有的兄弟标签
属性标签
div[ ]
伪类标签
div:hover{ }
input:focus{ }
选择器的优先级排序:
!important>#two>.one>p
C我掌握不好的地方
后代选择器
div>span{ }
特点:可以选取div所有子元素的span标签
div span{ }
特点:选取div之后的所有span标签