DAY 03

今天学到了什么

1.盒子模型的参数
2.标签的分类
3.CSS选择器

1.CSS盒子模型

框模型.png

1.1盒子模型参数

传递一个参数// margin:100px 四个方向全部改变
传递两个参数//margin:100px 200px ( 结果:top,bottom-- 100px left,right -- 200px)
传三个参数 top--100 left,right -- 200 bottom --300(结果:margin:100px 200px 300px;)
传四个参数 margin:100px 200px 300px 400px
总结：参数传递的方向为top->right->bottom->left(当其中一面没有参数时默认传递其对面的参数)

1.2padding的传参

实验过程和盒子传参一样
总结：参数传递的方向为top->right->bottom->left(当其中一面没有参数时默认传递其对面的参数，当只设置一个参数时，这一个参数向四面传递)

小tips:元素内容的起始位置,是基于它自身width,height的起始位置 ,所以元素居中仅仅针对块元素有效

2.标签的分类

2.1块标签

h1,p,div,ul,li,dl,dt,dd  
特点:1.独占一行 2.能设置width,height

块标签默认 display:block

2.2内联标签

a,span,i,em,strong
特点:
1.并排显示 2.不能设置width,height 3.不能设置margin-top,margin-bottom

内联默认 display:inline

2.3内联块

input,img,button
特点:1.并排显示  2.能设置width,height

内联块默认 display:inline-block

2.4内联元素和内联块元素水平居中

{
       display:block;
       margin-left:auto;
       margin-right:auto;
}

2.5不改变内联和内联块的display属性 实现水平居中

parentElement{
    text-align:center;
}

3.CSS选择器

3.1伪类选择器

格式: #+标签名{}(例：#two{})

3.2分组选择器

格式 ：标签名+：hover{}(例：p:hover{})

3.3后代选择器

格式：.parent+标签名{}(例：.parent p{})

注意：.parent p{}是选择parent之后的所有p元素

后代1.png

3.4兄弟选择器

格式：

div+标签名{} (例：div+p{}，它表示选中div之后的第一个p元素)
div~p{}表示选中div之后的所有p元素

伪类选择器：input:focus{}

兄弟1.png

兄弟2.png

3.5 伪元素，是用css自定义生产的元素

语法：
div:before{
    content:""
}

伪元素.png

3.7属性选择器

语法：
element[attr=value] {
}

属性.png

3.8选择器的最高优先级别：

语法：!important> id>class>p{}

优先级.png

3.9选择器的权重：

选择器嵌套的层次越深,那么权重越高

权重.png