Css3
喜樂的CC
劝你学后端
展开
-
box-sizing: border-box;失效问题
当前标签用了position:relative;且子标签用了position:absolute;导致盒子失效了原创 2021-07-26 16:55:50 · 4750 阅读 · 0 评论 -
CSS3弹性布局(flex)了解一下> 骰子/筛子案例
效果图:哎呀不好意思放错了,下面才是效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc原创 2018-05-23 10:18:35 · 1260 阅读 · 5 评论 -
[wechat] 小程序异形屏底部内容塌陷解决办法(安全区域)
解决办法:.page{ box-sizing: content-box; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}原因是这类新手机有安全区域的新概念:屏幕左边安全距离:safe-area-inset-left屏幕右边安全距离:safe-area-inset-right屏幕上方安全距离:safe-area-ins...原创 2021-07-08 10:58:03 · 868 阅读 · 0 评论 -
flex-wrap: wrap 溢出换行但是父盒子没有被撑开的解决办法
场景重现当使用flex布局垂直排列并且到达父盒子高度就换行的时候, 会产生溢出的情况解决办法ul{ writing-mode:vertical-lr; li{ writing-mode:horizontal-tb; }}// 父盒子: writing-mode:vertical-lr; (垂直方向内内容从上到下,水平方向从左到右)// 子元素:writing-mode:horizontal-tb; (水平方向自上而下的书写方式。即 le...原创 2021-04-29 14:55:44 · 4767 阅读 · 6 评论 -
css动态溢出自适应缩略文字ellipsis
GIF展示:原理: 父盒子自适应, 子盒子大小随父盒子动态变化, 即可实现动态缩略文字;代码:<div style="width:100%"> <p style="width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">我是一段重复的长文本|我是一段重复的长文本|我是一段重复的长文本|我是一段重复的长文本</p></div>...原创 2021-02-18 16:32:24 · 1374 阅读 · 0 评论 -
C3的translate3d代替js动画
Css3的translate3d会触发GPU,动画效果流畅不卡顿;而JS动画在数据量大的时候容易卡顿;详细移步: -webkit-transform:translate3d(0,0,0)触发GPU加速,让网页动画更流畅...原创 2019-02-15 13:46:14 · 1546 阅读 · 0 评论 -
vue结合jq按钮选中状态颜色变化和禁止再点击效果代码
<button v-for="(item,index) in data" @click="btnFun()">{{item.name}}</button>btnFun(){ $('.button').css({color:'#989898',cursor:'pointer'}).attr('disabled',false) $(`.bu...原创 2019-07-02 17:27:38 · 1526 阅读 · 0 评论