css
92huahua
每天积累一点点
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css样式穿透
在style中有scoped的时候修改样式,使用样式穿透的方式修改:1.父元素 /deep/ 子元素2.父元素 >>> 子元素原创 2022-02-14 11:07:10 · 423 阅读 · 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 · 302 阅读 · 0 评论 -
图片(img)的等比例自动缩放
img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 根据父容器的自动缩放,并保持图片原来的比例。这样你设置父容器的大小就可以啦。原创 2021-03-15 14:32:21 · 680 阅读 · 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 · 140 阅读 · 0 评论 -
小程序中在js中定义css变量,动态添加样式
html<view class="" style="width: 100%;height: 200rpx;{{setStyle}}">//相当于直接给加行内样式style <text class="setcolor">测试测试</text></view>JSjslet setStyle = `--color:blue; --border-radius:50%; --aak-color:red;`this.setData(...原创 2020-09-08 20:23:52 · 2192 阅读 · 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 · 506 阅读 · 0 评论 -
chrome谷歌浏览器处理字体缩放10px
.Num{ font-size: 14px; -webkit-transform: scale(0.8); }原创 2020-08-10 18:08:59 · 899 阅读 · 0 评论 -
px、em、rem的区别
px 是相对于浏览器分辨率的一个长度,默认浏览器字体的大小是16pxem是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。em特点1. em的值并不是固定的; 2. em会继承父级元素的字体大小。rem是CSS3新增的一个相对单位,相对浏览器默认字体大小的一个长度。换算公式:当前字体大小/浏览器的html的字体大小=xxem/xxrem.px 与 rem 的选择?对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用转载 2020-08-08 09:36:24 · 239 阅读 · 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 · 474 阅读 · 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 · 580 阅读 · 0 评论
分享