有没有一种方法可以让父级的宽度基于子级，但在子级发生变化时保持宽度不变？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS尺寸单位介绍

X 900px；这里会遇到另一种情况浏览器缩放缩放是缩放CSS像素(缩放比例为1时,一个CSS像素等于一个屏幕像素)，就是在屏幕分辨率不变的情况下，用户对浏览进行了缩放强调一点，用户的缩放行为是对浏览器进行的...20px，子级的1em就是20px 当父级的字体大小为30px，子级的1em就是30px 那么说font-size存在着继承父级的特点我们在第一级html中设置font-size，第二级继承第一级，第三级继承第二级...，第四级继承第三级，以此类推每一级都继承自它的父级，也就是说每一级的em所代表的px大小都不是固定的，因为他们的父级不是同一个，所以em的应用场景并不多。...的设备（iPhone6Plus）时，这个宽度375px的div就无法铺满这个屏幕，同样的当换一个iPhone5（320px），又会出现滚动条，安卓机的宽度更是五花八门，使用media媒体查询不靠谱，因为它不能覆盖所有的机型宽度...750px（750px是常规宽度，当然也可以是640px或是其他宽度，但是整个项目，宽度必须统一），唯一不变就是就屏幕宽度，我们的html的font-size（rem）只取决于设备宽度于是 document.documentElement.style.fontSize

1.5K3 0

CSS尺寸单位介绍

X 900px；这里会遇到另一种情况浏览器缩放缩放是缩放CSS像素(缩放比例为1时,一个CSS像素等于一个屏幕像素)，就是在屏幕分辨率不变的情况下，用户对浏览进行了缩放强调一点，用户的缩放行为是对浏览器进行的...当父级的字体大小为20px，子级的1em就是20px 当父级的字体大小为30px，子级的1em就是30px 那么说font-size存在着继承父级的特点我们在第一级html中设置font-size，第二级继承第一级...，第三级继承第二级，第四级继承第三级，以此类推每一级都继承自它的父级，也就是说每一级的em所代表的px大小都不是固定的，因为他们的父级不是同一个，所以em的应用场景并不多。...的设备（iPhone6Plus）时，这个宽度375px的div就无法铺满这个屏幕，同样的当换一个iPhone5（320px），又会出现滚动条，安卓机的宽度更是五花八门，使用media媒体查询不靠谱，因为它不能覆盖所有的机型宽度...750px（750px是常规宽度，当然也可以是640px或是其他宽度，但是整个项目，宽度必须统一），唯一不变就是就屏幕宽度，我们的html的font-size（rem）只取决于设备宽度于是 document.documentElement.style.fontSize

1.7K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

【CSS】1287- 一行 CSS 实现 10 种强大的布局

我们在这里做的是将最小侧边栏大小设置为 150px ，但在更大的屏幕上，让它伸展出 25% 。侧边栏将始终占据其父级水平空间的 25%，直到 25% 变得小于 150px 。...图片另一种方法是使用 span 关键字。使用 span ，您可以设置起始线，然后设置从该起点跨越的列数。...这可以自动放置这些子元素。这些子元素的基本最小值为 150px ，最大值为 1fr ，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，当它们达到 150px 宽度时，它们将开始流到同一条线上。...字符宽度单位基于元素的字体大小（特别是 0 字形的宽度）。“实际”尺寸为 50%，代表此元素父宽度的 50%。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。

4.7K2 0

前端课程——颜色与单位

CSS的值与单位 CSS 中的值是一种定义允许子值集合的方法。例如我们现在可以使用色彩关键字、RGB 色彩模式或 HSL 色彩模式不同类型来描述颜色值。...CSS中描述长度时需要加上单位绝对长度单位这种长度时固定的不变的，在HTML中常见的单位为像素（px）单位名称等价换算 cm 厘米 1cm = 96px/2.54 mm...例如如果一个父级元素拥有两个子级元素，一个子级元素的宽度为 40%，另一个子级元素的宽度为 80%，那么第二个子级元素的宽度就是第一个子级元素的宽度的 2 倍。如下示例代码所示 ? <!...上述 2 种单位都具有如下 3 种情况：小于 1 时：表示相对于父级元素或根元素缩小。例如 0.5em 表示是父级元素的 0.5 倍，0.5rem 表示是根元素的 0.5 倍。...等于 1 时：表示与父级元素或根元素的大小保持一致。大于 1 时：表示相对于父级元素或根元素放大。例如 1.5em 表示是父级元素的 1.5 倍，1.5rem 表示是根元素的 1.5 倍。 ?

1K1 0

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

: 300px; width: 300px; background: #e599f7; } 其 HTML 结构也是固定的，就是一个父级，其宽度继承了的宽度，还有一个子级，这里是固定的300px...；淡紫色是子级，相对于父级居中的。...定宽块级元素水平居中(方法一) 对于定宽的的块级元素实现水平居中，最简单的一种方式就是 margin: 0 auto;，但是值得注意的是一定需要设置宽度。...定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。...行内块级元素垂直居中若元素是行内块级元素, 基本思想是子元素使用display: inline-block, vertical-align: middle;并让父元素行高等同于高度。

4.2K3 0

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

: 300px; width: 300px; background: #e599f7; } 其 HTML 结构也是固定的，就是一个父级，其宽度继承了的宽度，还有一个子级，这里是固定的300px...；淡紫色是子级，相对于父级居中的。...定宽块级元素水平居中(方法一) 对于定宽的的块级元素实现水平居中，最简单的一种方式就是 margin: 0 auto;，但是值得注意的是一定需要设置宽度。...定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。...行内块级元素垂直居中若元素是行内块级元素, 基本思想是子元素使用display: inline-block, vertical-align: middle;并让父元素行高等同于高度。

4.2K3 0

《CSS 世界》读书笔记-流与宽高

因为在阅读本书 CSS 的 “流” 相关内容时让我有了一种恍然大悟的感觉，所以才有了此篇读书笔记。...2.1 流体布局既然流是布局的机制，那么利用流的机制和特性就可以实现流体布局。使用流体布局从一定程度上可以帮助我们编写精简且巧妙的 CSS ，保持布局的强扩展性和韧性。...如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行。例子中，宽度继承于父元素 body。 2. 高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。...比如像这样的块级元素，它们的宽度默认是包含与它们的父级容器宽度的 100%。（2）收缩与包裹，fit-content。指的是父元素的宽度会收缩到和内部元素宽度一样。...3.2 width: 100%，失去流动性的宽度早前，我也比较喜欢给子元素设定 width: 100%，以为这样子元素就可以占满父元素，然而事实真的如此吗？

1.3K2 0

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

百分比用于设置元素的宽度时，它总是相对于其直接父元素的大小。如果没有定义的父级，则默认情况下 body 会被视为父级。...em em 总是相对于它的直接父级的字体大小。1em == 父字体大小的大小。如果没有覆盖，默认字体大小为 16px，假设在父元素中字体大小为 48px，然后在子元素中为 1em == 48px。...因此，元素 font-size 会根据设备大小而变化，元素周围的间距也将分别发生变化。 rem r 代表根 em，与 em 不同，它总是相对于根字体大小，无论它的下一个父元素具有什么字体大小。...让我们考虑以下示例，其中一个子元素的高度与父级大小有关，而另一个子元素的高度与根相关。...% 相对于父级的宽度单位。相对于元素字体大小的边距和填充的 em 单位。相对于根的字体大小的 rem 单位。 vw 和 vh 表示相对于根的宽度和高度。

1.9K1 0

第213天：12个HTML和CSS必须知道的重点难点问题

对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。...3.3 清除浮动的方法方法1：给父级div定义高度原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。...，让父级DIV能够获取高度。...（不推荐使用）方法三：让父级div 也一并浮起来这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。...无法触发其点击事件适用于那些元素隐藏后不希望页面布局会发生变化的场景 opacity:0 将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。

2.3K2 0

Flutter你竟是这样的布局

它会依次询问子元素关于布局的基本限制要求，让子元素上报期望的布局结果，然后根据现状和自己布局算法的特点，告诉子元素应该放到那儿，占多大空间由于父级的大小和位置又取决于其父级，因此在不考虑整个树的情况下就无法精确定义任何小部件的大小和位置...UnconstrainedBox可以让它的子Widget具有所需的任何大小，但是其子Widget是一个具有无限大小的Container。...就像UnconstrainedBox一样，Row不会对其子代施加任何约束，而是让它们成为所需的任意大小。Row然后将它们并排放置，任何多余的空间都将保持空白。 Example 24 ?..., ] ) 当Row的子Child被包裹在Expanded中时，Row将不再让该Child定义自己的宽度。取而代之的是，Row会根据所有Expanded的Child来计算其该有的宽度。...但是，在调整尺寸时，Expanded和Flexible的都忽略了孩子的宽度。注意：这意味着，Row要么使用子Child的宽度，要么使用Expanded和Flexible从而忽略Child的宽度。

2.3K2 0

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

％单位这用于设置元素的宽度，它总是相对于其直接父元素的大小。如果没有定义的父级，则默认情况下body被视为父级。...元素 font-size 会根据设备大小而变化，因此元素周围的间距也将分别发生变化。...），这意味着 vw 总是相对于根宽度的 1%，与父元素的宽度无关。...让我们考虑以下示例，其中一个子级的高度与父级大小有关，而另一个子级的高度与根相关。...% 单位相对于相对父级的宽度。 em 单位相对于元素字体大小的边距和填充。 rem 单位相对于根的字体大小。 vw 和 vh 表示相对于根的宽度和高度。

1K1 0

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

即是把一些平时常用的概念和工具方法整理和罗列，也算是一种变向的「未雨绸缪」。该系列的文章，大部分都是前面文章的知识点汇总，但是也不乏参考其他优秀文章。...也就是说替换元素的宽度却不受display水平影响而/就是替换元素,修改的display为block是无法让尺寸100%自适应父容器。...」--正确的解法是把子元素的z-index设置为负数，这样父元素是一个块级元素，z-index的子元素会在块级元素之下，就可以实现我们想要的效果。...的值为absolute或fixed 应用场景防止margin重叠将位于同一个BFC的元素，分割到不同的BFC中高度塌陷 --- 「计算BFC的高度时，浮动子元素也参与计算」子元素浮动父元素...「硬件加速」，可以让transform、opacity、filters这些动画不会引起回流重绘在使用 JavaScript 「动态插入多个节点」时, 可以使用DocumentFragment.创建后一次插入

2.4K3 0

【CSS3】css开篇基础（4）

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。浮动的元素会具有行内块元素的特性任何元素都可以浮动。...块级盒子：没有设置宽度时默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定行内盒子：原本的宽度默认和内容一样宽，直接设置高宽无效，但是添加浮动后，它的宽度和高度可以直接设置，无需用display...子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。...如果元素离开视口顶部时没有足够的空间放置它，它将像相对定位一样继续滚动，直到可以固定在指定位置。粘性定位不脱标，原有空间一直不变。...1.行内元素添加定位，可以直接设置高度和宽度 2.块级元素添加定位，如果不给宽度或者高度，默认大小是内容的大小。

671 0

各种CSS居中方案

我们的目标是对齐下面这两个div: "parent"> "child"> DEMO 为了看清楚，我们给父级一个浅灰的背景，子级一个深灰的背景，开始时我们什么样式都不写，是下面这样的...，子级会默认给父级撑满： ?...auto */ 上面这个方法适合父级元素宽度不固定，子级元素宽度也不固定的情况。...+ transform .parent4 { /* 父级设置relative好让子级absolute相对于父级定位 */ position: relative; } .child4 {...position: absolute; /* left 50%会让子级在正中稍微靠右一点 */ left: 50%; /* translateX百分比相对的是自身，因为前面靠右了

7025 1

CSS笔记(14)

子绝父相: 子级使用绝对定位,父级使用相对定位子级绝对定位,不会占有位置,可以放到父盒子里面的任意地方,不会影响其他的兄弟盒子.相当于浮动起来了,脱离了标准流,不占用原来的位置....父盒子需要加定位限制子盒子在父盒子内显示. 父盒子布局时,需要占有原来的位置,否则下面的盒子会升上来,被压在下面.因此父级只能是相对定位....当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到. 4.固定定位固定定位是元素固定于浏览器可视区的位置.主要使用场景:可以在浏览器页面滚动元素时元素的位置不会改变....让固定定位的盒子margin-left:版心宽度的一半距离,多走版心宽度的一半位置就可以让固定定位额盒子贴着版心右侧对齐了....行内元素添加绝对或固定定位,可以直接设置高度和宽度. 块级元素添加绝对或固定定位,如果不给宽度或者高度,默认大小是内容的大小(不加定位的话宽度是父级元素的宽度).

5961 0

【布局】493- 工作中遇到的特殊CSS布局

如果父级宽度缩小，中间留白一直保持着150px宽度，左右侧留白宽度跟随父级宽度缩小。...短文件名：长文件名：首先需要使用JS对文件名进行裁剪，拆分出两部分：非扩展名部分和扩展名部分，放置在两个相邻的元素中。当文件名宽度父级宽度时，左侧元素和右侧元素宽度为各自内部文字宽度。...当文件名宽度 > 父级宽度时，左侧元素宽度取决于内容，达到最大值后文本截断显示缩略号，右侧元素随左侧元素向右移，一直保持自身宽度不缩放。对于这样的问题，很自然的就想到flex-shrink。...flex-shrink用来设置当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度。...一开始想着使用flex-flow: column wrap能快速实现，但事宜愿为，顺带发现了flex布局的缺点。我给父级元素加了border，从而可以看出父元素的宽度。

1.1K1 0

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

postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让 top，right，bottom，left 的值失效。在切换的时候可以尝试这个方法。...但在菜单栏，或者一些图标的横向排列时，用起来特别方便，一个 float 就解决了，而且每个元素之间不会有任何间距(所以可以用 float 消除元素间的距离)； ---- svg 与 convas 的区别...有没有了解过webp ？ png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式。优点是：压缩比高，色彩好。大多数地方都可以用。...因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。当然我们不能让它填满了，填满了它就不能和 sidebar 保持同一行了。...在使用基于浮动设计的 CSS 框架时，自会提供清除的方法，个人并不习惯使用浮动进行布局。

2K2 0

为何我反对使用 flex: 1 简写

block box 的初始宽度实为父级宽度，然后才读取的 width 等属性再给出新的实际宽度， inline box 的初始宽度实为本元素宽度，然后判断父级剩余空间，若超出则以父级宽度为准。...听上去就很容易死循环不是吗，比如子级宽度变了，父级可能会变，父级变了祖父级可能也得变。...我大胆猜测一下，其实只要有个稳定的父级宽度，即可避免掉上面这种死循环的，比如当本元素宽度变化时，向父级寻找到 block element 即可，该父级之下的所有元素直接重新计算和渲染。...BFC当 float 时，元素宽度的处理，及其对父级宽度的影响稍有不同。...这意味着，假若总宽为 300px 且子元素各有 5, 10, 15 个字且宽度总和超出父级宽度，那么子元素的宽度将会被分到 50px, 100px, 150px 的收缩后宽度，保持着等比。

901 0

Css详细介绍

23、怎么让Chrome支持小于12px 的文字？（1）用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。...其实这个方法也就在 PC 端可以。...参数是 auto 时候，子元素内容大于父元素时出现滚动条。参数是 visible 时候，溢出的内容出现在父元素之外。参数是 hidden 时候，溢出隐藏。...（2）当你需要在较大分辨率下得到固定宽度时，使用max-width而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。...但是，我们也要时刻牢记–带宽并不是无限的，因此在移动网页中通过 css 把一张大图缩小显示往往是不明智的。（5）当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定列的数量。

971 0

CSS第四天-浮动

或者margin:0 auto，让浮动元素本身水平居中 ---- 伪元素： ::before 在父元素内容的最前添加一个伪元素 ::after 在父元素内容的最后添加一个伪元素伪元素：一般页面中的非主体内容可以使用伪元素...2、一旦子元素浮动了，那么父元素就检测不到子元素，从而导致父元素高度为0 3、那么此时我们就需要清除浮动，让子元素可以把父亲撑开清除浮动的方法：第一种：clear: both; 第二种：给父元素设置...如：新闻列表、京东推荐模块额外标签法在父元素内容的最后添加一个块级元素。...) 找到父元素的子元素固定死减少对于HTML中类的依赖，有利于保持代码整洁 :nth-of-type → 先通过该类型找到符合的元素，然后在这元素中数个数如果li之间还有别的元素，用of-type...4、浮动元素不会超出父元素，在父元素内部进行浮动 5、浮动的元素只会压住下面的盒子，压不住盒子里的内容 6、浮动的元素可以直接加宽高，默认宽度是内容宽度通栏：从左贯穿到右的一个盒子，这个盒子只给高度

4554 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭