今天学到了什么
1.盒子模型的参数
2.标签的分类
3.CSS选择器
1.CSS盒子模型
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元素
3.4兄弟选择器
格式：
div+标签名{} (例：
div+p{}，它表示选中div之后的第一个p元素)
div~p{}表示选中div之后的所有p元素伪类选择器：input:focus{}
3.5 伪元素，是用css自定义生产的元素
语法：
div:before{
content:""
}
3.7属性选择器
语法：
element[attr=value] {
}
3.8选择器的最高优先级别：
语法：!important> id>class>p{}
3.9选择器的权重：
选择器嵌套的层次越深,那么权重越高
