随笔分类 -  CSS

深入理解 伪类选择器 :nth-child(notation) 的参数
摘要：简介 :nth-child(notation) 是 CSS3 规范中新增的一个伪类选择器，用于选中符合 notaion 表达式的目标“子元素”。 该选择器左侧若有其他选择器，表示命中同时符合左侧条件以及 notation 的“子元素”，如：p:nth-child(n+2) 表示命中所有属于其父元素下 阅读全文
posted @ 2022-12-12 12:36 CJc_3103 阅读(439) 评论(0) 推荐(0)
总结 DOM、BOM API 中的尺寸与布局相关属性和方法
摘要：简介 本文根据 MDN 上 DOM、BOM API 中与尺寸和布局相关属性和方法的说明，总结成表，方便快速查询。 对象层级 屏幕(screen) 物理设备(device) 屏幕可用区域(avai) 浏览器窗口(window) 视口(viewport) 文档节点(documentElement) 以及 阅读全文
posted @ 2022-11-29 20:39 CJc_3103 阅读(237) 评论(0) 推荐(0)
浅谈 element-ui 中 css 的部分代码规范
摘要：简介 css 作为前端开发的重要一环，其代码量随着项目规模的增加，也是越发复杂；而且，由于 css 并不属于传统意义上的“编程语言”，其组织形式与编程语言也会有所区别。 若只是用于个人开发，选择符合个人习惯的方式即可。但由于多人开发更为常见，因此，很多组织都提出了专业建议，可以帮助开发者更好地组织 阅读全文
posted @ 2022-11-15 16:01 CJc_3103 阅读(1546) 评论(0) 推荐(0)
详解 CSS 中的 matrix 和 matrix3d 变换原理
摘要：背景简介 网上有很多介绍 matrix 和 matrix3d 原理的文章，但很多只介绍了“何为矩阵”、“matrix和其他‘单一变换’的换算关系”（很多还不包含 3d 变换的换算规则）。看完还是有很多疑惑： 为什么这里会使用矩阵 为什么矩阵的维度比坐标多一维（2d 变换是三维矩阵，3d 变换是四维矩 阅读全文
posted @ 2022-07-13 21:25 CJc_3103 阅读(4598) 评论(1) 推荐(1)
验证 flex-grow 与 flex-shrink 的计算公式
摘要：背景简介 关于 flex-grow 与 flex-shrink 的计算公式，网上已经有很多详细的分析文章了，这里不再阐述原理，只用一些简单的 js 函数来模拟计算过程。 这里放几篇介绍原理的文章： https://blog.csdn.net/Snoopyqiuer/article/details/1 阅读全文
posted @ 2022-07-08 16:32 CJc_3103 阅读(52) 评论(0) 推荐(0)
CSS3 2d变换与3d变换中的几个难点
摘要：CSS3中新增了2d变换和3d变换的特性，可以在不使用JS操作动画的前提下，对元素做基本的变换，包括：平移、缩放、旋转、和倾斜。此外，还提供了：2d转换基点（transform-orgin）、3d视点（perspective-origin）、视距（perspective）等属性，为变换提供更多可能性 阅读全文
posted @ 2017-08-28 23:24 CJc_3103 阅读(471) 评论(0) 推荐(0)
给自己的随笔加一个好看的（并不）导航列表
摘要：前言 由于本人学新技术时，喜欢把所有相关知识堆在一块，经常文章过长，想要定位到某一特定知识点时非常不方便，因此想着给长随笔加一个导航链接。一开始没明白博客园自定义样式的工作原理，吭哧吭哧把代码码好，发布出去一看，WTF，样式不对啊，这么丑的东西才不是我写的。 赶紧打开F12，一看，原来是博客园本身的 阅读全文
posted @ 2017-08-23 18:53 CJc_3103 阅读(274) 评论(0) 推荐(0)