CSS
关注
分享
扫一扫
SeriousLose
✎﹏小飞飞 认真你就输了，一直认真你就赢了
展开
-
Scss
加、减、乘、除、变量计算。原创 2022-11-28 13:59:34 · 829 阅读 · 0 评论 -
Scss
这样一来，也就有了—— Sass 的编译。上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。压缩输出方式——在编译的时候带上参数“ --style compressed”: 项目上线时使用，会将代码中的注释和空格省略，使源文件体积更小。那么这里告诉大家，在项目中还是引用“.css”文件，Sass 只不过是做为一个预处理工具，提前帮你做事情，只有你需要时候，他才有攻效。原创 2022-11-28 12:49:55 · 1241 阅读 · 0 评论 -
Sass
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成 文件，然后开发者就只要使用这种语言进行编码工作。什么是css预处理器?原创 2022-11-28 12:44:27 · 845 阅读 · 0 评论 -
scss
【代码】scss。原创 2022-11-27 18:03:22 · 868 阅读 · 0 评论 -
CSS Grid
如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。💡网格区域一定要形成规整的矩形区域，什么L形，凹的或凸的形状都是不支持的，会认为是无效的属性值。布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是。将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。💡注意，设为网格布局以后，容器子元素（项目）的。的顶层子元素，不包含项目的子元素，比如上面代码的元素就不是。...原创 2022-07-25 22:49:09 · 863 阅读 · 0 评论 -
CSS Flex
💡设置为Flex布局后，子元素的float、clear和属性将失效；转载 2022-07-20 21:33:58 · 131 阅读 · 0 评论 -
css 小Demo
CSS 小示例原创 2022-07-20 21:19:23 · 146 阅读 · 0 评论 -
CSS transform
💡 元素的边缘应该和像素点对齐，但是元素作用了 或者 后的计算值产生了非整数计算的结果并非整数的像素点，导致本来一个像素能渲染的内容，没有完全归纳在其像素点内，导致出现模糊的情况； 💡 由于浏览器将图层拆分到 以进行 转换，而非整数的像素偏移，使得 Chrome 在字体渲染的时候，不是那么的精确; Notion – The all-in-one workspace for your notes, tasks, wikis, and d...原创 2022-06-30 15:14:57 · 219 阅读 · 0 评论 -
pointer-events（禁止鼠标事件）
pointer-events: none; 鼠标事件失效（链接、点击等事件） 常用场景： 验证码获取； 等禁止鼠标事件； 注意： pointer-events 的值为 none 时，如果元素上绝对定位，那在它下一层的元素可以被选中。 pointer-events:...原创 2021-06-21 14:26:07 · 1319 阅读 · 0 评论 -
CSS Scrollbar (滚动条)
webkit内核浏览器（Chrome、Edge） 类名 作用 ::-webkit-scrollbar 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。 ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。原创 2021-05-12 15:18:13 · 8929 阅读 · 0 评论 -
Button Ripple
Button Ripple原创 2021-04-28 16:13:20 · 243 阅读 · 4 评论 -
CSS Hide（隐藏元素）
原创 2021-04-02 11:22:33 · 2650 阅读 · 0 评论 -
两列布局,左右拖拽
第一种利用的css的方式实现， 利用浏览器非 overflow:auto 元素 设置 resize 可以拉伸的特性实现无JavaScript的分栏宽度控制。 webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小， 于是，我们可以将整个拉伸区域变成和容器一样高 红色的就是扩大后的区域<!DOCTYPE html><html lang="en"> <head> <meta charset="U.原创 2021-03-24 22:42:26 · 1070 阅读 · 0 评论 -
CSS性能优化
实践型一、内联首屏关键CSS（Critical CSS） 性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而**内联首屏关键CSS（即Critical CSS，可以称之为首屏关键CSS）**能减少这一时间。 大家都习惯于通过link标签引用外部CSS文件。但需要知道的是，将CSS直接内联到HTML文档中能使CSS更快速地下载原创 2021-03-10 13:35:39 · 350 阅读 · 1 评论 -
Angular Style
:host /deep/ // 当前组件和其子组件内部样式生效/deep/ 组合器还有两个别名：>>> 和 ::ng-deep。encapsulation可选值为 Emulate(默认) | Native | None(可进可出) | ShadowDom@Component({ selector: 'fx-button', // 指定组件的样式封装性 encapsulation: ViewEncapsulation.None, templateUrl: './原创 2021-02-04 14:31:55 · 1033 阅读 · 4 评论 -
CSS Center（居中专题）
CSS Center（居中专题）水平居中（左右居中）// 1.inline-block + text-align .parent{ text-align: center; } .child{ display: inline-block; } // tips：此方案兼容性较好，可兼容至IE8，对于IE5 6 7并不支持inline-block，需要使用css hack进行兼容// 2.table + margin .chi原创 2020-12-29 15:15:35 · 2465 阅读 · 7 评论