CSS中固定定位、相对定位、绝对定位以及flex布局高效定位

一、固定布局

将元素固定到一个位置，不管屏幕怎样移动，元素的位置不移动。

    <style>body {height: 3000px;background-color: lightskyblue;}.box{width: 200px;height: 340px;background-color: pink;/* 固定定位，将元素固定到一个位置，不管屏幕怎样移动，元素的位置不移动。 */position: fixed;/* 1.让元素定位到屏幕的右边垂直居中位置;1.让元素整体走到屏幕的一半，50%；2.让元素倒回去自身高度的一半，让盒子的中线到达居中位置；*/right: 0;top: 50%;margin-top: -170px;}</style>

<body><div class="box"></div></body>

效果图

二、相对定位、绝对定位

口诀：子绝父相
子元素绝对定位，父元素相对定位。
父元素设置相对定位，是为了给子元素指定参考物，子元素在父元素的范围里面运动。

  <style>.box1 {/* ；1.vw :视口（viewport）宽度（width）；2.vh :视口（viewport）高度（height）；2.50vw: 把视口宽度平均分成50份；假如现在屏幕宽度=1000px，平均分成50份，1vw=20px；3. 若要设置与屏幕等宽等高，设置width:100vw;height:100vh;即可。*/width: 50vw;height: 50vh;background-color: pink;/* 相对定位 */position: relative;}.box2 {width: 150px;height: 150px;background-color: lightskyblue;/* 绝对定位 */position:absolute;/* 需求：让子盒子到达父盒子水平垂直居中位置 */top: 50%;left: 50%;/*translate(-50%,-50%)的作用是：往上、往左移动自身长宽的50%，使其居于中心位置；*/transform: translate(-50%,-50%);}</style>

<body><div class="box"><div class="box1"><div class="box2"></div></div></div>
</body>

效果图

三、flex布局

使用flex布局来实现水平垂直居中，效率更高、更简单。

  <style>.box {width: 50vw;height: 50vh;background-color: pink;/* 开启flex伸缩盒子布局 */display: flex;/* 让子元素水平方向居中 */justify-content: center;/* 让子元素垂直方向居中*/align-items: center;}.box1 {width: 100px;height: 100px;background-color: lightyellow;}</style>

<body><div class="box"><div class="box1"></div></div>
</body>

效果图

最后，分享一个好玩的效果！可以在敲代码过程中产生一些动态效果！！

有兴趣的可以看看下边的文章！
https://blog.csdn.net/muzilanlan/article/details/81509374

CSS中固定定位、相对定位、绝对定位以及flex布局高效定位相关推荐

CSS中，position的绝对定位和相对定位的区别
CSS中,position的绝对定位和相对定位的区别 1.position的四个值:static.relative.absolute.fixed 绝对定位:absolute和fixed统称为绝对定位 ...
CSS之定位（绝对定位元素的布局）
绝对定位元素的布局: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
CSS参考手册自用版（新增flex布局）
CSS参考手册-D #参考慕课网.谷歌.腾讯课堂.w3scholl等相关信息及课程仅为自用,可供参考附上链接: https://www.imooc.com/learn/9 https://ke.q ...
css布局右固定,CSS左侧固定右侧自适应的五种布局方法
在页面或者布局列表中,常常有左侧固定,右侧自使用的情况,接下来,这五种方法满足这个需求. 一.左边浮动,右边margin .box{ height: 200px; background-color: ...
CSS中常见的几种高度自适应布局
1.左右结构--高度自适应窗口高度 <!doctype html> <html> <head> <meta charset="utf-8" ...
css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...
android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...
Flex布局示例简述-携程App主页布局
Flex布局示例简述-携程App主页布局使用要点无论是块元素,还是内联元素,都可以被指定为flex布局: flex items是任何直接子元素,既可以是块元素,也可以是内联元素: flex ite ...
移动端布局——Flex布局
一.Flex布局思考多个盒子横向排列使用什么属性? 浮动设置盒子间的间距使用什么属性? margin 需要注意什么问题? 浮动的盒子脱标 Flex布局/弹性布局:(PC端对低版本浏览器不兼容/移 ...

CSS中固定定位、相对定位、绝对定位以及flex布局高效定位

CSS中固定定位、相对定位、绝对定位以及flex布局高效定位

一、固定布局

二、相对定位、绝对定位

三、flex布局

CSS中固定定位、相对定位、绝对定位以及flex布局高效定位相关推荐

最新文章

热门文章