day03

今天学到的内容

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{} //选择器嵌套的层次越深，那么权重越高