开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何防止CSS中子元素的字体大小改变以伸展父容器

为了防止CSS中子元素的字体大小改变以伸展父容器，可以采取以下几种方法：

使用固定的父容器高度和宽度：设置父容器的高度和宽度为固定的数值，这样无论子元素的字体大小如何变化，父容器的尺寸都不会改变。
使用百分比单位设置字体大小：可以将子元素的字体大小使用百分比单位来设置，相对于父容器的大小进行调整。这样无论父容器的尺寸如何变化，子元素的字体大小都会相应调整。
使用绝对单位设置字体大小：使用绝对单位（如px）来设置子元素的字体大小，不依赖于父容器的尺寸。这样无论父容器的尺寸如何变化，子元素的字体大小都会保持不变。
使用rem单位设置字体大小：rem单位是相对于根元素（即<html>元素）的字体大小来计算的。可以将父容器的字体大小设置为固定值，然后使用rem单位来设置子元素的字体大小，这样无论父容器的尺寸如何变化，子元素的字体大小都会相对于根元素的字体大小进行调整。
使用JavaScript动态计算字体大小：可以使用JavaScript来监听父容器尺寸的变化，并根据需要动态计算子元素的字体大小，以保持父子元素之间的比例关系。

腾讯云提供的相关产品：在这个问题中，腾讯云没有直接相关的产品。但腾讯云提供了云计算基础设施、人工智能、物联网、存储等多种云服务产品，可以满足不同领域的需求。具体可以参考腾讯云官方网站了解更多产品信息：https://cloud.tencent.com/

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

有帮助

没帮助

相关·内容

理解CSS - 笔记

伪元素常用的一般就两个， ::before 和 ::after ，都是用来向被选中的元素添加元素之外的装饰性内容（文字）等

02

如何完成响应式布局，有几种方法？看这个就够了

[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

03

「css基础」一次搞懂CSS 字体单位：px、em、rem 和 %

对于绘图和印刷而言，「单位」相当重要的，然而在网页排版里，单位也是同样具有重要性，在CSS3 普及以来，更添加了一些方便好用的单位( em、rem.. .等)，这篇文章将整理这些常用的CSS 单位，希望能够帮助到你在工作上能使用的更加得心应手。

02

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

刚刚又把携程的案例做了一遍,发现还是有问题的,虽然说子盒子为弹性容器的时候,虽然是没有行内元素和块级元素的区别了,但是当里面没有内容的时候,设置了大小也还是不生效的.案例自己做的时候发现也没那么麻烦啦,只是刚学习了新的知识点 , 所以写起来还是比较慢的.

03

CSS继承特性之行高继承

这个时候子元素的行高就是当前元素的字体大小的多少倍，line-height=10，子元素的行号就是字体大小的10倍如下图字体大小为9px 行高为90px

01

css篇-面试题7-说一说rem与em的区别并如何做移动端适配

rem 是基于 html 元素的字体大小来决定，而 em 则根据使用它的元素的大小决定,一般被称为相对长度单位,是根据它父元素的字体大小来计算的，一般默认情况下：16px = 1em

05

CSS面试题

2.利用css3新增属性transform: translate(-50%,-50%);

04

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

本文由Tom Hodgins审阅。感谢SitePointer的编审们，帮助SitePoint提供最优质的内容给读者！

02

CSS新特性的知识

CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑

01

一文读懂 CSS 单位

说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。

01

在未知大小的父元素中设置居中

当提到在web设计中居中元素时。关于被居中的元素和它父元素的信息，你知道的越多就越容易设置。那么假如当你不知道任何信息？居中也是可设置的。

02

移动端页面布局开发

background-size: 500px 200px; 只写一个宽度background-size: 500px ;省略高度 background-size: 50%;百分比是相对于父盒子来说的 background-size: cover;要完全覆盖div盒子，图片可能会有部分显示不全 backgroung-size: contain宽高任意一个喝盒子的边缘重合即停止

02

CSS：绝对单位、相对单位

我们对单位很熟悉，比如说，千克，千米，米等，这些就是绝对单位，我们又有听到太阳的质量等于33个地球，这个就是相对单位。在CSS中，单位也可以分为这两类。

02

前端面试宝典（四）

Hello小伙伴们，我又来了，来的太不频繁，兔妞也自惭形秽！但是真的是有机会就更新啦～最近烦心事也很多，不过还是要努力开心呀，每天都是愉快的新的一天！

02

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

CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。

02

CSS常见样式（一）

1、块级元素和行内元素分别有哪些？它们的特性区别有哪些？ 1、块级元素(block element)，占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。常见的块级元素有： address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易，也是css layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大

03

【前端就业课第二阶段】CSS 零基础到实战（02）标签类型、字体与图片

在学习CSS时，我们需要搞清楚HTML 标签的一些分类，HTML 一般可分为块元素、行内元素以及行内块元素，不同的种类在呈现上有着不同的表现形式。

01

CSS 实用手册

(1). 内联方式，又称为行内样式，将样式定义在某 html 元素中(style 属性中)

01

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

http://www.sohu.com/a/330231789_120174705

02

移动开发-媒体查询布局

每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含

03

1.CSS单位-CSS进阶

一、CSS单位 1.绝对单位在CSS中，绝对单位定义的大小是固定的。使用的是物理度量单位，显示效果不会受外界因素影响。但绝对单位一般多用于传统平面印刷，而极少用于前端开发。在前端开发中，都不会用到绝对单位。 2.相对单位在CSS中，相对单位定义的大小是不固定的。（1）常见的相对单位相对单位说明 px 像素 % 百分比 em 1em等于当前元素字体大小 rem 1rem等于根元素字体大小（2）px 全称pixel，像素，指的是一张图片中最小的点，或计算机屏幕中最小的点。

02

CSS 尺寸单位概述

CSS 提供了多种指定元素大小或长度的方式，其中一些更为直观。CSS 单位可分为四大类：

01

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

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

02

IT课程 CSS基础 022_文本、字体、链接

用于设置文本的首行缩进，适用于段落首行缩进的场景，避免在行内元素上使用。属性可以接受绝对值或相对值，绝对值单位包括像素 (px)、英寸 (in)、厘米 (cm)、毫米 (mm) 等，相对值单位包括 em、rem、vw、vh 等。

01

(2019)[前端]面试题[5]：CSS单位那些事【px,em,rem】

问题说一下你了解的CSS的单位？ Hello，欢迎来到我的博客，每天一道面试题，我们共同进步。解答首先CSS长度单位分为【绝对长度单位】和【相对长度单位】绝对长度单位 in 英寸 cm 厘米 mm 毫米 pt pc 结论：绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。所以很少人用。相对长度单位 px PX即像素，而像素是相对显示器屏幕分辨率而言的。 em em的值并不固定 em继承父级元素的字体大小任意浏览器的默认字体高都是16px rem rem是CSS3中新增的单位，并且

00

移动web开发之rem适配布局

比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px.

02

移动端适配之终极适配方案rem适配

前面几篇移动端专区博文简单介绍了移动端的概述,以及简单的适配方案,百分比适配,比例缩放适配,viewport适配等,但是难免都有一些各种问题!这次这个rem终极适配方案,是目前移动端的较为完美的适配方案!

02

CSS单位em和rem

写过样式的都知道CSS是有单位的，想要写出还原设计稿的完美样式，离不开好的单位。现在CSS的单位有%、in、cm、mm、em、ex、pt、pc、px等原生单位，现在更有了rem、vh、vw、vmin、vmax等单位。

02

rem适配布局

@media mediatype and | not lonly (media feature) {

03

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

1、元素的margin的top、bottom及padding的top、bottom使用百分比作为单位时，其是相对父元素的宽度width的而不是我们想象的高度height；

00

rem与em详解

em 和 rem都是灵活、可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。如果你使用值 1em 或 1rem，它可以被浏览器翻译成从16px到 160px 或其他任意值。

03

CSS单位总结

我们先来说这个，绝对长度单位最好理解，和我们现实生活中是一样的。在我们现实生活中，常见的长度单位有米（m）、厘米（cm）、毫米（mm），每一种单位的长度都是固定，比如 5cm，你走到任何地方 5cm 的长度都是一致的

01

CSS常用单位

CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax，按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。

02

Rem布局的原理探究

在用前端给移动端页面写布局时，我接触到了Rem布局，但是老实说我也看了几篇手淘适配的文章，并且主要的目的是拿到代码写出demo，所以对于Rem我还是停留在只会使用的阶段，但是理解的并不透彻，所以要抽出时间，把rem布局的原理搞清楚。

03

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

2020年，是个不平凡的一年，因为疫情的蔓延打乱了我的全盘计划。但在工作中，完成了目标项目、攻克了技术难关、学习了新的技术，也感谢平台！

02

深度解析CSS中的单位以及区别

css中有几个不同的单位表示长度，使用时数字加单位。如果长度为0，则可以省略单位。

01

前端成神之路-移动web开发_rem布局

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

02

深度解析CSS中的单位以及区别

css中有几个不同的单位表示长度，使用时数字加单位。如果长度为0，则可以省略单位。

02

性能优化之reflow和repaint

本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们.　　一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 浏览器的渲染引擎开始解析html构建成DOM树，DOM树是以document对象为根节点，包含所有的html标签，包括display： none隐藏的，也包括js动态添加的元素。解析html的同时，将css文件或者样式元素中的样式解析成CSS Rule Tree，解析时会去掉浏览器不能识别的样式。根据DOM树和CSSOM来构造Ren

08

如何决定响应式网站的 CSS 单位？

我们可以将这个单位用于边距和填充，因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。元素 font-size 会根据设备大小而变化，因此元素周围的间距也将分别发生变化。

01

web移动端适配方案实践

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

03

【说站】css样式单位px，em，pt，ex，pc，in，mm，cm详解

在写css样式的时候最常用的长度单位是px(像素)，除此之外经常会碰到em、pt等等。

02

web移动端适配方案实践

移动端web页面的开发适配一直是前端开发津津乐道的话题，在实际开发过程中，移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因，下文的方案是团队选择的能较好满足当前项目需求的方案，已经经过线上用户的考验，但不一定是当下最完美的移动端适配解决方案。下文来详细介绍该方案选型。

:has 语法，终于可以用了

多年来，CSS 开发者一直希望能够根据元素内容来选择元素。虽然 CSS 提供了许多基于特征选择元素的选择器，但直到最近才有了根据元素内容选择元素的方法。

02

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

2020年，是个不平凡的一年，因为疫情的蔓延打乱了我的全盘计划。但是这也让我和云+社区一起共同努力，在工作中，完成了目标项目、攻克了技术难关、学习了新的技术，也感谢腾讯云+社区的平台！

css教程之文本字体

<integer>：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

04

CSS3 - 说说 CSS 上的第一个变量 currentColor, 及扯扯 inherit

不知道啥时候，sass上的一些特性写法可以在原生的CSS体现，，CSS-NEXT看过一些，还是只有一些小改动

01

rem适配布局

rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。

03

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

这里总结一下 WEB 前端面试 CSS 部分的常见问题，同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌握本文列出的这些知识的，资深工程师则要对这些基本概念的纵向深度进行挖掘。

03

CSS

repeat-x x轴平铺 repeat-y y轴平铺

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭