随笔分类 -  css

常遇问题
flex布局内容被撑开及flex布局下固定的宽被压缩
摘要：实现效果使用flex进行左右布局，左边定宽200px，右边自适应，当右边内容过多，造成右边盒子被撑开，会造成两种问题 左边定宽盒子被压缩解决办法： flex-grow:0;//是否自动增长空间 flex-shrink:0;//是否自动缩小空间 右边自适应的盒子被撑开 解决办法： flex:1; wi 阅读全文
posted @ 2023-09-06 11:46 吃不棒的胖胖糖 阅读(1247) 评论(0) 推荐(0)
解决input自动填充账号密码时的背景色
摘要：input:-webkit-autofill：自动填充 class 类名； -webkit-box-shadow：使用盒子阴影遮挡input背景色； -webkit-text-fill-color: 设置填充的字体的颜色； border-radius：一定要设为 0，默认是有弧度的； width：长 阅读全文
posted @ 2023-06-30 19:03 吃不棒的胖胖糖 阅读(277) 评论(0) 推荐(0)
css 优惠券波浪线效果
摘要：<ul> <li> <i class="left"></i><span class="center"></span><i class="right"></i> </li> ... </ul> li { position:relative; line-height: 30px; } i { posit 阅读全文
posted @ 2023-06-12 14:30 吃不棒的胖胖糖 阅读(243) 评论(0) 推荐(0)
flex 左右布局-----在手机端，当左侧宽度固定，右侧宽度自适应时，右侧会超出浏览器窗口的问题解决方案
摘要：废话不多说：直接上代码解决问题； 父级： .parent { display: flex; flex-flow: row; } 子级： .left-child { width:100px; } .right-child { flex:1; overflow:hidden;/width:0; } 注解 阅读全文
posted @ 2023-06-07 15:06 吃不棒的胖胖糖 阅读(124) 评论(0) 推荐(0)
在线flex布局----自己写的一个flex布局的小玩意，需要的私聊加关注0.0
摘要： 阅读全文
posted @ 2022-07-04 08:48 吃不棒的胖胖糖 阅读(53) 评论(0) 推荐(0)
换行的几种方式
摘要：1.需要固定宽度 .ellipsis{ width: 300px; overflow: hidden;/*超出部分隐藏*/ white-space: nowrap;/*不换行*/ text-overflow:ellipsis;/*超出部分文字以...显示*/ } 原文链接：https://blog. 阅读全文
posted @ 2021-07-28 17:32 吃不棒的胖胖糖 阅读(144) 评论(0) 推荐(0)
footer沉底效果
摘要：介绍一个简单直接的方法: flex布局 heml,body{ height: 100%; min-height: 100%; display: flex; flex-direction: column; } footer{ margin-top: auto; } 阅读全文
posted @ 2020-09-21 14:14 吃不棒的胖胖糖 阅读(173) 评论(0) 推荐(0)