基于50%内容高度和宽度的负上、左定位

是一种CSS布局技术，用于将元素相对于其父元素进行定位。这种定位方式可以使元素相对于父元素的上边界和左边界进行定位，并且元素的宽度和高度都是父元素宽度和高度的50%。

这种定位方式的优势在于可以实现响应式布局，使元素的位置和大小随着父元素的变化而自适应调整。同时，使用负值定位可以将元素的位置移出父元素的可见区域，实现一些特殊的布局效果。

应用场景：

网页布局中的导航栏或侧边栏可以使用基于50%内容高度和宽度的负上、左定位来实现固定在页面某一位置，并且随着页面大小的变化而自适应调整位置和大小。
图片或视频的遮罩层可以使用这种定位方式来实现居中显示，并且随着容器大小的变化而自适应调整。
实现一些特殊的布局效果，如卡片式布局中的交错效果等。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

相关·内容

CSS 基础系列：常见布局方式

有三种常用方式可以达到两列自适应布局 float + BFC：左元素在没有固定宽度的情况下设置浮动，因此宽度由内容撑开；右元素激活 BFC（这里采用 overflow:hidden）后，可以防止被浮动元素盖住...此时布局是这样的： image.png 给 left 和 right 设置绝对定位，让它们占据父元素的留白空间。...—— 别忘了，之前的 left 位于 center，left 是 relative 定位，所以在 center 上占据过的空间不会消失。...，然后设置 center 的宽度为 100%，此时，left 和 right 部分会跳到下一行；通过设置负 margin 让 left 和 right 部分回到与 center 部分同一行；这里开始有所不同...：这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。

1.8K2 0

几种常见的 CSS 布局

然后设置center的宽度为100%(实现中间列内容自适应)，此时，left和right部分会跳到下一行 ?...③ 缺点 center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。...两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距+两个从列相对定位；双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整四、等高布局等高布局是指子元素在父元素中高度相等的布局方式...这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。...这也是为了防止负 margin 导致 footer 覆盖任何实际内容。于2019.1.2重新修改，如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！

9082 0

几种常见的CSS布局

然后设置center的宽度为100%(实现中间列内容自适应)，此时，left和right部分会跳到下一行 ?...③ 缺点 center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。...两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。...两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距+两个从列相对定位；双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整四、等高布局等高布局是指子元素在父元素中高度相等的布局方式...这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。

8952 0

建议收藏！总结了 42 种前端常用布局方案

实现CSS代码如下： .child { /* 开启定位 */ position: relative; left: 50%; /* margin-left 为负的宽度的一半 */ margin-left...定位方式实现(方法一) 第一种通过定位的方式实现就比较简单，实际就是通过top: 50%; margin-top: 等于负的高度的一半就可以实现垂直居中。...: 50%; /* margin-top: 等于负高度的一半 */ margin-top: -150px; } 3....定位实现水平垂直居中方案(一) 步骤如下：使子元素相对于容器元素定位子元素开启绝对定位设置该元素的偏移量，值为50% 减去宽度/高度的一半实现CSS代码如下： .parent { /* 1....使用calc函数实现使用 calc 函数实现的方式会比较简单，中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可完成该功能。

4.2K3 0

建议收藏！总结了42种前端常用布局方案

4.2K3 0

css布局使用

一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。...与上一种方法相比，本种方法是通过定位来实现侧栏的位置固定。如果中间栏含有最小宽度限制，或是含有宽度的内部元素，则浏览器窗口小到一定程度，主面板与侧栏会发生重叠。...圣杯布局(float + 负margin) **原理说明**：主面板设置宽度为100%，主面板与两个侧栏都设置浮动，常见为左浮动，这时两个侧栏会被主面板挤下去。...设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度。...双飞翼布局(float + 负margin ) **原理说明**：双飞翼布局和圣杯布局的思想有些相似，都利用了浮动和负边距，但双飞翼布局在圣杯布局上做了改进，在main元素上加了一层div, 并设置margin

1.9K9 0

最全的常见css布局

例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。但网格布局的兼容性不好。IE10+上支持，而且也仅支持部分属性。...然后设置 center 的宽度为 100%(实现中间列内容自适应)，此时，left 和 right 部分会跳到下一行 ?...③ 缺点 center 部分的最小宽度不能小于 left 部分的宽度，否则会 left 部分掉到下一行如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。...两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整四、等高列布局等高布局是指子元素在父元素中高度相等的布局方式...这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。

1.7K1 0

css布局 - 两栏自适应布局的几种实现方法汇总

不说废话，看下实现：具体方法实现及分析：一、float - 浮动实现基本上我们看到这种并列排排站的布局，可能第一时间就会想到浮动。左浮动排队。... css: /* 定位实现 */ .cont-a{ position: relative; /* 防止文案过少时，父元素塌陷到高度低于图片的高度 */ min-height...absolute实现关键点解析父元素设置relative相对定位以限制图片的绝对定位、因为父元素的高度此时是需要文案高度撑开的，所以需要设置最低高度防止文案过少时父元素低于低于图片高度图片使用...如果还想垂直居中，右边文案此时只需要怪怪的空开左边图片宽度+间距的位置即可可以让左边图片垂直居中：图片用上50%的top+marginTop的负高度一半。...父元素清楚浮动两列都float：left 需要自适应的文案列margin-right等于固定宽度列的图片宽度+二者间距有固定宽度的图片列，margin-left负边距为自己的宽度

1.8K2 0

前端面试（1）H5+css

阻止元素被浮动元素覆盖和高度坍塌阻止浮动元素造成的父级元素高度坍塌问题和遮挡其他元素问题高度塌陷问题，这时就可以用 BFC 来清除浮动了。...(100% - width 左); 2>使用浮动双 float 左盒子浮动，右盒子浮动，右盒子宽度设置用 calc(100% - width 左)可以无缝衔接不会有被覆盖的内容。...4>使用定位单定位左盒子设置绝对定位，设置右盒子 margin-left:width(左)，右盒子不必设置宽度。...BFC，左盒子设置右外边距，右盒子设置左外边距(不设置也可)，右盒子不需要设置 width; 三栏布局，已知左右侧宽度，中间自适应 1.使用定位三个盒子外侧设置大盒子，大盒子使用相对定位，下面一层三个盒子均采用绝对定位...; /* 定位父级的50% */ top: 50%; transform: translate(-50%, -50%); /*自己的50% */ } 4.flex 布局 .box { height

1.3K2 0

CSS中关于元素居中的方法总结（超全）

父级的标签，高度和行高一致 p{ height: 200px; line-height: 200px; border: 1px solid red; font-size: 16px;...方法2：不定宽元素 - 绝对定位思路： 1.外层绝对定位，内层相对定位，外层的外层相对定位 2.外层左浮动，内层左浮动 3.外层右移50%，内层左移50% 代码：样式部分： ..., 在margin-left:负的宽度的一半，只是宽度不确定，所以就采用了position:relative; , right:50%; 而right：50%，其实就是向左移动宽度的一半，这里的百分比是以父级的宽度计算的...垂直居中方法1：设置父元素相对定位，子元素position: absolute;top: 50%;同时margin-top值为-(子元素高度的一半)，因为设置top值时是相对于盒子顶部，所以想要居中还要往上移动半个盒子的高度才能实现...div> 方法2：和上一种方法原理差不多，都是利用相对定位和绝对定位，有点不同是子元素内加上了transform:translateY(-50%);和margin-top: -50px; 代码如下：

2.2K2 0

前端常用布局方案总结

定位方式实现（方法一）第一种通过定位的方式实现就比较简单，实际就是通过top: 50%; margin-top: 等于负的高度的一半就可以实现垂直居中。...定位方式实现（方法二）第二种通过定位的方式实现实现思路：top 和 bottom 将子元素拉伸至100%，设置指定的高度，通过 margin:auto; 即可实现垂直居中。...定位实现水平垂直居中方案（方法一）步骤如下： (1). 使子元素相对于容器元素定位； (2). 子元素开启绝对定位； (3). 设置该元素的偏移量，值为50% 减去宽度/高度的一半。...右边列宽度为父级 100%减去左列的宽度。...使用calc函数实现使用 calc 函数实现的方式会比较简单，中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可完成该功能。

2.7K3 0

居中对齐两个难点的实现

父级的标签，高度和行高一致 p{ height: 200px; line-height: 200px; border: 1px solid red; font-size: 16px... 2、不定宽的块级元素水平居中采用绝对定位使用思路： 1.外层绝对定位，内层相对定位，外层的外层相对定位 2.外层左浮动，内层左浮动 3.外层右移50%，内层左移50% 示例...} ul li{ list-style-type: none; border: 1px solid red; } .container{ position: relative; /* 外层的外层相对定位...*/ float: left; left: 50%; } .pages3 li{ float: left; position: relative; /*内层相对定位*/ right: 50%;..., 在margin-left:负的宽度的一半，只是宽度不确定，所以就采用了position:relative; , right:50%; 而right：50%，其实就是向左移动宽度的一半，这里的百分比是以父级的宽度计算的

5743 0

看博客学习别人的旋转的星球

position为absolute，距左50%，剧上50%，左边距负的宽度的一半，上边距负的高度的一半 #sun{ background: red; width: 150px; height...: 50%; } 定义一个地球的轨道 earthline，边框显示出来，定义position为absolute，距左50%，剧上负的高度一半，左边距负的宽度的一半 #earthline{ width...，距左50%，剧上50%，左边距负的宽度的一半，上边距负的高度的一半 #earth{ background: green; width: 100px; height: 100px; border-radius...moon，定义position为absolute，距左50%，剧上负的高度一半，左边距负的宽度的一半 #moon{ width: 40px; height: 40px; background...} 定义动画@keyframes，100%的进度的时候，旋转一圈 @keyframes sunRotate{ 100%{ transform:rotate(360deg); } } 为太阳轨道

4452 0

CSS定位特性

bottom bottom:80px 底部偏移量，定位元素相对于其父元素下边线的距离 left left:80px 左部偏移量，定位元素相对于其父元素左边线的距离 right right：80px 右部偏移量...：先left:50%;，再让固定定位的盒子margin-left:版心宽度的一半；粘性定位滑到某个位置时，盒子固定 position:sticky; top:10px; 特点：以浏览器可视窗口为参照点移动元素...粘性定位占有原先的位置必须加一个边偏移才能有效定位叠放次序通过z-index的值来确定哪个靠上面数值越大，盒子越靠上，可正可负 {z-index:2;} 绝对定位的盒子居中加了绝对定位的盒子不能通过...margin来居中水平先走父元素宽度的一半在往左走定位盒子的宽度的一半垂直高度的一半往下走盒子高度的一半扩展特性行内元素加绝对或者固定定位，可直接设置高度和宽度块级元素加绝对或固定定位...，如果不给宽高，默认大小是内容的大小浮动元素不会压住标准流的文字，绝对定位会压住所有内容

5864 0

HTML & CSS页面布局之定位

.box{ position:relative; top:50px; left:50px; } /*box元素将在原来的位置向下和向右偏移50px，请注意：在定位流中，同一个方向上的定位属性只能使用一次...子元素是文本或图片等高度由内容撑开的行内元素，可以使用line-height属性让其垂直居中。...，center宽度100%，left和right通过设置负margin值，使其和center处于同一行，然后利用相对定位让其分布于center的两边。...，center宽度100%，left和right通过设置负margin值，使其和center处于同一行，此时left和right实际上遮住了部分center，所以center中的content需要设置margin...圣杯布局和双飞翼布局的区别：除了HTML代码结构不同外，圣杯布局的center宽度即为内容区宽度，left和right靠在其两边。双飞翼布局的center宽度等于内容区宽度加left和right宽度。

5.5K1 0

【面试题】CSS知识点整理(附答案)

计算值是给定的百分比值乘以元素计算出的字体大小一个关键词 normal。 8.rem实现原理及相应的计算方案 rem布局的本质是等比缩放，一般是基于宽度...., -50%) , translate是基于元素本身的宽高去计算百分比的，所以同样适用于宽度和高度都不固定的情况 position: absolute + let: 0; right: 0; top:...，注意中间的高度为整个内容的高度 float实现: 需要将中间的内容放在html结构的最后,否则右侧会沉在中间内容的下侧原理: 元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margin...负边距[22]是这两种布局中的重中之重不同点：解决“中间栏div内容不被遮挡”的思路不同圣杯布局 1.三者都设置向左浮动 2.设置middle宽度为100%; 3.设置负边距， left设置负左边距为...100%, right设置负左边距为负的自身宽度 4.设置content的padding值给左右两个子面板留出空间 5.设置两个子面板为相对定位，left面板的left值为负的left面板宽度，right

1.6K4 0

前端面试之CSS重点概念精讲

内联盒子负责内容」 ❞ 内联元素如何区分内联元素从「定义」上：内联元素的内联特指外在盒子从「表现」上：可以和文字在一行显示幽灵空白节点在H5文档声明中，内联元素的所有解析和渲染表现就，如同每个...这两个伪元素中 padding，即内边距，内容周围的区域内边距是「透明」的取值不能为负受盒子的background属性影响 padding 百分比值无论是水平还是垂直方向均是「相对于宽度计算」 boreder...: hidden; width:400px; } 多行基于高度截断（伪元素 + 定位）基于行数截断（）基于高度截断关键点height + line-height + ::after...+ transform: translateY(-50%) 「子绝父相」 + 子元素top:50% + 子元素负margin 元素定高元素高度不确定 flexbox 行内元素-垂直居中单行设置padding...添加或删除「可见的DOM元素」元素的「位置」发生变化元素的「尺寸」发生变化（包括外边距、内边框、边框大小、高度和宽度等）内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代页面一开始渲染的时候

2.4K3 0

ICCV2023 SOTA U-BEV：基于高度感知的鸟瞰图分割和神经地图的重定位

ICCV2023 SOTA U-BEV：基于高度感知的鸟瞰图分割和神经地图的重定位论文标题：U-BEV: Height-aware Bird's-Eye-View Segmentation and Neural...所提出的模型可以完全端到端地进行训练，并在nuScenes数据集上优于具有相似计算复杂度的基于Transformer的BEV方法1.7到2.8%的mIoU，以及基于BEV的重定位超过26%的召回率。...这主要基于以下观察:对于驾驶应用程序，需要在x、y地面平面上进行高分辨率，而垂直轴可以更粗略地离散化。此外，如图3所示，深度通常分布在更长的范围上，例如[0-50]米，这需要大量的离散间隔。...更深层的特征被投影到较低分辨率的BEV中,然后以编码器-解码器方式上采样(黄色),具有跳跃连接。(b)说明从环视图像和高度到不同BEV层的投影操作。...在重定位方面，作者通过比较不同方法在不同距离的召回准确率(1m, 2m, 5m, 10m)上的表现，发现U-BEV相较于其他基于BEV的方法和当代基于BEV的重定位方法，在10m上的召回准确率提高了26.4%

6103 0

CSS进阶07-浮动Floats

内容沿着左浮动框的右侧向下流动，并沿右浮动框的左侧向下流动。下面我们来看一下浮动定位和内容流。 2.浮动对布局的影响浮动盒将向左或向右移动，直到其外边缘接触包含块边缘或另一个浮动的外边缘。...如果行盒被缩短到不能容纳任何内容，那么行盒将下移（其宽度会重新计算）直到可以容纳内容或不再有浮动。当前行中，任何在浮动盒之前的内容将重排到同一行中的浮动的另一侧。...左浮动盒的右外边缘不可在其旁边的右浮动盒的左外边缘之右。右浮动元素亦是。浮动盒的上外边缘不可高于其包含块的顶部。当浮动出现两个折叠外边距之间时，浮动会如同它有一个参与标准流的空匿名父块一样来定位。...但是在CSS2.2中，如果，在BFC中，有一个文档流内负垂直高度的外边距，使得浮动的位置高于它原本应当在的位置，所有这种负外边距被设为零，浮动的位置则未定义。...将块的上边框边缘top border edge放在其假定位置的必要高度。二选一的话，空隙高度即第一种。注：两种方式在目前的网页内容的兼容性上有待评估。未来的CSS规范将规定为其中一个或另一个。

1.5K4 0

自适应的多列图文混排改进

开始之前，首先来看一下我们的需求：一个通用的结构，可以放在不同宽度的布局列中；该结构基本构成为左图（头像）右文（多种结构），左右宽度均不固定；左栏宽度由内容最小宽度确定，右栏无论内容多少要占满容器剩余宽度...；右栏可能有定位元素超出自身范围，要予以显示，且右栏的内容不能环绕左栏；右栏中可能会再包含浮动，因此右栏需要清除自身内容的浮动。...但是再对比一下需求，右栏的特性否决了两栏都浮动的方式，左栏的宽度不固定否定了负边距的方式。...所以我们只能选择左栏浮动（浮动元素宽度最小，内容可以撑开），右栏不浮动（不浮动的block元素默认占满行宽）。但是不浮动的右栏既不能环绕左栏，又不能加左边距。怎么办？理所当然的就该想到BFC元素了。...* img要左浮动，img和txt之间的距离只能加在img上（原因之前说了，webkit的bug）。 * txt要创建BFC，要清除浮动（这两个问题在模拟zoom的时候一并解决了）。

1.4K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云