随笔分类 - CSS
1
摘要：Pretext 是一个用 TypeScript 实现的用于多行文本精确测量和布局的引擎。不碰 DOM，不触发 reflow，却能完美匹配浏览器字体引擎在各种语言、emoji、混合文字方向下的真实表现。它刚刚发布，发展势头很猛。 我觉得这是过去十年里最值得关注的文本引擎之一。它不是小打小闹的优化，而是
阅读全文
摘要：
好基友扔过来一张效果图，简单分析下，一起看看如何实现它吧。 一个半环形用于表示 0 - 100%。 半环形开头有一个圆点作为修饰。 半环形两端需要呈现为圆角。 通过 div 实现 先画一个长方形。 <div class="graph"></div> .graph { width: 200px; he
阅读全文
好基友扔过来一张效果图，简单分析下，一起看看如何实现它吧。 一个半环形用于表示 0 - 100%。 半环形开头有一个圆点作为修饰。 半环形两端需要呈现为圆角。 通过 div 实现 先画一个长方形。 <div class="graph"></div> .graph { width: 200px; he
阅读全文
摘要：html { position: relative; width: 100%; height: auto; overflow: scroll; background: #fff; } html::before { position: absolute; inset: 0; z-index: 9999
阅读全文
摘要：<checkbox class="custom-checkbox"></checkbox> .custom-checkbox .wx-checkbox-input{ border-radius: 50%; border: 2rpx solid #FC703E; } .custom-checkbox
阅读全文
摘要：这样虽然有提示但不行，在 <md: 和 !w-full 之间加个空格 <md: !w-full 就可以了。https://github.com/windicss/windicss/discussions/387
阅读全文
摘要：🤷♂️ 这是一个实验性技术，正如你所见，它兼容性目前糟糕。但是 Chrome 是在不断支持它的。 介绍 @property CSS 是 CSS Houdini api 的一部分，它允许开发人员显式定义 CSS 自定义属性，允许属性类型检查，设置默认值，并定义属性是否可以继承值。该规则直接在样式表
阅读全文
摘要：前置内容 CSS 自定义属性 “自定义属性”（有时候也被称作 “CSS 变量” 或者 “级联变量”）是由 CSS 作者定义的。声明变量时，变量名前要加上 --，例如 --example: 20px 即是一个 CSS 自定义属性的声明语句。意思是将 20px 赋值给自定义变量 --example。在
阅读全文
摘要：定义一个 map： $postMeaage: ( categoriesBackground: #ff6b6b, tagsBackground: #ff6b6b #fbc531 #22a6b3 #10ac84 #0097e6, ) !default; 加上 !default 代表这个 map 是默认的
阅读全文
摘要：前置 这篇文章能够帮助你了解 web 移动端适配。如有不足，恳请指点一二！ 单位 分辨率: 单位面积显示像素的数量，和 css 无关 DPI：图像每英寸长度内的像素点数（1 英尺=30.48 厘米） css 的 px: 96 DPI 的单像素的物理大小 物理像素：在由一个数字序列表示的图像中的一个最
阅读全文
摘要：transform CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。 旋转 rotate() 旋转 函数通过指定的角度参数使元素相对原点进行旋转。 它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。 如果这个值为正值
阅读全文
摘要：响应式cssのmedia文件分离 media简介 1.媒体查询，添加自CSS3 2.一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身 语法 1.媒体查询包含一个可选的媒体类型和媒体特性表达式
阅读全文
摘要：前置 在 CSS 盒子模型的默认定义里，你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边
阅读全文
摘要：iconfont三种方式的优缺点 unicode 优点： 1.兼容性最好，支持ie6+ 2.支持按字体的方式去动态调整图标大小，颜色等等 缺点： 1.不支持多色图标 2.在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font size、l
阅读全文
摘要：什么是css预处理器 CSS 预处理器是一个能让你通过预处理器自己的语法生成CSS的工具。预处理器有许多： 1.Sass（SCSS） 2.LESS 3.Stylus 4.Turbine 5.Swithch CSS 6.CSS Cacheer 7.DT CSS ... 什么是sass？ Sass is
阅读全文
摘要：什么是 CSS 变量 CSS变量的两种形式： 自定义属性 这些属性使用--name的特殊格式作为名字。例如--example: 20px即是一个 css 声明语句。意思是将 20px 赋值给--example变量。 变量 变量就是拥有合法标识符和合法的值,可以被使用在任意的地方。通过var()函数使
阅读全文
摘要：rem是什么？ 绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，指定的值是不会变化的。例如mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches） pt, pc: 点（Points (1/72 of an inch)），
阅读全文
摘要：预定义 :root 匹配元素所在文档的根元素。在HTML文档中，根元素始终是``。 :empty 选择没有任何内容的元素(有空格也不行)。 :target 表示一个唯一的元素（目标元素），其ID与URL的片段匹配。 :first child 选择元素中的第一个 子元素 。 :last child 选
阅读全文
摘要：权重计算规则 内联样式，如: ，权值为 。 ID选择器，如： ，权值为 。 类，伪类和属性选择器，如 ，权值为 。 类型选择器和伪元素选择器，如 ，权值为 。 通配符、子选择器、相邻选择器等的。如 ,权值为 。 继承的样式没有权值。 权值越大，权重越高 !important 用来提升优先级，加了这句
阅读全文
摘要：前置 flex 大致分为两类属性：容器属性和项目属性（容器内部项目的属性）。flex 属性（flex：1 ）如就给容器内部项目设置的属性。 <div id="wrap"> <div class="item"></div> <div class="item"></div> <div class="it
阅读全文
摘要：position 属性的值 默认值 相对定位 绝对定位 固定定位 粘性定位（本文不讲这个） position:static 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。 此时 `right bottom left z index` 属性无效。 position:relat
阅读全文
1
浙公网安备 33010602011771号