父元素自适应子元素脱离文档流时，子元素如何保持和父元素宽度相等

最新推荐文章于 2022-02-24 20:24:02 发布
最新推荐文章于 2022-02-24 20:24:02 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/alhuo/article/details/80236949
版权

  1. 父子元素都浮动，宽度自适应（100%），子元素绝对定位，如何让子元素宽度保持和父元素相等？
    问题：通过一般的方法获取到的父元素宽度都是100%，子元素脱离了文档流，此时唯一的方法就是获取父元素宽度负值给子元素，父元素宽度是动态的

    用offsetWidth获取的值可以将百分比转化为像素值，

    在created，mounted阶段属性还没有挂在，不能获取到width,在nextTick里面获取到的值与否是存在概率的，在updated里面可以取之负值，

updated () {
this.$refs.logoutBtn.style.width = document.getElementsByClassName(‘user-logout-left-name’)[0].offsetWidth-16 + ‘px’;
},

CSS布局和定位应用方案
天涯学馆
05-25 114
CSS3浮动布局的核心在于使用float属性将元素移出文档流，通过左右浮动来排列元素，并结合clear属性或清除浮动技巧（如这里的伪元素法）来处理浮动带来的副作用。在内定义一个.container作为整体布局的容器，内部包含两个子元素：.sidebar（侧边栏）和.content（主要内容区域）。简写属性，用于同时设置grid-row-start、grid-column-start、grid-row-end和grid-column-end，或引用在grid-template-areas中定义的区域名称。
2021年最新Web前端面试题精选大全及答案
m0_54861649的博客
03-07 2086
目录 HTML、CSS相关 Javascript相关 三者的异同 Vue相关 55.Vue路由懒加载（按需加载路由） React相关 react 生命周期函数 ******为什么虚拟 dom 会提高性能?(必考) (组件的)状态(state)和属性(props)之间有何不同 shouldComponentUpdate 是做什么的 react diff 原理 何为受控组件 调用 super(props) 的目的是什么 React 中构建组件的方式 小程序相关的 其他 企业中的项目流程 奇葩问题 HTML、C
子元素脱离文档标准流，父元素没有高度解决办法
weixin_30559481的博客
06-21 479
1.父元素框内在结束的时候加上<div class= "clearfix"></div> <div id="parent"> 　　<div id = "child"> 　　　　 　　</div> 　　<div class= "clearfix"></div> </div> 2.给父元素加上...
关于position:absolute和float之脱离文档流
zhuyunhe的专栏
10-16 4910
position:absolute和float浮动都会以某种方式将元素从文档的正常流中删除。但其还是有点不同：float元素还是会影响布局，它对文档的其余部分还是会有影响；而绝对定位的元素会从文档流中完全删除，然后相对于其包含块定位。 直观的感受就是，absolute元素会遮挡其他元素，而float不会。 一个元素浮动时，其他元素会“环绕”该元素。任何元素都可以
宽高自适应
sgreem的博客
07-22 185
1、自适应 （1）宽度自适应 元素宽度设置为100%。（块元素宽度默认为100%）元素脱离文档流（浮动或绝对定位）可使元素自适应内容宽度 （2）高度自适应 元素的高度自适应： 设置如： div {height : auto;} 2、属性 min-height（最小高度） max-height(最大高度) min-width(最小宽度) max-width(最大宽度) 3、过滤器 1）_ ：下划线属性过滤器 当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识...
css3 计算属性 calc()
abc20140818的博客
03-29 373
.elm { width: calc(expression); } 注意事项： 使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 表达式...
关于使用flex布局的下父元素自适应宽度，子元素长度超出父元素宽度的一个解决方法
weixin_43130844的博客
10-31 1万+
直接上代码： <div class="parent"> <p class="childOne">关于使用flex布局的下父元素自适应宽度，子元素长度超出父元素宽度的一个解决方法</p> <button class="childTwo" type="button"></button> </div> .parent { f...
【应用】三列布局 - 两边固定宽度,中间自适应,高度一致
Dora_5537的博客
10-05 1353
一、Flex 布局 图1 <!DOCTYPE html> <html> <head> <title>三列布局-两边固定宽度,中间自适应,高度一致</title> <style> html,body{ margin: 0; padding: 0; } #main{ width: 100%...
水平布局1
08-08
对于浮动布局，`float`属性可以让元素脱离标准文档流，而`clear`属性可以控制元素是否允许其他浮动元素出现在其周围。在弹性盒模型中，`justify-content`属性可以控制子元素在主轴（通常是水平方向）上的对齐方式，...
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3414
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
CSS-父元素宽度自适应子元素宽度之和
anleng6817的博客
08-22 3337
最近碰见这样一个需求，要让图片横向排列设置 x 方向的滚动条滚动查看，原本当直接创建一个 IFC（inline，float 什么的）就解决了，搞了半天发现搞不定（IFC 也是不能父元素宽度自适应子元素宽度之和的，因为会换行。。），最后用 flex 解决了（然后又发现使用 table 也是可以的），然后学了两个新名词 GFC 和 FFC。。这里就说一下我的解决方法，给大家抛个砖。 flex...
如何让元素不继承父元素的宽度或者高度
makelucky的博客
11-06 1万+
此时有可能是元素为block，设置为inline或着inline-block 即可
父子元素的宽度
chenlim87的博客
10-09 1972
父子元素的宽度 1.正常情况 <style> .parent{ width: 200px; height: 300px; background-color: aquamarine; } .child{ width: 100%; background-color: red; } </style> <div class="parent"> <div class="ch
关于浮动元素宽度自适应父容器宽度的问题
FuChenRenShen的博客
08-31 5035
希望有朋友能帮忙解答！ 自己对于这块的理解：作为一个浮动元素，其应该是脱离了文档流的，而其父容器是属于文档流的，那这个浮动元素的宽度又是根据什么来计算的呢？为什么其脱离了文档流，却会去适应文档流的父容器的宽度呢？样例如下列格式： (样例参照张鑫旭老师《css世界》6.1章节魔鬼属性float 所写，当然前提是排除掉文字不换行和长串英文字符) &lt;div class="parent"&gt...
利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题
愚睿^_^的专栏
09-02 2857
在进行页面布局的时候经常
子元素绝对定位后脱离文档流，使父元素自适应子元素高度
qq_40797485的博客
01-15 7106
脱离文档流的两种方法：float 和 position:absolute/fixed 前提：父元素高度自动，需要子元素撑开父元素 当子元素使用 float 时，脱离文档流，父元素高度塌陷，但是可以使用 zoom:1 + 伪元素 使其清除浮动，从而使得父元素高度被子元素撑开。   当子元素使用absolute时，使用 jq 获取子元素高度，再赋给父元素即可： $('body').css(...
元素居中的2种方法（可以忽略父元素和子元素的宽高）
believet93的博客
05-29 470
先放一下效果图 1、使用弹性盒子（万能） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .parent { width: 400px; ...
【CSS】子元素跟父元素的高度一致
热门推荐
向着光芒的女孩
09-27 3万+
绝对定位方法：（1）将父元素设置为绝对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent { /*关键代码*/ position: relative; /*其他样式*/ width: 800px; color: #fff; font-family: "Microsoft Yahei"; text-align: center;
父元素高度自适应绝对定位的子元素的高度
weixin_44494811的博客
07-21 4070
父元素加overflow:hidden,并且添加如下类： .clearf:after{ content:’ '; display:block; clear:both; }
css 父元素高度自适应，子元素高度跟随父元素自适应，怎么写
最新发布
08-15
### 回答1： 可以使用以下代码实现: ```css .parent { height: auto; /* 让父元素高度自适应 */ } .child { height: 100%; /* 让子元素高度跟随父元素自适应 */ } ``` 在这里，`.parent` 是父元素的类名，`.child` 是子元素的类名。你需要确保在 HTML 中给父元素和子元素都加上了这些类名。 注意，如果父元素的高度是固定的，那么子元素的高度也会跟随父元素的高度变化。 例如: ```css .parent { height: 200px; /* 父元素的高度是固定的 */ } .child { height: 100%; /* 子元素的高度也会跟随父元素的高度变化 */ } ``` 希望这能帮到你。 ### 回答2： 要实现父元素高度自适应，子元素高度跟随父元素自适应，可以使用CSS的flex布局。 首先，为父元素添加以下样式： ```css .parent { display: flex; flex-direction: column; } ``` 上述代码将父元素设置为flex布局，并且设置主轴方向为竖直方向。 然后，为子元素添加以下样式： ```css .child { flex: 1; } ``` 上述代码中的`flex: 1`表示子元素会占据父元素剩余的空间，从而实现子元素高度跟随父元素自适应。 最后，将父元素和子元素的高度设置为100%： ```css html, body, .parent, .child { height: 100%; } ``` 上述代码中的`html, body`是为了确保整个页面都能够自适应高度，`.parent`和`.child`是为了使父元素和子元素的高度都为100%。 以上就是实现父元素高度自适应，子元素高度跟随父元素自适应的代码。 ### 回答3： 实现父元素高度自适应，子元素高度跟随父元素自适应，可以通过以下CSS代码实现： 父元素样式： ```css .parent { display: flex; flex-direction: column; } ``` 子元素样式： ```css .child { flex-grow: 1; } ``` 以上代码中，父元素使用了flex布局，并设置了flex-direction为column，表示子元素会在垂直方向上从上到下排列。 子元素的样式中，使用了flex-grow: 1，表示子元素会占据剩余空间，使其高度跟随父元素的自适应。 通过以上代码，父元素的高度会自适应子元素的高度，同时子元素的高度也会跟随父元素的自适应变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值