开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当父固定元素在Chrome中添加边框时，绝对元素会发生变化(77.0.3865.90)

当父固定元素在Chrome中添加边框时，绝对定位的子元素会发生位置偏移的变化。这是由于Chrome浏览器在渲染绝对定位元素时，会将其相对于最近的具有定位属性（position属性值为relative、absolute、fixed或sticky）的父元素进行定位。当父元素添加边框时，其尺寸会发生变化，导致子元素相对于父元素的定位发生偏移。

解决这个问题的方法有两种：

使用padding代替border：将父元素的边框样式改为使用padding来实现，这样不会改变父元素的尺寸，从而避免子元素的位置偏移。
使用伪元素：在父元素上使用伪元素（::before或::after），并为其添加边框样式，这样父元素的尺寸不会发生变化，子元素的位置也不会受到影响。

以上是对于该问题的解决方法，下面是一些相关的名词解释和推荐的腾讯云产品：

绝对定位：绝对定位是一种CSS定位方式，通过设置元素的position属性为absolute，可以将元素相对于其最近的具有定位属性的父元素进行定位。
边框：边框是元素周围的一条线，用于装饰和区分元素与其他元素的边界。
Chrome浏览器：Chrome是由Google开发的一款流行的网络浏览器，提供了丰富的开发者工具和良好的兼容性。
伪元素：伪元素是CSS中的一种特殊元素，用于在元素的内容前面或后面插入额外的内容。
腾讯云产品推荐：腾讯云提供了丰富的云计算产品，其中与前端开发和云原生相关的产品包括云服务器（https://cloud.tencent.com/product/cvm）、容器服务（https://cloud.tencent.com/product/tke）、云原生应用平台（https://cloud.tencent.com/product/tcaplusdb）、内容分发网络（https://cloud.tencent.com/product/cdn）等。

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

相关搜索:当绝对定位的HTML元素到达父元素的边缘时，它仍然会缩小如何在聚焦非父元素时在同级元素中添加CSS效果当两个元素在wpf中接触时停止边框加倍当元素垂直居中时，在滚动中添加内联CSS 当routerLink不是直接在父元素中，而是在单独的组件中时，父元素上的routerLinkActive不起作用在next.js中，使用css，当父元素悬停在其上时，我如何目标子元素？在React中，当屏幕尺寸小于875px时，如何移除(仅)父元素？在不知道父元素的情况下向DOM添加元素/从DOM中删除元素时发生的事件当网页的输入元素在卷影dom中时，chrome扩展可以跟踪文件上传？在GWT中父DivElement实例中添加或删除子元素时是否可以触发事件？在Chrome中滚动进入视图时，CSS动画无法运行。未将类添加到元素中当在集合中添加/删除元素时，在Angular中绑定一次会导致问题吗？当使用box- size属性在<td>s中添加边框时，为什么它的大小会发生变化？在Vue.js 2.0中选中复选框时如何向父元素添加类使用vee-validate在Vue.js中当表单字段有效时添加元素在IE11中，当单击其子元素之一时，不会在具有display flex的可聚焦父HTML元素上激发Focus事件当我们在Google Chrome开发者工具上使用"Delete Element“时，它真的会从实时全局服务器中删除该元素吗？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

《精通CSS》第3章可见格式化模型

当两个元素垂直堆叠时，上方元素的下边距会与下方元素的上边距发生折叠。对于嵌套的父子元素（假设只有一个子元素），如果父元素没有内边距和边框，那么它们的上下边距均会发生折叠。...只有当元素的定位方式是静态定位或相对定位时，这时候元素都还在正常的文档流中，其包含块是最近的块级父元素。...当元素的定位模型改为absolute或fixed时，包含块的规则就会发生变化，下面我们来一次讨论各个定位模型。...3.2.1.3 固定定位固定定位是由绝对定位衍生出来的，不过其包含块在设计之初是视口(viewport)。...可以在发生塌陷的父元素内添加一个空的元素，并清除浮动，这时空的元素前面会留下足够的空间来容纳浮动元素。 ?

1.3K2 0

web前端面试中10个关于css高频面试题,你都会吗?

BFC) margin不会传递给父级(父级触发BFC) 属于同一个BFC的两个相邻元素上下margin会重叠普通文档流布局: 浮动的元素是不会被父级计算高度非浮动元素会覆盖浮动元素的位置 margin...会传递给父级元素两个相邻元素上下的margin会重叠开发中的应用阻止margin重叠可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中) 自适应两栏布局...在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。...通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。...在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!

2.8K2 0

前端(二)-CSS

:粗细样式颜色； 4.2.5 border-collapse border-collapse 属性是用来设置 table 表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示...允许 5.4 解决父级边框塌陷的方法 5.4.1 添加空div,并清除两边浮动 5.4.2 设置父元素的高度(灵活性差) 5.4.3 添加overflow属性(溢出处理) 属性值说明 visible...--在clear类后面添加内容为空--> display: block; clear: both; <!...1.设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置； 2.设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响； 3.设置相对定位的盒子原来的位置会被保留下来...；绝对定位的规律 1.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移； 2.如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位； 3.绝对定位的元素从标准文档流中脱离

1.9K2 0

每天10个前端小知识【Day 16】

⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。 transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。...:last-of-type 父元素的最后一个元素 :only-of-type 父元素的特定类型的唯一子元素 :only-child 父元素中唯一子元素 :nth-child(n) 选择父元素中第N个子元素...继承属性在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性关于继承属性，可以分成：字体系列属性 font:组合字体 font-family:规定元素的字体系列 font-weight...后处理器，如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。...所以不要大量使用复合图层，否则由于资源消耗过度，页面可能会变的更加卡顿。同时，在使用硬件加速时，尽可能的使用z-index，防止浏览器默认给后续的元素创建复合层渲染。

1521 0

CSS 笔记盒模型和布局方式

auto 自动在溢出方向添加可用滚动条边框边框实现语法： border: width style color; 边框样式为必填项，分为：样式取值含义 solid 实线边框 dotted...属性 float 取值可取left或right，设置元素向左浮动或向右浮动 float: left/right; 特点元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位...,影响页面布局解决对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏) 在父元素的末尾添加空的块元素。...,不会脱离文档流 absolute 绝对定位：绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高 fixed...固定定位参照窗口进行定位,不跟随网页滚动而滚动脱离文档流使用绝对定位：“父相子绝” : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.

1.1K1 0

第141天：前端开发中浏览器兼容性问题总结（二）

在ie中如果td中的没有内容，那么border将不会显示 8. div嵌套p时，出现空白行问题： div中显示文本，ff、oprea、Chrome：top和bottom都会出现空白行，但是在...IE6 width为奇数，右边多出1px的问题问题：父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素解决：将宽度的奇数值改成偶数 12....IE6 子元素绝对定位的问题问题：父级元素使用padding后，子元素使用绝对定位，不能精确定位解决：在子元素中设置 _left:-20px; _top:-1px;...IE6 列表背景颜色失效的问题问题：当父元素设置position:relative;时，在ie6中第一个ul、ol、dl的背景颜色失效解决： ul、ol、dl 都设置为position:relative...去除链接虚线边框的问题问题：当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框解决： ie6/7中设置为a {blr:expression_r(this.onFocus

1.9K2 1

CSS 实用手册

为父元素增加边框(透明的)，弊端：父元素会变高 b. 可以为父元素设置上内边距来取代子元素上外边距，弊端：父元素高度会变高 c....在父元素中，增加空子元素到最后一个位置处,并且设置其 clear 属性为 both 弊端:多一个子元素在页面上 45. position:relative 相对定位，元素会相对于它原来的位置偏移某个距离...绝对定位的特点: ①. 绝对定位的元素会脱离文档流即不占据页面空间 ②. 绝对定位的元素会相对于离它最近的已定位的祖先元素去实现定位 ③....为父元素添加边框 B. 使用父元素的内边距，取代子元素的外边距 D....父元素的高度如果参照上级元素设为100%,那么在弹性布局时，子元素也参照父元素设为100%,子元素将无法显示，解决方案时将子元素设为固定高度 63.

2.7K1 0

2021前端面试高频 HTML + CSS

页面初始渲染，这是开销最大的一次重排添加/删除可见的DOM元素改变元素位置改变元素尺寸，比如边距、填充、边框、宽度和高度等改变元素内容，比如文字数量，图片大小等改变元素字体大小改变浏览器窗口尺寸...选择所有有效值的属性 :invalid input:invalid 在表单元素中的值是非法时设置指定样式 :in-range input:in-range 用于标签的值在指定区间值时显示的样式 :out-of-range...❞ relative 相对定位 ❝元素会放置在定位时的位置，不改变原有布局，通过改变 top, right, bottom, left 来改变所在位置，但原所在位置会留下预留空间。...❞ fixed 固定定位 ❝元素会「脱离文档流」，不会预留原有位置空间。元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。...如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸. . em的值并不是固定的； . em会继承父级元素的字体大小。

9274 0

响应式网站应该如何选择 CSS 单位？

在开发需要适配各种设备的响应式网站时，正确了解的 CSS 范围很重要。...px 单位不是一个好的选择，无论你选择什么屏幕尺寸，px 单位的尺寸都是固定的。这就是为什么边框总是首选 px 单位的原因，因为边框在所有屏幕尺寸上也保持固定。...百分比用于设置元素的宽度时，它总是相对于其直接父元素的大小。如果没有定义的父级，则默认情况下 body 会被视为父级。...em em 总是相对于它的直接父级的字体大小。1em == 父字体大小的大小。如果没有覆盖，默认字体大小为 16px，假设在父元素中字体大小为 48px，然后在子元素中为 1em == 48px。...因此，元素 font-size 会根据设备大小而变化，元素周围的间距也将分别发生变化。 rem r 代表根 em，与 em 不同，它总是相对于根字体大小，无论它的下一个父元素具有什么字体大小。

1.8K1 0

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

关于display: none、visibility: hidden、opacity: 0的区别，如下表所示： ---- 层叠规则所谓层叠规则，指的是当网页中的元素发生层叠时的表现规则。...，只需要考虑后代元素每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中层叠上下文的创建（3类）由一些CSS属性创建「天生派」「页面根元素天生具有层叠上下文...flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink...在伸缩的时候不需要考虑我的尺寸当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑 align-self属性 align-self属性允许单个项目有与其他项目不一样的对齐方式，「可覆盖...添加或删除「可见的DOM元素」元素的「位置」发生变化 元素的「尺寸」发生变化（包括外边距、内边框、边框大小、高度和宽度等）内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代页面一开始渲染的时候

2.4K3 0

CSS3入门

属性的值将页面中的标签选出来任何标签都有class属性，不同标签的class值可以是相同的重点:在style标签中使用类选择器时必须在前面加上 ....浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐 float:inherit;该属性为继承父元素的浮动属性列表浮动清除浮动额外标签法添加一个新标签，...相对定位相对定位(relative)是元素相对于自己在标准流中原来的位置不会放弃它在标准流中占据的位置 *{ position: relative; } 绝对定位绝对定位(absolute...)是以带有定位(相对、绝对、固定)的父级元素来计算定位位置如果父元素没有定位，则找父级的父级，..…. 。...子元素使用绝对定位退表，可以在父元素中随意定位。

1.6K1 0

CSS再学

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。... 这时 p 段落中的文本会显示的red红色。注意：!important要写在分号的前面这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。...固定定位（position:fixed）绝对定位: positon:absolute,这条语句的作用是将元素从文档中拖出来，然后使用left、top、right、bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位...css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。...、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } 隐性改变display类型有一个有趣的现象就是当为元素

2K7 0

大型编程电视剧连载 | CSS知识点硬核整理归纳（二）

**是指边框与内容之间的距离。**当我们给盒子指定padding值之后，发生了2件事情：内容和边框有了距离，添加了内边距。盒子会变大了。...为了解决这个问题，大概有以下几个方案：可以为父元素定义上边框。可以为父元素定义上内边距。可以为父元素添加overflow:hidden。...行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用：span、a、i、em。浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。...浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。 6.4、浮动小结我们使用浮动的核心目的——让多个块级盒子在同一行显示。...静态定位按照标准流特性摆放位置，它没有边偏移，静态定位在布局时我们几乎不用的。 7.3.2、相对定位(relative) 相对定位是元素相对于它原来在标准流中的位置来说的。

1.8K2 0

css(2)

，当边框是正方形时，设置半径是边框的一半可以得到一个圆形，如果边框是长方形则可以得到一个椭圆。...border-radius: 50%; 1.6display属性 display用于控制HTML元素的显示效果。值描述 none HTML文档中元素存在，但是在浏览器中不显示。...1.8float（浮动）在css中任何元素都可以浮动，浮动的特点：浮动的框可以左右移动，直到碰到网页的边框或者另一个浮动的框，浮动的框可以覆盖固定的框，而且浮动的框会把原来框占有的位置让出来。...浮动常用的三种方式：l left 向左浮动 right 向有浮动 none 默认值，不浮动 1.8.1浮动带来的影响会使浮动框的父标签塌陷，就是当边框是父标签的时，如果子标签设置为浮动，则外边框就会塌陷成一条线...有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。

1.5K2 0

CSS中的定位详解

三、绝对定位（absolute）语法：选择器 { position: absolute; } 含义：采用绝对定位的元素在移动位置的时候是以父元素为参照物的,但是这个父元素必须满足一定的条件才能成为绝对定位元素眼里的父元素...如果采用绝对定位的这个元素没有父元素，或者是父元素没有定位，那么这个绝对定位的元素会以浏览器（Document文档）为参照物进行定位。...固定定位的妙用：如何将一个盒子固定在版心的右侧（不管页面缩小放大，它一直在版心的右侧）。先让固定定位的盒子left: 50% ,此时这个盒子的左边框会定位到浏览器/版心的中间。...定位特殊特性: 绝对定位（absolute）和固定定位（fixed）也和浮动类似。行内元素添加绝对或者固定定位，可以直接设置高度和宽度。...块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。脱离标准流的盒子不会触发外边距塌陷：浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

1.4K3 0

CSS3

外边距（margin）页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。...---- 结构伪类选择器根据元素在HTML中的结构关系查找元素,查找某父级选择器中的子元素....：添加了相对定位position:relative;后，当left和right都有，只有left会生效，当top和bottom都有，只有top会生效。...(后来者居上；div1添加z-index: 1;会让第一个块盖住第二个块) ---- 绝对定位 position:absolute; 需要找父级(子绝对定位，父相对定位。...几种案例1 几种案例2 ---- 光标类型即鼠标光标在元素上时显示的样式。

7669 0

前端面试之HTML && CSS

然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。...绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。...不显示对应的元素，在文档布局中不再分配空间（回流+重绘）该问题会引出回流和重绘用CSS实现三角符号 /*记忆口诀：盒子宽高均为零，三面边框皆透明。...4.浮动布局浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。...；还有一个就是inline-block在使用时有时会有空白间隙的问题缺点最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

4.4K1 0

网页布局基础

由块级元素（块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）和行级元素（块级元素特点：在同一行内显示，不会改变HTML文档结构）组成。...，在CSS中，"box model"这一术语是用来设计和布局时使用。...这样的话，该框及其所有内容就不再显示，不占用文档中的空间。但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。...2.完全脱离了标准文档流，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。...>自适应宽度的列（因为绝对定位的元素会导致父元素高度塌陷，所以一定要保证固定宽度列的高度>自适应宽度的列，才能让绝对定位元素放进父容器里）

1.8K2 0

HTMLCSS,说点你可能不知道的技巧

当三个边框为透明只保留一个边框的颜色时： div { width: 0px; height: 0px; border: 100px solid transparent; border-bottom-color...伪元素作为元素的子级元素，通常用于插入整体固定的内容，例如自定义列表样式就是一个不错的选择。...伪元素使用时必须有content属性，哪怕为空字符串另，css伪类(nth-child等)和伪元素在css2中都使用单冒号 : ，但在css3中提倡伪元素使用双冒号 :: ，伪类使用单冒号 : ，具体是为了遵循标准还是更在意兼容全凭个人...在”chrome.exe”运行时带上参数”–disable-web-security”即可，例如windows下，参数添加在chrome的启动快捷图标（右键-属性-快捷方式-目标）中即可。 15....但重点还是在于父元素的text-align必须设置为center。

1.1K1 0

CSS入门？一篇就够了！

即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。行内样式优先。...解决方案：可以为父元素定义1像素的上边框或上内边距。可以为父元素添加overflow:hidden。...父级没有定位若所有父元素都没有定位，以浏览器为准对齐(document文档)。父级有定位绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。...首先，我们说下，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。

5.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭