【必看】CSS如何调整一个元素的任意位置-外边距-浮动-定位

本文主要是介绍【必看】CSS如何调整一个元素的任意位置-外边距-浮动-定位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【必看】CSS如何调整一个元素的任意位置-外边距-浮动-定位

调整一个元素的任意位置
- 方法1：外边距-margin
- 方法2：浮动-float
- 方法3：相对定位-relative
- 方法4：绝对定位-absolute
- 方法5：固定定位-fixed
总结
视频教程

调整一个元素的任意位置

在界面设计中最常见的就是调整任意元素的任意位置，这也是一个难点！

说到调整元素的位置就不得不提一下【参照物】，这个很重要，参照物决定了一个元素的移动范围，并不是想怎么移动就能怎么移动的。

方法1：外边距-margin

外边距既是一个元素的外部距离，作用是控制多个元素之间的间距，但是也可以用来改变一个元素的自身位置。

参照物：自己

可以利用外边距调整一个元素在原本位置上的位置，这种方法在某些特殊情况下会出现一些问题：例如：外边距合并、影响其他元素等。因此不太推荐用词方法来调整一个元素的位置。通常用于调整元素间的间距。

方法：

margin-left: ???px; - 距离上级元素左边的距离，正值自身向右移动，负值向左移动，下面的元素会跟着一起移动
margin-right: ???px; - 距离上级元素右边的距离，正值把右边的元素挤开，负值和右边的元素叠在一起，自身不移动
margin-top: ???px; - 距离上级元素顶部的距离，正值自身向下移动，负值向上移动，下面的元素会跟着一起移动
margin-bottom: ???px; - 距离上级元素底部的距离，正值把下面的元素挤开，负值和下面的元素叠在一起，自身不移动

案例：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="new_file.css"/></head><body><div class="parent">上级元素<div class="child-1"> 第一个子元素<br>/*距离上级元素左边50像素,自身往右移动*/<br>/*距离上级元素顶部-18像素,自身往上移动*/<br>/*距离下面的元素的顶部-18像素,自身不移动,下面的向上移动10像素*/</div><div class="child-2"> 第二个子元素 <br>会随同【第一个子元素】一起向上移动</div></div></body>
</html>

.parent {width: 500px;height: 400px;background-color: green;
}
.child-1{width: 350px;height: 200px;background-color: yellow;/***********************//*距离自身原本位置左边50像素,自身往右移动*/margin-left: 100px;/*距离自身原本位置顶部-18像素,自身往上移动*/margin-top: -18px;/*自身底部-18像素,自身不移动,下面的向上移动10像素*/margin-bottom: -50px;/***********************/
}
.child-2{width: 300px;height: 100px;background-color: palevioletred;
}

方法2：浮动-float

浮动功能比较单一，只能实现向左和向右排版。

参照物：上一级父元素

再上一级的范围内浮动，如果上级没有高度，则会影响后面的元素。

方法：

float:left; - 浮动到上级父元素的左边
float:right; - 浮动到上级父元素的右边

案例：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="new_file.css"/></head><body><div class="parent">上级元素<div class="child-1"> 第一个子元素</div><div class="child-2"> 第二个子元素</div></div></body>
</html>

.parent {width: 500px;height: 400px;background-color: green;
}
.child-1{width: 100px;height: 200px;background-color: yellow;/***********************//* 整个元素在上级元素的左边 */float: left;/***********************/
}
.child-2{width: 300px;height: 100px;background-color: palevioletred;/***********************//* 整个元素在上级元素的右边 */float: right;/***********************/
}

方法3：相对定位-relative

相对定位是三种定位中的一种，相对于自身的位置移动，有点类似外边距margin，但是此种方法不会影响其他元素，最多就是移动后会把别的元素覆盖住，使用z-index属性可以调整覆盖顺序。

参照物：自身

方法：
先定位，载使用left、right、top、bottom四个属性来调整位置。

left:??px; - 距离左边的距离，正值自身往右移动，负值自身往左移动
right:??px; - 距离右边的距离，正值自身往左移动，负值自身往右移动
top:??px; - 距离顶部的距离，正值自身往下移动，负值自身往上移动
bottom:??px; - 距离底部的距离，正值自身往上移动，负值自身往下移动

一把左右只需要使用一个，上下也只需要使用一个即可。

案例：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="new_file.css"/></head><body><div class="parent">上级元素<div class="child-1"> 第一个子元素</div><div class="child-2">后面的元素，被【第一个子元素】覆盖住了</div></div></body>
</html>

.parent {width: 500px;height: 400px;background-color: green;
}
.child-1{width: 100px;height: 200px;background-color: yellow;/***********************/position: relative;/* 向下移动100像素 */top: 100px;/* 向右移动100像素 */left: 100px;/***********************/
}
.child-2{height: 80px;background-color: red;
}

方法4：绝对定位-absolute

绝对定位也是三种定位中的一种，主要功能是在某个上级的范围内移动。

参照物：已经定位的上级（不一定是上一级）

方法：

给需要调整位置的元素使用绝对定位
对某个范围限制的父元素上使用三种定位中的一种

案例：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="new_file.css"/></head><body><div class="parent">第一级<div class="child"> 第二级<div class="son">第三级</div></div></div></body>
</html>

.parent {width: 500px;height: 400px;background-color: green;/* 作为第二级的参照物 */position: relative;
}
.child{width: 400px;height: 300px;background-color: yellow;/***********************//* 给自己定位,同时也是下级的参照物 */position: absolute;/* 绝对居住的第一种方法 */left: 0;right: 0;top: 0;bottom: 0;margin: auto;/***********************/
}
.son{width: 300px;height: 200px;background-color: red;/***********************//* 给自己定位,同时也是下级的参照物 */position: absolute;/* 绝对居住的第二种方法 */left: 50%;top: 50%;margin-left: -150px;margin-top: -100px;/***********************/
}

方法5：固定定位-fixed

固定定位三种定位中的一种，相对于整个浏览器窗口左定位。不会跟随页面滚动，时固定的。

参照物：整个浏览器页面

案例：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="new_file.css"/></head><body><div class="parent"><div class="child"> 固定定位</div></div></body>
</html>

.parent {width: 500px;height: 1000px;background-color: green;
}
.child{width: 100px;height: 100px;background-color: yellow;/***********************/position: fixed;/* 固定到页面的右边的中间 *//* 不会跟随页面滚动,永远固定 */right: 20px;top: 0;bottom: 0;margin: auto;/***********************/
}