随笔分类 -  css

css选择器层级
摘要：单个css选择器的优先级 内联 > ID选择器 > 类选择器 > 标签选择器。 当有多个CSS选择器时(层级一致)怎么判断优先级 优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下： A 如果存在内联样式，那么 A = 1, 否则 A = 0; B 的值等于 ID选择器 出现的次数 阅读全文
posted @ 2022-06-22 14:48 瑞瑞大人 阅读(132) 评论(0) 推荐(0)
css变量（主题切换）
摘要：css文件 :root.light { --background--main: rgba(245, 245, 245, 1); } :root.dark { --background--main: rgba(15, 15, 15, 1); } body {background-color: var( 阅读全文
posted @ 2022-06-07 16:43 瑞瑞大人 阅读(232) 评论(0) 推荐(0)
如何引用字体包
摘要：在开发中会遇到需要导入一些特殊的字体包 如果ui只给了ttf包可以通过https://www.font2web.com/这个网址来转换为各个格式的字体文件，因为不同的文件针对不同的浏览器，如果只有单一的ttf可能会有兼容问题 新建一个css文件并引入相关字体文件 @charset "UTF-8"; 阅读全文
posted @ 2021-11-01 17:20 瑞瑞大人 阅读(392) 评论(0) 推荐(0)
解决0.5px在部分机型上面的兼容显示
摘要：.num-box { position: relative; overflow: hidden; } .num-box::before { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 200%; height 阅读全文
posted @ 2021-08-25 11:25 瑞瑞大人 阅读(330) 评论(0) 推荐(0)
把页面主体内容限定在安全区内
摘要：padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: e 阅读全文
posted @ 2021-08-18 15:55 瑞瑞大人 阅读(97) 评论(0) 推荐(0)
设置固定高度渐变背景
摘要：background: linear-gradient(180deg, #ff5289 0%, #f7f7f8 100%), #f7f7f8; background-repeat: no-repeat; background-size: 100% 1.8rem; 高度为1.8rem的linear-g 阅读全文
posted @ 2021-06-30 17:46 瑞瑞大人 阅读(543) 评论(0) 推荐(0)
css省略号
摘要：一行 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 多行 display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: bre 阅读全文
posted @ 2021-06-21 14:05 瑞瑞大人 阅读(110) 评论(0) 推荐(0)
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度
摘要：object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。 值描述 fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 contain 保持原有尺寸比例。内容被缩放。 cover 保持原有尺寸比例。但部分内容可能被剪 阅读全文
posted @ 2021-02-25 14:29 瑞瑞大人 阅读(201) 评论(0) 推荐(0)
子DIV块中设置margin-top时影响父DIV块位置
摘要：对子元素设置margin-top会存在一种情况 给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了 为什么会产生这样的效果呢？这要谈到css的盒模型margin的合并问题 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者 阅读全文
posted @ 2021-01-18 15:17 瑞瑞大人 阅读(185) 评论(0) 推荐(0)
pointer-events
摘要：pointer-events是css的属性 指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。 auto——效 阅读全文
posted @ 2021-01-15 13:57 瑞瑞大人 阅读(323) 评论(0) 推荐(0)
FFC详解及应用
摘要：要使用 flexbox 布局，只需在父 HTML 元素上设置 display 属性 display: flex; 或者你可以以内联样式的显示 display: inline-flex; 当在父容器上设置了display: flex;或者display: inline-flex;后，它的子元素都自动变 阅读全文
posted @ 2021-01-08 17:52 瑞瑞大人 阅读(1164) 评论(0) 推荐(0)
CSS position 属性
摘要：absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", 阅读全文
posted @ 2020-07-10 17:44 瑞瑞大人 阅读(122) 评论(0) 推荐(0)
配置rem
摘要：rem是基于html元素的字体大小来计算的 网页要实现的大小 = 需要设置的rem大小（根据设计稿给出的的px和自定的px和rem比例计算） * html元素的字体大小 所以要实现设计稿并且适应宽度不同的屏幕需要经过一下计算 1.由于设计稿的宽度是一定的，高度是不可控的，所以我们根据宽度来设置htm 阅读全文
posted @ 2019-09-24 17:20 瑞瑞大人 阅读(403) 评论(0) 推荐(0)
flex弹性盒子的兼容性写法
摘要：将这些添到css文件中基本上能满足页面弹性盒子的需求 /*定义弹性布局盒子*/ display：{ } /*定义子元素排列*/ 阅读全文
posted @ 2018-05-12 17:14 瑞瑞大人 阅读(927) 评论(0) 推荐(0)