为什么当子元素字体大小增加时，容器会上升？

当子元素的字体大小增加时，容器会上升的原因是因为字体大小的增加会导致子元素的尺寸增大，从而影响到容器的尺寸。具体来说，字体大小的增加会使得子元素的高度增加，而容器的高度会根据子元素的高度自动调整。因此，当子元素的字体大小增加时，容器的高度也会相应增加，从而导致容器上升。

这种现象在前端开发中经常出现，特别是在使用相对单位（如em、rem）来设置字体大小时更为明显。相对单位会根据父元素的字体大小来计算实际的像素值，因此当子元素的字体大小增加时，父元素的高度也会相应增加，从而导致容器上升。

解决这个问题的方法之一是使用绝对单位（如px）来设置字体大小，这样可以避免字体大小的增加对容器高度的影响。另外，还可以通过设置容器的固定高度或使用overflow属性来控制容器的尺寸，从而避免容器上升的问题。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse

相关·内容

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

38、为什么css放在顶部而js写在后面？ 39、z-index属性在什么情况下会失效 40、Flex 布局父级容器属性和子级项目属性有哪些？...19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理? 参数是scroll时候，必会出现滚动条。参数是auto时候，子元素内容大于父元素时出现滚动条。...当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...z-index属性在下列情况下会失效：父元素position为relative时，子元素的z-index失效。

3K2 0

我碰到的那些面试题html+css

flex-start flex子元素在最左边 flex-end flex子元素在最右边 center flex子元素在正中间 space-between 平分flex容器 space-around 平分...flex容器,但是每个子元素两边是子元素间距的一半 align-content flex-start flex子元素在最上边 flex-end flex子元素在最下边 center flex子元素在纵向正中间...space-between 纵向平分flex容器 space-around 纵向平分flex容器,但是每个子元素两边是子元素间距的一半 stretch 默认：li将ul划分 align-items flex-start...important; height:200px; overflow:visible;} 备注：在B/S系统前端开发时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时。...容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。 7，浏览器兼容问题七：各种特殊样式的兼容，比如透明度、圆角、阴影等。

1.2K2 0

为什么你永远不应该在CSS中使用px来设置字体大小

作者指出，相对于容器、浏览器或用户的字体大小，px值是静态的。无论用户的字体偏好设置如何，当我们以静态像素设置值时，它将覆盖用户的选择，以我们指定的确切值替代。...em 和 % 单位在其他情况下并不总是等价的；例如， width: 1em 和 width: 100% 很可能会非常不同，因为此时百分比是基于父容器的宽度而不是其字体大小。...总结一下： 1em 是当前元素的字体大小。 1rem （根em）是文档的字体大小（即浏览器的字体大小）。好的，那就是单位的含义和来源。现在让我们回答为什么使用哪个单位很重要。...无论容器、浏览器或用户的字体大小如何， 20px 只是 20px 。当设置静态像素值时，无论用户的字体偏好大小如何，它都会覆盖该选择并使用指定的确切值。...如前所述，用户还可以指定默认和/或最小字体大小。当他们这样做时，功能开始分歧。在下面的截图中，我已将Firefox的默认字体大小设置为 64px 。

1.6K2 0

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

伪类伪类用于当元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，用户悬停在指定的元素时，我们可以通:hover来描述这个元素的状态。...因为，当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！ css实现宽高比[2] 3....它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目" flex: 1 完整写法 flex属性是flex-grow, flex-shrink 和 flex-basis,...利用伪元素：父级div定义伪类:after，我们可以写一个.clearfix 工具样式，当需要清除浮动时，就为其加上这个类 .clearfix:after { display: block; clear...绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等最流行的CSS预处理器 less sass stylus postcss 13.

1.5K4 0

一文读懂 CSS 单位

当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。当然，上面的这个说法是不严谨的。来看一个例子：这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为...; } 这时可以看到，子元素的边框宽度就是30px，它是相对自己大小进行计算的： image.png 所以，可以得出结论：如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算...所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。 rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。...当旋转值为正值时，元素会顺时针旋转；当旋转值为负值时，元素会逆时针旋转。通常情况下，一个完整的旋转就是360度。所以，所有的角度都在0-360度之间。

6571 0

论CSS中可使用的font-size的长度单位

Rem Em唯一的问题就是有时候我们并不需要子元素的 font-size随着父元素的 font-size一起变化。继承 font-size的逻辑会给计算整个元素的实际大小增加额外的复杂度。...如果使用得当，它们还可以避免通过不同断点设置字体大小的实现代码。这是因为这些单位值会随着视窗的高度、宽度做连续性的变化。...如果父元素的 font-size是 x-small，其子元素的 font-size设置成 larger，那么就相当于子元素的 font-size是 small。...因为我们把 div的 font-size设置成 larger，因此增加了嵌套内的第二个容器的 div的字体大小。另外，嵌套对于段落中的文字没有效果。...在相对单位里，你应该在模块当中使用em设置字体大小，给独立模块使用rem单位，例如给一个模块的根元素使用rem。你也可以结合使用视窗单位和其他单位，来保证你的排版会随着视窗宽高变化而自动适应。

2.3K2 0

CSS三大特性

，子类继承成父类的某些样式（例如：字体颜色，字体大小等）恰当使用可以简化代码，降低css复杂性子元素只能够继承父类的某些样式（text-，font-，line-这些元素开头的，以及color属性）... 123321 123321 优先级当一个元素指向多种选择器时...当存在padding时，盒子大小也会相应增加相对大小所以我们在设计盒子时，同样也需要留下padding距离的大小案例：巧妙利用padding设计导航栏 <!...：当出现嵌套关系（父子关系）时，父元素和子元素同时有外边距时，此时父元素会塌陷较大的外边距值解决方案：为父元素定义一个上边框:border：1px solid transparent 为父元素定义一个内边距...-- 当父类和子类都具有外边距时，父类会以较大的外边距为主进行移动 --> <!

1.2K1 0

前端开发面试题答案(二)

它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。...时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。...* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。...不同类型的 Box,会参与不同的Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。...来龙去脉大概如下：当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题

1.3K4 0

移动端页面布局开发

img,a {-webkit-touch-callout: none;} 移动端常见布局流式布局 flex布局原理任何容器都可指定为flex布局当为父元素指定为flex布局之后，子元素的float...rem适配布局 ####一.rem基础 em是相对于父元素的字体大小来说的 rem是相对于html 的字体大小来说的 rem的优点是可以通过修改html的字体大小来改变页面中元素的大小 ####二.媒体查询...less语法 1.less嵌套子元素的样式直接写到父元素里如果有伪类，伪元素选择器，交集选择器，内层选择器之前要加**&** .nav { .logo { color: green; } &::before...font-size的大小页面元素的rem值= 页面元素值(px)/ html font-size的大小响应式布局(Bootstrap框架）一.响应式布局容器响应式需要一个父级作为布局容器，来配合子元素实现变化效果...在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变子元素的布局方式和大小。

9812 0

【云+社区年度征文】全年的技术盘点与总结（含小程序开发）

首先显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只调用一次。当小程序后台运行或跳转到其他页面时，触发onHide方法。...当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。...相对于父元素字体大小的单位em，相对于根元素字体大小的单位rem。 16.使用rgba给元素的背景设置透明度的方式，来替代使用opacity设置元素透明度的方式，解决子元素继承父元素透明度的问题。...18.FFC表示自适应格式化上下文，即display值为flex或inline-flex的元素将会生成自适应容器。伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元可以是任意数量的。...24.px和em是长度单位，区别在于px是固定的，指为多少就是多少，计算比较容易，em不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。

1.7K34 1

7个Web前端程序员必须会用CSS技巧

1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；举个例子：其实出现这种现象...2、含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对于父元素的高度的。同理，left、right则是相对于父元素的宽度的。...4、width：100% 当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。...当子元素是非绝对定位的元素时width:100%才是指子元素的 content ，其等于父元素的 content宽度。...知道了就可以跳过此处，不知道继续看下面：举个例子：上面可以看到line-height有单位时，子元素是继承父元素的line-height的，无单位时，其line-height等于无单位的数值乘以子元素本身的字体大小

4690 0

前端常见技术点 - CSS DOM 布局（43问）

17、常见的移动端开发问题应该有很多，这里只列出笔者遇到过的一部分：若父容器设置了 transform 属性，则其内部子元素的 position:fixed; 属性会失效； 18、对 line-height...当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-to、padding-bottom、margin-top、margin-bottom...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...：display:flex; 弹性元素：父容器的直接子元素，并且没有脱离文档流（非 absolute 属性）。...children 只会包含元素节点，不会包含文字节点，childNodes 会包含所有子节点；nextElementSibling 只包含元素兄弟节点，nextSibling 会包含文字节点。

1.5K3 0

2020 年「我与技术面试那些事儿」

1.2K2 0

响应式布局，你需要知道这些

已经有公司制造了“智能玻璃技术”，当室内人数达到一定的阀值时，它可以自动变为不透明状态，为人们提供更多隐私保护 Web 响应式设计的理念与之非常相似，只不过在这里，我们需要适配的不是建筑，而是 Web...如果元素没有设置 font-size，会继承父元素的 font-size，如果父元素也没有，会沿着 DOM 树一直向上查找，直到根元素 html，根元素的默认字体大小为 16px。...也就是你的手机屏幕，所以不同设备的视觉视口可能不同，有了 visual viewport，我们就可以实现网页的拖拽和缩放了，为什么？因为有了一个承载布局视口的容器。...假设你已经阅读完并了解了弹性盒模型，响应式布局中我们需要关注 FlexBox 里的两个角色：容器和子元素。...，子元素在主轴上的排列顺序 flex-grow，子元素的放大比例，默认 0 flex-shrink，子元素的缩小比例，默认 1 flex-basis，分配剩余空间时，子元素的默认大小，默认 auto flex

1.7K2 0

知识整理之CSS篇

比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。...计算bfc的高度时，浮动元素也参与计算 bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素具体特性解释，可移步至CSS中的BFC详解什么是 FOUC？...非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，normalize.css会力求让这些样式保持一致并尽可能与现代标准符合。...当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等减少css嵌套，最好不要套三层以上避免使用通配规则，以及慎用用css reset，可以选择normolize.css 渲染性能

1.5K2 0

Flutter布局指南之Box套盒子

LimitedBox 当Widget没有父级来限制它们的尺寸时，如何在Widget上设置它的默认大小呢？这就需要使用到LimitedBox了。...EdgeInsets.all(8), color: Colors.green, ), ), ], ) 一句话总结LimitedBox的作用：在不受限制的环境中，为其子元素提供默认尺寸...FittedBox 在Flutter中，Widget之间可以任意堆叠、嵌套，所以，当子Widget的尺寸与父Widget尺寸不一致时，就会产生一些奇怪的样式，FittedBox就是用来处理这种场景的。...Text会因为父容器尺寸的限制而自动换行，下面我们给它加上FittedBox。...fit属性是非常有用的一个属性，例如当我们设置FittedBox后，文字会在设备中自动显示为一行，但是在横竖屏切换时，Text会自动修改字体大小，来适配contain的效果，如果你想让它保存当前的文字Size

1.2K1 0

分享100 个鲜为人知的 CSS 技巧

:focus-in 伪类如果该元素包含任何具有 :focus 的子元素，则 :focus-within 会选择该元素。...用于创意叠加的混合混合模式使用 mix-blend-mode 将混合模式应用于元素，在叠加元素时创建有趣的视觉效果。...:focus-visible 用于特定焦点样式仅当元素处于焦点且焦点不是通过鼠标单击提供时才应用样式。...p::first-letter { font-size: 2em; } 67. overscroll-behavior 滚动超调控制用户滚动超过滚动容器边界时的行为。...形状边缘当与 CSS 形状结合使用时，形状边距指定浮动元素形状周围的边距，从而可以精确控制文本换行和布局。 .shape { shape-margin: 20px; } 75.

931 0

移动web开发(5)之rem适配布局

刚刚又把携程的案例做了一遍,发现还是有问题的,虽然说子盒子为弹性容器的时候,虽然是没有行内元素和块级元素的区别了,但是当里面没有内容的时候,设置了大小也还是不生效的.案例自己做的时候发现也没那么麻烦啦...不同的是rem的基准是相对于html元素的字体大小.比如,根元素(html)设置font-size=12px;非根元素设置width:2rem,则换成px表示就是24px.也就是说rem这个单位之看html...800时,body的颜色会怎么变化: 03 媒体查询+rem实现元素动态大小变化 rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸,媒体查询可以根据不同设备宽度来修改样式...做一个小案例,当屏幕尺寸变化时,元素大小也会动态变化: 我们将字体和盒子的大小单位不定死,而是用随着html变化而动态变化的rem单位,这样我们只要修改html字体大小,就可以让字体和盒子大小跟着变化...,一行只显示一个盒子,当尺寸大时,一行显示两个.

1.1K3 0

rem与em详解

em单位时，像素值将是em值乘以使用em单位的元素的字体大小。...Em 单位的遗传效果使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。...Em 继承的例子如果我们的根元素字体大小为 16px (通常是默认值) 一个子元素 div 里面padding值为 1.5em，该 div 将从根元素继承字体大小 16px。...1555350286371-a7064520-4031-4268-90b0-7ced69d6d091.png 浏览器将调整使用 em 单位的 HTML 元素字体大小 当 em 单位设置在 html 元素上时...当元素应该是严格不可缩放的时候在一个典型的 web 设计的过程中，不会有很多部分的你不能使用伸缩性设计的布局。不过偶尔你会遇到真的需要使用显式的固定的值，以防止缩放的元素。

4.3K3 0

css学习笔记，持续记录。

解决办法：将父元素 container 的字体大小设置为 0，然后单独设置元素的字体大小。在两个容器内元素的html代码之间加注释符号 ; 5....容器宽高相等当容器的内边距设置100%且高度为0时，元素高度取的是容器的宽度单位。...25. flex布局 flex布局，flex-direction为column时，弹性布局会因为子元素超出父元素高度，导致flex盒子被撑起来。...增加和去除边框增加和去除边框导致元素的大小发生变化，同时影响到其他元素产生位移的偏差感：可以调整为边框一直存在，当不需要展示时显示透明，需要的时候再展示颜色。...打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

2.6K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云