今天学到的内容
1.盒子模型的传参
margin:100px 四个方向都改变
margin:100px 200px; top,bottom -- 100px left,right -- 200px
margin:100px 200px 300px; top --100px right --200px bottom --300px left -- 200px;
margin:100px 200px 300px 400px; 上 右 下 左
2.标签的分类
2.1块标签及其特点
h1,p,div,ul,li,dl,dt,dd等
特点:
1.独占一行
2.能设置width,height
2.2内联标签及其特点
a,span,i,strong等
特点:
1.并排显示
2.不能设置width,height
3.不能设置margin-top,margin-bottom
2.3内联块标签及其特点
input,img,button
特点:
1.并排显示
2.能设置width,height
3.水平居中
不改变内联和内联块的display属性水平居中
parentElement{
text-align:center;
}
内联元素和内联块元素水平居中
{
display:block;
margin-left:auto;
margin-right:auto;
}
快标签默认: display:block;
内联标签默认: display:inline;
内联块标签默认: display:inline-block;
4.选择器
4.1元素选择器
p{
color:red;
}
4.2class选择器
.one{
color:yellow;
}
4.3id选择器
#two{
color:green;
}
4.4伪类选择器
p:hover{
color:firebrick;
}
input:focus{}
4.5分组选择器
p,h1,div{
color:red;
}
4.6后代选择器
.parent>p{
color:red;
}
.parent p{} 选择parent之后的所有p元素
4.7兄弟选择器
div+p{} //选中div之后的第一个p元素
div~p{} //选中div之后的所有p元素
4.8属性选择器
element[attr=value]{}
4.9伪元素
为元素 用css自定义的元素
div:before{ content:" " }
5.选择器的优先级别与权重
!important>id>class>p{}
.parent{}>.child{} //选择器嵌套的层次越深，那么权重越高
