文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS子级不会继承高度。父高度，以VH表示。引导程序3

CSS子级不会继承父级的高度，除非父级的高度是固定的（例如使用像素值）或者通过其他方式明确指定。如果父级的高度是使用vh（视窗高度）单位表示的，子级不会继承这个高度。

VH（Viewport Height）是一个相对于视窗高度的单位，1vh等于视窗高度的1%。当父级使用vh单位表示高度时，它的高度会根据视窗的大小自动调整。

子级元素默认会根据内容的高度自动调整自身的高度，而不会继承父级的高度。如果希望子级元素具有与父级相同的高度，可以通过一些方式实现，例如使用绝对定位或者设置子级元素的高度为100%。

综上所述，CSS子级不会继承父级的高度，特别是当父级的高度使用vh单位表示时。如果需要子级具有与父级相同的高度，可以使用其他方法来实现。

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

  • 腾讯云CSS（云服务器）：https://cloud.tencent.com/product/css
  • 腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
  • 腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
  • 腾讯云数据库：https://cloud.tencent.com/product/cdb
  • 腾讯云云安全中心：https://cloud.tencent.com/product/ssc
  • 腾讯云音视频处理：https://cloud.tencent.com/product/mps
  • 腾讯云人工智能：https://cloud.tencent.com/product/ai
  • 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
  • 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务：https://cloud.tencent.com/product/baas
  • 腾讯云元宇宙：https://cloud.tencent.com/product/mu
相关搜索:腾讯云的安全管理好用嘛腾讯云的高级威胁追溯系统好用嘛腾讯云的高级威胁溯源平台好用嘛腾讯云的威胁追溯系统好用嘛腾讯云的高级威胁追溯好用嘛腾讯云的追溯威胁源头好用嘛腾讯云的威胁情报云查服务好用嘛腾讯云的威胁情报查询服务好用嘛腾讯云的信誉查询服务好用嘛腾讯云的专家服务好用嘛
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

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

是否是继承属性(株连性) display:none，display不是继承属性，元素及其子元素都会消失。...7. em rem vh vw calc(), line-height 百分比 em em: 相对单位，参考物是父元素的font-size，具有继承的特点。...vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。...rem； Rem相关文章推荐： 移动端页面开发适配 rem布局原理[11] 使用Flexible实现手淘H5页面的终端适配[12] Rem布局的原理解析[13] 9.清除浮动方法及原理 为什么要清除浮动：父元素因为子级元素浮动引起的内部高度为...清除浮动常用的四种方式： 父级div定义height 额外标签法：在有浮动的父级元素的末尾插入了一个没有内容的块级元素div 并添加样式clear:both。

1.5K40

web前端常见面试题

怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。 怪异模式下，在表格中的字体样式（如 font-size ）不会继承。 怪异模式下颜色值必须使用十六进制标记法。 3....对于很多字体来说，1ex ≈ 0.5em； em 1em 等于父级元素的字体大小，2em 就是父级元素字体大小的二倍； rem 当用在根元素（）的 font-size 上面时 ，它代表了它的初始值...； ch 代表元素所用字体 font 中“0”这一字形的宽度； vh 1vh 相当于视口高度的 1%，100vh 就是视口的高度； vw 1vw 相当于视口宽度的 1%，100vw 就是视口的宽度； vmax...视口高度 vw 和宽度 vh 两者中的最小值 vmin 视口高度 vw 和宽度 vh 两种中的最大值； % 相对于父级元素的大小来确定； 参考：CSS [1] CSS percentage...，并让子节点上发生的事件冒泡到父节点上，利用 e.target 属性可以获取到当前触发事件的子元素。

2.3K20

    • HTML和CSS常见问题整理

    inherit 规定应该从父元素继承 position 属性的值。 CSS选择器分类 不同级别：排序：!...一个块级元素如果没有设置height,其height由子元素撑开，对子元素使用了浮动之后，子元素就会脱离文档流。那么父元素中没有内容撑开其高度，这样父元素的height就会被忽略。...2.属于同一个BFC的两个相邻的Box的margin会发生重叠 3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。...5.计算BFC的高度，浮动元素也参与计算 BFC作用： 1.自适应两栏布局 2.可以阻止元素被浮动元素覆盖 3.可以包含浮动元素---清除内部浮动 原理：触发父div的BFC属性...，使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时，可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗的高度，视窗高度是100vh vw 相对于视窗的宽度

    1.4K30

    1.5 万字 CSS 基础拾遗（核心知识、常见需求）

    important； 继承性 ? 在 CSS 中有一个很重要的特性就是子元素会继承父元素对应属性计算后的值。...CSS 属性很多，但并不是所有的属性默认都是能继承父元素对应属性的，那哪些属性存在默认继承的行为呢？...以下这个列表越往下层叠优先级越高，视觉上的效果就是越容易被用户看到（不会被其他元素覆盖）： 层叠上下文的 border 和 background z-index < 0 的子节点 标准流内块级非定位的子节点...相对视口的单位，除了 vw/vh 外，还有 vmin 和 vmax： vmin：取 vw 和 vh 中值较小的； vmax：取 vw 和 vh 中值较大的； 颜色体系 CSS 中用于表示颜色的值种类繁多...因为浮动元素会脱离正常的文档流，并不会占据文档流的位置，所以如果一个父元素下面都是浮动元素，那么这个父元素就无法被浮动元素所撑开，这样一来父元素就丢失了高度，这就是所谓的浮动造成的父元素高度坍塌问题。

    1.4K20

    1.5 万字 CSS 基础拾遗（核心知识、常见需求）

    important； 继承性 在 CSS 中有一个很重要的特性就是子元素会继承父元素对应属性计算后的值。...CSS 属性很多，但并不是所有的属性默认都是能继承父元素对应属性的，那哪些属性存在默认继承的行为呢？...以下这个列表越往下层叠优先级越高，视觉上的效果就是越容易被用户看到（不会被其他元素覆盖）： 层叠上下文的 border 和 background z-index < 0 的子节点 标准流内块级非定位的子节点...相对视口的单位，除了 vw/vh 外，还有 vmin 和 vmax： vmin：取 vw 和 vh 中值较小的； vmax：取 vw 和 vh 中值较大的； 颜色体系 CSS 中用于表示颜色的值种类繁多...因为浮动元素会脱离正常的文档流，并不会占据文档流的位置，所以如果一个父元素下面都是浮动元素，那么这个父元素就无法被浮动元素所撑开，这样一来父元素就丢失了高度，这就是所谓的浮动造成的父元素高度坍塌问题。

    1.1K30

    前端硬核面试专题之 CSS 55 问

    一个块级元素如果没有设置 height，那么其高度就是由里面的子元素撑开，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置 border...清除浮动的方式 父级 div 定义 height，原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。...由于你子 DIV 并没有指定宽度，那它就是 100%，也就是与父 DIV 同宽，但这与继承无关，高度自然也没有继承一说。...BFC 的区域不会与 float box 重叠。 BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 计算 BFC 的高度时，浮动元素也会参与计算。...视口的尺寸 不过由于 vw 和 vh 是 css3 才支持的长度单位，所以在不支持 css3 的浏览器中是无效的。

    2K20

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

    9、CSS 继承 CSS 样式继承性是指下级的样式属性会继承上级的属性，比如 li 会继承 ul 的属性。 10、如何居中 div？如何居中一个浮动元素？如何让绝对定位的 div 居中？...vw vmin vmax ex ch em：现对于父元素的字体大小； rem：相对于根元素 html 的字体大小； vh vw：其中的 v 表示 viewpoint（视窗），所以这两个大小单位代表相对于当前视窗的大小...，1vh vw 相当于百分之1的视窗高度 宽度。...vmin vmax：同上，其中的 v 表示 viewpoint（视窗），vmin 取 vh vw 中两者较小的作为单位，vmax 则相反。...1ch 表示一个0字符的宽度，因此只有在等宽字体的情况下，我们才能用 ch 来精确的调整字符的显示。 ex：相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。

    1.5K30

    HTML CSS

    和 padding 计算了进去; 3.css 选择器优先级？...absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。 fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。...在以下情况中，请使用 POST 请求： 以提交为目的的请求（类似语义化，get 表示请求，post 表示提交）； 发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）； 向服务器发送大量数据（数据大小限制区别...em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的font-size vw/vh 全称是 Viewport Width...和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%， 不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

    1.3K30

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

    3、article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。 4、aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。...这个熟悉了就知道用哪个了，比如有些div悬浮在上方，可能就需要fixed，也就是滚动条移动时不会改变与浏览器的位子， relative可能就要相对于父结点进行定位了一般都是相对定位的*/ 5、浏览器兼容性...浏览器默认字体是16px, 整个页面内1em不是一个固定的值; 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式， 我们可以计算下：class为id1的div字体大小继承自父元素body...： 16px*1.5em = 24px class为id2的div字体大小继承自父元素id1： 24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em...，可以考虑使用em; 5.vh和vw vh和vw 相对于视口的高度和宽度，1vh等于1/100的视口高度，1vw等于1/100 的视口宽度，比如：浏览器高度900px，宽度为750px, 1vh=900px

    1.2K20

    金九银十前端面试题总结（附答案）

    （1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。...（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。...(相对父元素的字体大小倍数)。rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。...（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。...vw：相对于视窗的宽度，视窗宽度是100vw；vh：相对于视窗的高度，视窗高度是100vh；vmin：vw和vh中的较小值；vmax：vw和vh中的较大值；vw/vh 和百分比很类似，两者的区别：百分比

    76240

    精读《State of CSS 2022》

    因为 css 优先级由文件申明顺序有关，而现在大量业务使用动态插入 css 的方案，插入的时机与 js 文件加载与执行时间有关，这就导致了样式优先级不固定。...视口单位 除了 vh、vw 等，还提供了 dvh、lvh、svh，主要是在移动设备下的区别： dvh: dynamic vh, 表示内容高度，会自动忽略浏览器导航栏高度。...lvh: large vh, 最大高度，包含浏览器导航栏高度。 svh: small vh, 最小高度，不包含浏览器导航栏高度。...:has() 可以用来表示具有某些子元素的父元素： .parent:has(.child) { } 表示选中那些有用 .child 子节点的 .parent 节点。...即将支持的特性 @scope 可以让某个作用域内样式与外界隔绝，不会继承外部样式： @scope (.card) { header { color: var(--text); } }

    83620

    一文读懂 CSS 单位

    这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为...所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。 rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。...设置缩放时，应该使用 rem； 使用 em 应该根据组件的font-size来定，而不是根元素的font-size来定； rem 可以从浏览器字体设置中继承 font-size 值， em 可能受任何继承过来的父元素...这四个单位指的是： vw：视窗宽度的百分比； vh：视窗高度的百分比； vmax：较大的 vh 和 vw； vmin：较小的 vh 和 vw。...假如一个浏览器的高度是800px，那么1vh的值就是8px。vh和vw的大小总是和视窗的高度和宽度有关。 vmin 和 vmax 与视窗宽度和高度的最大值和最小值有关。

    75010

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

    3.每次写浮动元素，会引起父元素的高度无法被撑开，影响与父元素同级的元素；与元素同级的非浮动元素会紧随其后，会类似于遮盖现象，这里注意如果一个元素浮动，那它前面的元素也是需要浮动的，不然会影响页面显示的结构...；list-item表示像块类型元素一样显示，并添加样式列表标记；table表示此元素会作为块级表格显示；inherit表示从父元素继承display属性的值。...15.css中，自适应的单位百分比%，相对于视口宽度的单位vw，相对于视口高度的单位vh，相对于视口宽度或者高度的单位vm。 相对于父元素字体大小的单位em，相对于根元素字体大小的单位rem。...16.使用rgba给元素的背景设置透明度的方式，来替代使用opacity设置元素透明度的方式，解决子元素继承父元素透明度的问题。...24.px和em是长度单位，区别在于px是固定的，指为多少就是多少，计算比较容易，em不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。

    1.3K20

    前端知识点总结（html+css）（上）

    3. css3新增伪类 p:first-of-type 选择属于父元素的首个p元素 p:last-of-type 选择属于父元素的最后一个p元素 p:only-of-type 选择属于父元素的唯一...高度塌陷 原因 很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签，设clear:both 父级添加overflow:hidden 使用...px和em的区别是什么 px和em都是长度单位，两者的区别是：px的值是固定的，指定为多少就是多少，计算比较容易；em的值不是固定的，是相对于容器字体的大小，并且em会继承父级元素的字体大小。...vw和vh：都是针对当前浏览器窗口大小而言，1vw就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。...不定高：父：flex，子：margin：auto，0 不定高：父：flex，align-items: center 水平垂直居中 子元素为块级元素：父：flex，子：margin：auto

    29510

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

    务必掌握CSS（文档流，盒模型，浮动，定位，继承，浏览器兼容性）等。 3. 务必掌握HTML5（新增的标签属性，以及核心JavaScript API）等。 4....3.每次写浮动元素，会引起父元素的高度无法被撑开，影响与父元素同级的元素；与元素同级的非浮动元素会紧随其后，会类似于遮盖现象，这里注意如果一个元素浮动，那它前面的元素也是需要浮动的，不然会影响页面显示的结构...；list-item表示像块类型元素一样显示，并添加样式列表标记；table表示此元素会作为块级表格显示；inherit表示从父元素继承display属性的值。...15.css中，自适应的单位百分比%，相对于视口宽度的单位vw，相对于视口高度的单位vh，相对于视口宽度或者高度的单位vm。 相对于父元素字体大小的单位em，相对于根元素字体大小的单位rem。...16.使用rgba给元素的背景设置透明度的方式，来替代使用opacity设置元素透明度的方式，解决子元素继承父元素透明度的问题。

    1.7K341

    响应式布局的实现

    子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。...子元素的top和bottom如果设置百分比，则相对于直接非static定位的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位父元素的宽度。...子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。...em单位 em是相对长度单位，相对于当前对象内文本的字体尺寸，若未设置则相对于浏览器默认字体尺寸16px，em是会继承父元素的字体的尺寸，使用时需要重新计算子元素的em值避免1.2*1.2=1.44的现象...vh vw vmin vmax vh: 相对于视窗的高度，1vh等于视窗高度的1%。 vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。 vmin: vw和vh中的较小值。

    1.9K30

    HTML5 与CSS3 相关笔记

    常见字体单位 1.em 相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：该div继承的父级字体大小*1.5。...（根据祖先html） 3.vh vh指当前屏幕可见高度的1%，即 height:100vh == height:100%; 区别：当元素没有内容时候，若设置height:100%该元素高度不会被撑开。...(1)B:first-child 作为父元素的第一个子元素B，作用和(3)相似； (2)B:last-child作为父元素的最后一个子元素B； (3)A B:nth-child(n) 在父级中查第n.../height (2)border-box：盒子的宽或高度等于元素内容的宽或高度 (即 该内容宽/高度=盒子宽/高度-border-padding ) (3)inherit：使元素继承父元素的盒子模型模式...浮动元素之前的元素将不会受到影响。 如果是右浮动，后面的文本流将环绕在它左边： 47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。

    5.4K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券