flex布局与绝对定位

最新推荐文章于 2024-06-15 15:52:39 发布
最新推荐文章于 2024-06-15 15:52:39 发布
阅读量2.3k 收藏
点赞数
分类专栏： 网页笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53438035/article/details/119256544
版权

flex可以使绝对定位元素居中，但绝对定位元素会使flex-shrink失效
代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
    body{
        display: flex;
        align-items: center;
        justify-content: center;
    }
      .b {
        width: 600px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: white;
        background-color: red;
      } 
      .a {
        position: absolute;
        width: 800PX;
        height: 50%;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
      <div class="b">45
          <div class="a">12</div>
      </div>
  </body>
  <script></script>
</html>

效果：
在这里插入图片描述

小白白中之白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css：主要运用了flex布局和绝对定位
07-24
Flex布局（Flexible Box），又称弹性盒布局，是现代网页布局的首选方式，它极大地简化了多行多列元素的排列，特别是在响应式设计中。绝对定位则允许元素相对于其最近的非 static 定位的祖先元素进行定位，为复杂的...
flex布局的使用方法.pdf
05-12
未使用Flex布局时，元素按照常规流进行布局，可能需要使用浮动、绝对定位等方式进行对齐。示例代码中，`.center`内的三个粉色方块 `.left`, `.content`, `.right` 按照普通流左对齐。当启用了Flex布局后，通过`...
Flex布局
03-29
例如，要实现一个子元素在父元素中水平垂直居中，传统方法需要通过相对定位和绝对定位配合多行CSS代码，而使用Flex布局，只需要设置`display: flex`，`justify-content: center` 和 `align-items: center`，就能快速...
UNI-APP Flex布局 Grid布局 绝对定位 网格布局示例
最新发布
aa33677的博客
06-15 1295
属性和样式来实现页面的垂直居中布局。同时，我们还设置了header和footer的高度和样式来实现页面布局。在实际开发中，可以根据需要使用更多的组件、布局和样式来实现各种复杂的页面布局。在uniapp中，页面布局可以使用template组件和各种内置的标签和样式来实现。标签来作为容器和布局元素，并通过。在这个示例中，我们使用了。
flex布局实现上下固定中间滑动的布局方式
11-20
可以通过CSS的绝对定位或直接设置高度来实现。 6. **中间内容样式设置为`flex: 1; overflow: hidden`或`overflow: auto; -webkit-overflow-scrolling: touch`** 使用`flex: 1`可以让中间内容区域占据剩余的所有...
绝对定位元素被遮挡的解决方法
01-19
绝对定位元素即使z-index值很高，如果其设置相对定位的父元素没有设置z-index值的话，其可能（这种可能性当然是布局存在遮盖的时候）会被后面设置了相对定位的元素遮挡（即使后面的相对定位的元素没有设置z-index值...
Background:linear-gradient()详解
热门推荐
m0_53438035的博客
07-21 3万+
一般渐变 未设置角度，则默认为180deg（从上到下） 设置了角度，则0deg为竖直向上，然后顺时针旋转 上图！ 块渐变 .aq1{ background-image: linear-gradient(45deg,#87f 60%,#f78 60%); } .aq2{ background-image: linear-gradient(90deg,#87f 60%,#f78 60%); } .aq3{ background
video标签和source标签
m0_53438035的博客
07-29 1万+
介绍 < video >元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。 < source >元素为< picture >,< audio >或者< video >元素指定多个媒体资源 video标签常见属性 autoplay 如果出现该属性，则视频在就绪后马上播放。 controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 muted 如果
flex布局下的宽度的问题
m0_53438035的博客
07-30 5067
问题 flex布局下，宽度达到100%以上，发现无效即实际效果最多只能达到100%。 解答 我发现是我对flex布局还不够熟悉。flex布局有如下两个属性。 flex-grow属性：定义项目的放大比例 flex-shrink属性：定义项目的缩小比例 解释： 1：flex-grow属性：定义项目的放大比例。默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。 2：flex-shrink属性默认值为1，即如果空间不足将等比例缩小。如果有一个项目的值为0，其他项目为1，当空间不足时，该项目
transition过渡效果无效问题
m0_53438035的博客
08-14 3542
因为一些事二停止学习了7天，为此我又重新回来了。 问题引入 代码： <style type="text/css"> div{ width: 100px; height: 100px; background-color: aqua; position: absolute; transition: all 2s; /* left: 0px; */ } </style>
overflow的用法
m0_53438035的博客
08-16 2732
overflow有四个属性值，分别是： visible（默认值。内容不会被修剪，会呈现在元素框之外） hidden（内容会被修剪，并且其余内容不可见） scroll（内容会被修剪，浏览器会显示滚动条以便查看其余内容） auto（由浏览器定夺，如果内容被修剪，就会显示滚动条） inherit（规定从父元素继承overflow属性的值） 示例： 1： 2： 3: 4： ...
有关给body设置overflow无效的问题
m0_53438035的博客
04-15 1630
有关给body设置overflow无效的问题 最近写代码时发现给body设置overflow:hidden无效。 css： html { /* overflow: auto; */ } body { height: 50vh; overflow: hidden; /* overflow-y: auto; */ } </style> html: <body> <img src
自定义属性
m0_53438035的博客
07-28 1445
介绍 自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(–main-color);） 复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它
font-size百分比
m0_53438035的博客
07-23 1103
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <
transform并未改变元素大小等问题
m0_53438035的博客
04-16 1008
transform并未改变元素大小等问题 链接: https://segmentfault.com/q/1010000002557576. transform是在现有的元素上浏览器做的渲染，不会改变位置和大小，实现的原理肯定不会是什么position、在z-index，是独立的功能 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e
transition贝塞尔曲线
m0_53438035的博客
07-28 921
在线工具： Canvas贝塞尔曲线绘制工具 cubic-bezier transition中的贝塞尔曲线： ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)； linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)； ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)； ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0
perspective和-translateZ()的投影原理
m0_53438035的博客
04-17 681
perspective和-translateZ()的投影原理 题记：最近做视差滚动的时候差点没被这两个东西逼疯… 正文: 这是MDN上有关perspective的部分解释，想要更详细的解释课上网查询。 其中说到了Z=0的平面，那么我们先介绍下3D坐标轴。 X轴正方向:以屏幕的左上点为原点指向你的右手方向。 Y轴正方向:以屏幕的左上点为原点指向下。 Z轴正方向:垂直屏幕出来只想外面（不严谨理解：指向你的眼睛？） 图： ...
scale缩放方式
m0_53438035的博客
04-16 581
scale缩放方式 1.辐射缩放 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
flex布局和绝对定位
09-06
Flex布局和绝对定位是CSS中常用的两种布局方式。 Flex布局（也称为弹性布局）是一种用于在容器中对元素进行灵活排列的布局模式。通过设置容器的display属性为flex或者inline-flex，可以将容器内的元素按照一定规则进行排列。Flex布局提供了一些属性，例如flex-direction、justify-content、align-items等，用于控制元素在主轴和交叉轴上的排列方式。 绝对定位是一种基于相对定位的布局方式，通过设置元素的position属性为absolute，可以使元素脱离正常的文档流，并根据其父级元素或者整个文档进行定位。通过设置元素的top、right、bottom和left属性，可以确定元素在页面中的位置。绝对定位可以用于创建覆盖效果、定位弹出窗口等。 Flex布局和绝对定位都有各自的适用场景。Flex布局适合于需要灵活调整元素位置和尺寸的情况，特别适用于响应式布局。而绝对定位适合于需要精确控制元素位置的情况，例如创建浮动层或者定位元素在页面的特定位置上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值