|
【必看】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; - 距离上级元素底部的距离，正值把下面的元素挤开，负值和下面的元素叠在一起，自身不移动
案例：  代码：
上级元素
第一个子元素
/*距离上级元素左边50像素,自身往右移动*/
/*距离上级元素顶部-18像素,自身往上移动*/
/*距离下面的元素的顶部-18像素,自身不移动,
下面的向上移动10像素*/
第二个子元素
会随同【第一个子元素】一起向上移动
.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; - 浮动到上级父元素的右边
案例：  代码：
上级元素
第一个子元素
第二个子元素
.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; - 距离底部的距离，正值自身往上移动，负值自身往下移动
一把左右只需要使用一个，上下也只需要使用一个即可。
案例：  代码：
上级元素
第一个子元素
后面的元素，被【第一个子元素】覆盖住了
.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
绝对定位也是三种定位中的一种，主要功能是在某个上级的范围内移动。
参照物：已经定位的上级（不一定是上一级）
方法：
给需要调整位置的元素使用绝对定位对某个范围限制的父元素上使用三种定位中的一种
案例：  代码：
第一级
第二级
第三级
.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
固定定位三种定位中的一种，相对于整个浏览器窗口左定位。不会跟随页面滚动，时固定的。
参照物：整个浏览器页面
案例：  代码：
固定定位
.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的核心技术，推荐我的录制视频：
视频教程
1、2020年新型前端HTML5 CSS3 JS Canvas AJAX Http前后端交互（文档课件）
|