css 练习笔记1

1.css嵌套/后代选择

语法:

css 复制代码
.a .b{

}

或者(scss语法)

css 复制代码
.a{

    .b{

    }

}

表示 class b只有在b是定义在class a的后代元素上时才生效。

2.transform-style

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/transform-style

https://www.w3school.com.cn/cssref/pr_transform-style.asp

设置父元素内部是3D还是2D。

设置成flat的时候,可以看成父元素内部空间是平面的,子元素和父元素的动画效果都在同一个平面。

设置成preserve-3d的时候,可以把父元素空间想象是一个3D空间,父元素变形效果和子元素变形效果可以存在空间关系。

3.z-index

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Properties/z-index

https://www.w3school.com.cn/cssref/pr_pos_z-index.asp

相关推荐
ModyQyW39 分钟前
vite-plugin-uni-manifest 更新了什么
前端·typescript·uni-app
Asize2 小时前
AI 协作开发新范式:我用 SDD 做了个排版 npm 包
前端·人工智能
kyriewen3 小时前
我把今年流传的前端 AI 面试题整理了一遍——4 类场景题+回答框架(附速查表)
前端·面试·程序员
计算机魔术师4 小时前
国产多模态模型正面硬刚Opus旗舰:差距从30%缩到3%
前端
风骏时光牛马4 小时前
程序员进阶:深度思考,解锁职场成长的底层逻辑
前端
IT_陈寒4 小时前
用了Proxy才发现以前的JavaScript白写了
前端·人工智能·后端
爱丶不疚5 小时前
Eval: Agent 说的 Eval 是什么?从单测、TDD 到 Sentry 聊起
前端·ai编程·vibecoding
三十而立洋5 小时前
Flex 与 Grid 布局完全指南
css
求道於盲5 小时前
python中的类型标注
前端
计算机魔术师5 小时前
从硅谷测试到全球铺开,ChatGPT广告的10亿美元秘密
前端