【必看】CSS如何调整一个元素的任意位置-外边距-浮动-定位
调整一个元素的任意位置
在界面设计中最常见的就是调整任意元素的任意位置,这也是一个难点!
说到调整元素的位置就不得不提一下【参照物】,这个很重要,参照物决定了一个元素的移动范围,并不是想怎么移动就能怎么移动的。
方法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;
/***********************/
}
总结
当然还有别的方法,最常用的就是这几种,并且这几种的用法也只是简单涉猎,真正使用的时候比这个复杂多了,比较企业真实需求是变化多端的,并且是复杂的。
因此本次知识带大家入门,如果需要完整的学习CSS的核心技术,推荐我的录制视频: