css--踩坑

1. 子元素的宽高不生效问题

设置flex布局后,子元素的宽高不生效问题。 如果希望子元素的宽高生效,解决方法,给子元素添加如下属性: flex-shrink: 0;

    flex-shrink: 0;

2. 横向滚动(子元素宽度不固定)

在这里插入图片描述
在这里插入图片描述

/* tab栏 */
.swiper-tab {
/* 1.最外面的元素设置固定宽度;以及滚动 */width: 100%;overflow-x: auto;height: 116rpx;text-align: center;display: flex;align-items: center;justify-content: space-between;background: #fff;padding: 0px 20rpx;box-sizing: border-box; 
}.menuTab {
/* 2.第二层的元素设置一个超过100%的宽度; */width: 140%; 
/* 设置flex布局后,子元素的宽高不生效问题。 如果希望子元素的宽高生效,解决方法,给子元素添加如下属性: flex-shrink: 0; */flex-shrink: 0;display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-around; height: 100%;
}
/* 3.子元素不设置宽度,就是自适应的宽度; */
.selected-menu {  padding: 0 32rpx; height: 100%;font-size: 32rpx;font-family: PingFang SC;font-weight: bold; color: #151521;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative; 
}.unselect-menu { padding: 0 32rpx; height: 100%;font-size: 32rpx;font-family: PingFang SC; color: rgba(21, 21, 33, .5);display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative; 
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/128564.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不用休眠的 Kotlin 并发:深入对比 delay() 和 sleep()

本文翻译自: https://blog.shreyaspatil.dev/sleepless-concurrency-delay-vs-threadsleep 毫无疑问,Kotlin 语言中的协程 Coroutine 极大地帮助了开发者更加容易地处理异步编程。该特性中封装的诸多高效 API,可以确保开发者花费更小的精力去…

基于火山引擎云搜索服务的排序学习实战

排序学习(LTR: Learning to Rank)作为一种机器学习技术,其应用场景非常广泛。例如,在电商推荐领域,可以帮助电商平台对用户的购买历史、搜索记录、浏览行为等数据进行分析和建模;可以帮助搜索引擎对用户的搜索关键词进行分析建模&…

基于Dockerfile创建镜像

基于现有镜像创建 1.首先启动一个镜像,在容器里做修改 docker create -it centos:7 /bin/bash #常用选项: -m 说明信息; -a 作者信息; -p 生成过程中停止容器的运行。 2.然后将修改后的容器提交为新的镜像,需要使用…

全场景流量验证系统 | 京东物流技术团队

本文介绍了一种基于线上流量实现对重构系统进行功能和性能验证的实践方案。针对线上流量如何拦截、如何录制、如何存储、如何回放以及如何发压均作了详细说明,为具有类似需求的读者提供了一种可供参考的思路。 1 业务背景 随着百川项目的启动,中台需要…

平板第三方电容笔怎么样?便宜的ipad触控笔推荐

苹果原装的电容笔与国产的平替电容笔最大的区别在于,平替电容笔只有一个斜面压力感应,而苹果电容笔既有斜面压力感应,又有重力压力感应。但是,如果你不经常使用它来进行绘画的话,你也不必买选择这款苹果电容笔&#xf…

ASP.NET Core教程:ASP.NET Core 程序部署到Windows系统

框架依赖 一、发布 框架依赖(FDD):即Framework-dependent deployments的缩写。这种发布方式依赖于Framework框架,即要部署的服务器上面必须按照ASP.NET Core 运行时环境(ASP.NET Core Runtime)。这种部署方式是微软默认推荐的。下…

MySQL基础-事务

目录 1.事务简介 2.事务的操作 2.1 实验需要用到的数据 2.2 完成转账操作 修改事务执行方式 手动开启事务的方式 3.事务的四大特性 4.并发事务问题 5.事务隔离级别 5.1 事务隔离级别分类 5.2 查看事务隔离级别 5.3 设置事务隔离级别 1.事务简介 事务是一组操作的集合…

【Linux】文件权限详解

🍁 博主 "开着拖拉机回家"带您 Go to New World.✨🍁 🦄 个人主页——🎐开着拖拉机回家_Linux,Java基础学习,大数据运维-CSDN博客 🎐✨🍁 🪁🍁 希望本文能够给您带来一定的…

vue-6

一、声明式导航-导航链接 1.需求 实现导航高亮效果 如果使用a标签进行跳转的话,需要给当前跳转的导航加样式,同时要移除上一个a标签的样式,太麻烦!!! 2.解决方案 vue-router 提供了一个全局组件 router…

我的创业之路:我为什么选择 Angular 作为前端的开发框架?

我是一名后端开发人员,在上班时我的主要精力集中在搜索和推荐系统的开发和设计工作上,我比较熟悉的语言包括java、golang和python。对于前端技术中typescript、dom、webpack等流行的框架和工具也懂一些。目前,已成为一名自由职业者&#xff0…

Allegro如何用Pad Designer 设计焊盘

跟其它PCB的设计软件不一样。Allegro制作封装,第一步要先制作焊盘。 本文以圆形钻孔0.5mm,外盘0.8mm的C05D08焊盘为例一步步讲解如何制作焊盘。 1、首先打开Pad Designer,选择File→New,新建一个焊盘。 然后跳出下面的对话框,在框内输入封装名称,选择好要保存的焊盘路径…

母婴店怎么在微信小程序卖东西

随着互联网的发展,微信小程序已经成为一种新型的电商模式,它无需下载安装,使用方便,不占用手机内存,让购物变得更加简单便捷。母婴店也可以通过微信小程序来销售产品,拓宽销售渠道,增加销售额。…