css
92huahua
每天积累一点点
展开
-
css样式穿透
在style中有scoped的时候修改样式,使用样式穿透的方式修改: 1.父元素 /deep/ 子元素 2.父元素 >>> 子元素原创 2022-02-14 11:07:10 · 330 阅读 · 0 评论 -
什么是BFC?应用场景?
1. 什么是BFC? BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域,只有Block-level box(块元素)参与,它规定了内部的Block-level box如何布局,并且与这个区域外部毫不相关。 2. BFC应用场景 1. 解决边距重叠问题 2. 盒子塌陷问题 3. 清楚浮动 4. 解决浮动文字环绕问题 ...原创 2021-04-06 17:41:52 · 211 阅读 · 0 评论 -
图片(img)的等比例自动缩放
img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 根据父容器的自动缩放,并保持图片原来的比例。这样你设置父容器的大小就可以啦。原创 2021-03-15 14:32:21 · 609 阅读 · 0 评论 -
css---文本溢出使用省略号展示
一行显示 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行显示 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;原创 2020-12-16 21:59:32 · 83 阅读 · 0 评论 -
小程序中在js中定义css变量,动态添加样式
html <view class="" style="width: 100%;height: 200rpx;{{setStyle}}">//相当于直接给加行内样式style <text class="setcolor">测试测试</text> </view> JS js let setStyle = `--color:blue; --border-radius:50%; --aak-color:red;` this.setData(...原创 2020-09-08 20:23:52 · 2038 阅读 · 1 评论 -
文字水平无限循环滚动
wxml: <view class="box" style="width:100%;backgroundcolor:red;"> <view class="animate" >{{text}}</view> </view> wxss: .box { width: 300px; margin: 0 auto; border: 1px solid #ff6700; overflow: hidden; } .animate {原创 2020-08-18 22:49:26 · 446 阅读 · 0 评论 -
chrome谷歌浏览器处理字体缩放10px
.Num{ font-size: 14px; -webkit-transform: scale(0.8); }原创 2020-08-10 18:08:59 · 825 阅读 · 0 评论 -
px、em、rem的区别
px 是相对于浏览器分辨率的一个长度,默认浏览器字体的大小是16px em是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 em特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小。 rem是CSS3新增的一个相对单位,相对浏览器默认字体大小的一个长度。 换算公式:当前字体大小/浏览器的html的字体大小=xxem/xxrem. px 与 rem 的选择? 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用转载 2020-08-08 09:36:24 · 168 阅读 · 0 评论 -
子盒子高度未知的情况下,如何让一个子盒子在父盒子中水平垂直居中?
第一种方法:使用弹性布局实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-08-05 20:16:25 · 405 阅读 · 0 评论 -
使用CSS画一个扇形
使用css画扇形代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-08-03 10:16:10 · 479 阅读 · 0 评论