一、staic——自然定位/常规定位/静态定位
把它叫做定位中的一股清流,回归本真
1、作用:是元素定位于常规/自然流中,即块、行垂直排列下去,行内元素水平从左到右
2、特点:
- 会忽略掉top、left、right、bottom或者z-index声明
首先写如下样式:一个父容器里面右三个块
<div class="container">
<div class="box1">A</div>
<div class="box2">B</div>
<div class="box3">C</div>
</div>
.container{
border:1px solid black;
}
.container>div{
width:100px;
height:100px;
line-height:100px;//文本垂直居中
-moz-text-align:center;
text-align: center;//文本水平居中
}
.box1{
border:1px solid blue;
}
.box2{
border:1px solid red;
}
.box3{
border:1px solid blueviolet;
}
把块A设置如下样式:
.box1{
border:1px solid blue;
position:static;
top:20px;
}
结果图:
没有发生任何变化。说明设置static的元素是不受top影响的,left、right、bottom也一样
- 两个相邻的元素都设置了外边距,那么最终的外边距=两者外边距中最大的
把A、B块的样式设置如下
.box1{
border