今天学到了什么？
一、盒子模型的传参
margin
1.1.margin传一个参数，四个方向全部改变
1.2.margin传两个参数 margin:100px 200px：top，bottom--100px ; left，right--200px；
1.3. margin传三个参数 margin：100px 200px 300px：top--100px; left，right--200px; bottom--300px;
1.4.margin传四个参数 margin：100px 200px 300px 400px;
top right bottom left;
padding
2.1padding传一个参数 四个方向都改变；
2.2传两个参数： 第一参数top,bottom 第二个参数left,right；
2.3 传三个参数：第一个参数top 第一参数left,right 第三个参数bottom；
2.4传四个参数 top,right,bottom,left；
二、水平居中
1、改变内联和内联块的display属性 实现水平居中 实现方案:
内联元素和内联块元素水平居中:
{
display:block;
margin-left:auto;
margin-right:auto;
}
块标签默认 display:block;
内联默认 display:inline;
内联块默认 display:inline-block
2、改变内联和内联块的display属性 实现水平居中 实现方案:
{text-align:center;}
三、标签的分类
3.1、块标签
h1，p，div，ul，li，dl，dt，dd//特点：1.独占一行 2.能设置width，height
3.2、内联标签
<a href="xxx">a</a> <span>span</span> <i>i</i> <em>em</em> <strong>strong</strong>//特点：1.并排显示 2.不能设置width，height 3.不能设置margin-top，margin-bottom
3.3、内联块标签
input，img，button//特点：1.并排显示 2.能设置width，height
四、选择器的类型
1.伪类选择器
p：hover{color:xxx}
2.分组选择器
p,h1,div{color:rxxx }
3.后代选择器
.parent p{} //选择parent之后的所有p元素
4.兄弟选择器
div+p{} //选中div之后的第一个p元素
div~p{} //选中div之后的所有p元素
5.属性选择器
<p class="one">hello world</p>//即class选择器
五、伪元素
伪元素：用css自定义生产的元素
<style>
div:before{
content:""
}
*/
div:before{
width:100px;
height:100px;
background: red;
content:"前面";
display: block;
}
div:after{
content:"后面";
display: block;
width:100px;
height:50px;
background:yellow;
}
</style>
</head>
<body>
<div>
content
</div>
六、选择器的优先级别
!important > id > class > p{}
七、选择器的权重
选择器嵌套的层次越深（越详细），那么权重越高
<style>
.child{
color:red;
}
.parent>.child{ //div染成权重高的颜色
color:green;
}
</style>
</head>
<body>
<div class="parent">00
<div class="child">child</div>
</div>
网友评论