![](https://img-blog.csdnimg.cn/70111d769ced45e3b5aae0e213e8d8fc.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS 入门法则
文章平均质量分 69
讲解 CSS 基础+进阶
楷鹏 : )
专业炒粉/业余编程 读书写作/学习英语 喜新厌旧/好为人师
展开
-
设置 height: auto 却无法触发 transition 动画的解决方案
当 `height: auto` 时,设置 `transition` 是无法触发动画的,CSS 需要知道具体的 height 值,因此引申其他解决方案:- 方案一:使用 `transform` 的 `scaleY`,去放大缩小。 - 缺点 - 内容会变形 - 会占据原来的内容尺寸- 方案二:设置 `max-height` - 缺点 - 随着内容的增加,需要重新考虑设置 `max-height` 的值 - `transition-timing` 是作用在 `max-height` 上原创 2022-08-01 23:50:43 · 3583 阅读 · 0 评论 -
CSS 中 password 密码切换是否可见
如果是想要切换密码是否可见,只需要切换 类型为 或者 即可。原创 2022-06-22 12:11:58 · 574 阅读 · 0 评论 -
利用 CSS 的 clip-path 属性快速画三角形
结合 polygon 函数,可以快速切出一个三角形来。三角形有三个顶点,因此 需要传三个参数,每个参数是顶点的 x 和 y 轴位置百分比:🌡️ 顶点内部形状会被保留,顶点外部形状则会被隐藏掉。............原创 2022-06-21 10:50:49 · 1545 阅读 · 0 评论 -
CSS In Depth: Part 1
CSS is not a programming language.Basically, CSS is about declaring rules.The code of CSS is becoming complex as project growing. To accomplish same thing we can use multiple way. So the key part of CSS development comes down to writing rules in such a way原创 2022-06-15 16:28:38 · 224 阅读 · 0 评论 -
随着滚轮滑动,元素淡入
我们可以将淡入效果封装成一个组件。同时需要借助`Intersection Observer`,当滚轮滚到元素位置,即该元素和 Viewport 相交时,给该元素添加一个`fadeIn`类名原创 2022-06-14 23:08:40 · 1093 阅读 · 0 评论 -
margin-inline, margin-block,这是啥 CSS 属性?
当你一开始看到margin-inline时,是不是有种似曾相似的感觉,毕竟你学过margin和display: inline,却还从来没有见过两个的结合物。其实还有margin-block,这种后缀是*-inline或者*-block的属性称之为逻辑属性(logical properties)。逻辑属性其实很简单,没啥深奥的魔法,我们来通过一个例子看一下。首先介绍一个writting-mode属性,它控制文字的方向,举个🌰:在这个Box中,我们放了一行再也常见不过的文字,writting-m原创 2022-05-21 00:20:14 · 2992 阅读 · 0 评论 -
如何单纯设置水平/垂直外边距margin或者内边距padding的值
文章目录方法一:分开设置方法二:强行设置方法三:`margin-inline`结合SASS的方法四:变量结合SASS的方法四:`mixin`如题,我们需要一次性水平设置margin的值,目前的话有什么解决方案呢?下文例子用设置margin的水平方向做例子,但水平方向或者padding设置也是同理 😀方法一:分开设置很遗憾,单纯使用margin没办法做到只设置水平方向的外边距,分开设置这种方法让人沮丧,没办法做到一次性设置:margin-left: 100px;margin-right: 10原创 2022-05-18 01:01:40 · 474 阅读 · 0 评论 -
如何让var函数值变为负数
Hello, I am Pandy.坚持输出优质博客,翻译高质量文章如果你有任何问题的话,欢迎来公众号『Yopth』联系我文章很多,我做了一个网站用于索引:『 https://yopth.github.io/ 』,觉得不错的话也可以到GitHub给个star哦假设我们有一个变量--z-margin-left,需要把它变为负数,直接加符号操作符-var(-z-margin-left)不会得到结果,我们需要考虑用calc函数:以谷歌浏览器为例,我们来去修改它的LOGO:方法一:使用减法我们定.原创 2022-05-17 20:19:06 · 1506 阅读 · 0 评论 -
z-index为什么会不起作用
当你在一个positioned元素上应用z-index,会隐式创建一个全新的层叠上下文原创 2022-03-14 14:51:37 · 1445 阅读 · 0 评论 -
什么是Document Flow
文档流其实就是对元素的定位,文档流一共分为四种:正常文档流 normal document flow显示类型 display type浮动框 float定位 position原创 2022-02-27 18:51:36 · 422 阅读 · 0 评论 -
CSS中的FC到BFC
Formatting Context简单理解,就是定义了布局规则的一片区域。原创 2022-02-17 23:27:30 · 208 阅读 · 0 评论 -
习以为常但又不太了解的包含块——如何决定元素的尺寸和位置
包含块就是用于确定元素的尺寸和位置的,每一个元素都拥有自己的包含块(``的包含块称之为促使包含块)。原创 2022-01-15 22:14:07 · 200 阅读 · 0 评论 -
inline, block, inline-block区别
inline, block, inline-block区别inlineNot height and width;Not margin-top & margin-bottom;Always occupy area only necessary.(Actually, the margin-right hold the rest space from element’s right edge to line right edge.实际上是margin-right填充了该行剩余的宽度)bl原创 2022-01-09 22:47:52 · 288 阅读 · 0 评论 -
CSS的Cascade如何李姐?
CSS的样式就像瀑布流一样,自顶向下选择优先级最高的样式,并应用它。原创 2021-12-02 00:15:32 · 185 阅读 · 0 评论