1.CSS装饰的应用
1.盒子模型的数值个数设置的不同结果
1.margin
传两个方向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
2.padding
传一个参数 四个方向都改变
传两个参数 第一参数top,bottom 第二个参数left,right
传三个参数
第一个参数top 第一参数left,right 第三个参数bottom
传四个参数 top,right,bottom,left
3.元素内容的起始位置,是基于它自身width,height的起始位置
2.标签
1.快标签
h1,p,div,ul,li,dl,dt,dd
特点:1.独占一行 2.能设置width,height
默认 display：block；
2.内联标签
a ，span， i ，em ，strong
特点:1.并排显示 2.不能设置width,height 3.不能设置margin-top,margin-bottom
默认 display：inline；
3. 内联块
input,img,button
特点:1.并排显示 2.能设置width,height
默认 display：inline-block；
3.内联标签和内联块更改设置方法
1.display：block；
2.不改变display设置水平居中
body{
text-align:center:
}
body为母元素
2.选择器
1.分组选择器
如p,h1,div{
color:red;
}
2.后代选择器
.parent>p{} 只选择亲儿子元素
如
.parent>p{
color:red;
}
.parent p{} 选择parent之后的所有p元素
如
.parent p{
color:red;
}
3.兄弟选择器
div+p{} -->选中div之后的第一个p元素
div~p{} -->选中div之后的所有p元素
如
div+p{
color:red;
}
div~p{
color:yellow;
}
4.伪元素-->用css自定义生产的元素
div:before{
content:""
}
div:after{
content:""
}
如
div:before{
width:100px;
height:100px;
background: red;
content:"前面";
display: block;
}
div:after{
content:"后面";
display: block;
width:100px;
height:50px;
background:yellow;
}
效果图如下
111.png
5. 属性选择器
语法
element[attr=value]{
}
如
[class="one"]{
color:red;
}
6.选择器的优先级别
!important> id>class>p{}
7.选择器的权重
选择器嵌套的层次越深,那么权重越高
如
<style>
.child{
color:red;
}
.parent>.child{
color:green;
}
</style>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
显示结果如下
111111.png
网友评论