1.static 自然模型
特点:
- 忽略 top bottom left right 元素的修改
- 若两个相邻的元素设置了外边距,则最终的外边距=两者外边距中最大的
- 具有固定元素width和height值得元素,如果把左右边距设置成auto,则左右边距会自动扩大占满剩余得宽度,造成得效果就是这块水平居
<style>
.block{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid blue;
box-sizing: border-box;
}
.block:nth-child(2){
border: 2px solid red;
position: static;
}
</style>
<title>Document</title>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
<div class="block">D</div>
</body>
q
加入
position: relative;
top: 10px;
.block:nth-child(2){
border: 2px solid green;
margin-left: auto;
margin-right: auto;
}
2. relative 相对定位
特点:
- 可以使用top/right/bottom/left实现相对定位的祖先元素
- 相对定位的元素不会离开常规流
- 任何元素都可以设置relative,绝对定位的后代都可以进行相对于它进行绝对定位
- 可以使用浮动元素发生偏移,并控制它们的堆叠顺序
<style>
.block{
width: 80px;
height: 80px;
line-height: 80px;
border: 2px solid pink;
text-align: center;
}
</style>
<title>Document</title>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
</body>
.block:nth-child(1){
top: 20px;
position:relative;
border: solid blue;
}
.block{
width: 80px;
height: 80px;
line-height: 80px;
border: 2px solid pink;
text-align: center;
float: left;
}
.block:nth-child(1){
top: 20px;
position:relative;
border: solid blue;
}
可以在浮动元素里改变块的位置
控制堆叠的顺序
.block{
width: 80px;
height: 80px;
line-height: 80px;
border: 2px solid pink;
text-align: center;
float: left;
z-index: 9;
}
.block:nth-child(2){
top: 0px;
left: -80px;
position:relative;
border: blue;
}
3.absolute 绝对定位
特点:
- 脱离常规流
- 设置尺寸要注意:百分比比的谁?——离最近定位的祖先元素
<style>
.per{
width: 300px;
height: 300px;
background: red;
margin-left:200px;
margin-top: 200px;
position: relative;
}
.son{
position: absolute;
width: 100px;
height: 100px;
background: blue;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto;
}
</style>
</head>
<body>
<div class="per">
<div class="son"></div>
</body>
4.fixed 固定定位
<style>
body{
height: 1000px;
background: lightblue;
}
.block{
width: 100px;
height: 100px;
line-height: 80px;
border: 2px solid black;
text-align: center;
}
.block:nth-child(1){
position:absolute;
top: 200px;
left: 20px;
}
.block:nth-child(2){
position:fixed;
top: 200px;
left: 20px;
}
</style>
</head>
<body>
<div class="block">固定定位</div>
<div class="block">决定定位</div>