7.2 flex布局后子元素失效属性 margin-top会撑开父元素的解决办法

最新推荐文章于 2023-03-02 15:57:56 发布
最新推荐文章于 2023-03-02 15:57:56 发布
阅读量1.8k 收藏
点赞数
分类专栏： keep
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42376204/article/details/107082389
版权

  1. 关于margin-top会撑开父元素的解决办法
    解决方法：
    1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
    2、为父元素添加overflow：hidden；样式即可（完美）
    3、为父元素或者子元素声明浮动（float：left；可用）
    4、为父元素添加border（border:1px solid transparent可用）
    5、为父元素或者子元素声明绝对定位

  2. flex布局后，display不再，flex的布局会让子容器的float、clear和vertical-align属性将失效

狗焕sama
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gradle-7.2-all.zip 快速下载
08-26
Gradle 7.2 此版本增加了多项可用性改进，例如对 Scala 项目的工具链支持，并改进了操作系统之间的构建缓存命中率。当遇到问题和一些错误修复时，还有一些变更可以使远程 HTTP 构建缓存更具弹性。
gradle-7.2-bin.rar
07-26
gradle-7.2-bin.rar
横向滚动的flex布局 最右侧margin-right 失效
weixin_42289080的博客
09-23 1235
写一个横向滚动的flex布局 <view class="top-wrap"> <view class="top-area-item"></view> <view class="top-area-item"></view> <view class="top-area-item"></view> <view class="top-area-item"></view> </view&g
2022.04.14-flex布局与position定位存在冲突
小龙跳动的博客
04-14 4032
情况：现在布局很多时候用到flex方式，有次我将flex布局后的元素B，然后给元素B添加position定位，发现元素B无法被子元素撑开 <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>fle
flex 使得 行内元素 的margin-top 能能作用
cooker_666的博客
04-05 784
flex 和 inline元素 起因: 在书写wx 小程序中，发现 text 模块的 margin-top 一直没起作用，而我跟着临摹打的效果图却表示 text 的margin-top 确实起作用了。这让我误以为 text标签是行内块元素(我也误认为span 也是 行内块元素了…),继而误以为是因为 flex 元素和 行内块元素排列导致的，然后测试一番，发现并非如此，margin-top依旧起作用了。 后面重新审查了一遍代码发现 container 被我打错了， .container 的类样式并没有起作用，
flex布局margin-right失效
weixin_44679078的博客
04-18 5966
在写一个商品列表时候遇到的 想要的效果：一个大div里面放小div，大的div左右设置margin，然后里面的小div两边贴边排列。 遇到的问题：大div右边margin不显示，而且大的div大小就是铺满屏幕的大小 原因：大的div设置了width是100% 解决方法：把大div的width去掉后正常显示 .goodslist { display: flex; justify-co...
父元素设置min-height子元素设置height100%继承不了的情况解决
qq_42874794的博客
03-12 4889
今天遇到的这个问题 百度方法没有效果 意外解决 首先子元素不要设置浮动这个很重要 父元素设置display:flex然后就OK了
CSS ( Flex布局 ) —— 关于flex布局使用滚动条时，最后一个元素margin无效的问题
Mickeymouse
08-21 6500
在开发中，很常用到flex布局，当使用flex布局，需要使用滚动条的时候，最后一个元素会出现margin无效的情况，如下： <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div&
关于flex盒子padding-right/margin-right不生效
Kratial的博客
03-02 911
关于flex盒子padding-right/margin-right不生效
CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
热门推荐
u012443286的博客
12-12 1万+
asd
gradle-7.2-all，gradle-7.0.2-bin
最新发布
03-25
gradle-7.2-all，gradle-7.0.2-bin
redis-7.2-x64-for-windows-bin.zip
09-04
redis-7.2-x64-for-windows-bin.zip
php-7.2.34-nts-Win32-VC15-x64.zip
12-21
PHP7.2.34-nts版本环境包
6.29 js合并对象 设置超出两行省略文本
又一个四季在轮回
06-29 6756
设置超出两行省略文本 display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;
6.28 小程序Cannot read property ‘name‘ of undefined
又一个四季在轮回
06-28 5721
Cannot read property ‘name’ of undefined这种报错一般是传过来的值没有声明类型 例如： properties: { goodsList: Array, }, 写下类型就可以了 properties: { goodsList: Array, },
Vue双向绑定原理
又一个四季在轮回
09-05 5407
Vue双向绑定原理的时候，发现订阅器Dep是可以直接调用他自己的target的属性，但是class本质是一个函数，为此确认了一下 //为啥Dep类本质是个函数，可以直接调用属性？ class HanClass{ constructor(){ this.name = 'xixixix' } } function HanFn(){ this.name = 'gogogo' } console.log(HanFn.na.
VSCODE自定义用户代码段快速打出for循环等
又一个四季在轮回
09-10 4029
https://www.cnblogs.com/lzb1234/p/10848146.html
数组和字符串的相互转换
又一个四季在轮回
09-22 3356
数组转字符串 toString 数组中 toString() 方法能够把每个元素转换为字符串，然后以逗号连接输出显示。 let arr = [1,2,2] let str1 = arr.toString() console.log(str1);//1,2,2 join join() 方法可以把数组转换为字符串，不过它可以指定分隔符。在调用 join() 方法时，可以传递一个参数作为分隔符来连接每个元素。如果省略参数，默认使用逗号作为分隔符，这时与 toString() 方法转换操作效果相同。
7.10 JS输出内容为[object Object]
又一个四季在轮回
07-10 2710
JS输出内容为[object Object] console.log('res:' + res);//[object Object] 加号的作用 首先，我们的代码中有+（加号）运算符，它在这种情况下（字符串 + 其它什么东西），会调用toString()方法，将其它类型的东西转化为字符串，再和原始字符串拼接成一个字符串； toString()从哪里来，干了什么？ 以下摘自MDN： 除了null和undefined之外，其他的类型(数值、布尔、字符串、对象)都有toString()方法，它返回相应值的.
php-7.2.34-nts-win32-vc15-x86
09-10
php-7.2.34-nts-win32-vc15-x86是一个具体的PHP版本，用于Windows 32位操作系统，采用VC15编译器，并且是非线程安全版本。 PHP是一种开源的服务器端脚本语言，广泛用于Web开发。它可以嵌入到HTML代码中，用于生成动态网页内容。与其他服务器端脚本语言相比，PHP具有易学、应用广泛、速度快等特点。 版本号中的7.2.34表示PHP的主要版本号是7，次要版本号是2，修订号是34。这些版本号反映了PHP的功能和性能的更新和改进。通过不同的版本号，可以判断出该版本与其他版本之间的兼容性，以及是否需要进行升级。 在Windows操作系统上，PHP提供了不同版本的安装包。nts表示非线程安全，这意味着该版本的PHP无法处理并发请求，适用于单线程的环境。win32表示适用于32位的Windows操作系统。 VC15表示该版本的PHP使用的是Visual C++ 2017编译器，这是用于编译PHP的开发工具。x86表示该版本适用于32位的x86架构。 综上所述，php-7.2.34-nts-win32-vc15-x86是一个适用于32位Windows操作系统的PHP版本，它具有非线程安全的特点，并使用Visual C++ 2017编译器进行编译。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值