纯CSS绘制风车（一）

绿叶清舟

马黑黑 发表于 2024-3-8 12:41
你需要体会一下伪元素：

做一个 400*400 的 div，背景色蓝色，一个伪元素 100 * 100，背景色红色，一 ...

一会来试试

马黑黑

绿叶清舟 发表于 2024-3-9 16:08
一会来试试

这个应该没有什么难度

红影

马黑黑 发表于 2024-3-9 12:08
是的，俺善忘

没事，本来就是玩

马黑黑

红影 发表于 2024-3-9 21:45
没事，本来就是玩

玩的更容易忘掉

红影

马黑黑 发表于 2024-3-9 21:46
玩的更容易忘掉

是啊，因为过眼不用心

绿叶清舟

马黑黑 发表于 2024-3-9 18:39
这个应该没有什么难度

https://www.huachaowang.com/foru ... =%CE%B1%D4%AA%CB%D8看这里第一个元素必须相对定位吗

马黑黑

绿叶清舟 发表于 2024-3-10 19:33 https://www.huachaowang.com/foru ... =%CE%B1%D4%AA%CB%D8看这里 ...

父元素相对定位（relative）+ 子元素绝对定位（absolute）主要是为了方便再父元素中定位子元素，伪元素可以看做是宿主元素的子元素。请到这里测试一下以下代码： 哪里？

<style> .ma {     margin: 20px auto 0;     width: 600px;     height: 300px;     border: 1px solid gray;     position: relative; } .ma::before, .ma::after {     position: absolute; } .ma::before {     content: '伪元素 ::before';     width: 100px;     height: 100px;     background: pink; } .ma::after {     content: '伪元素 ::after';     width: 200px;     height: 200px;     right: 0;     background: lightblue; } </style>   <div class="ma"></div>

绿叶清舟

马黑黑 发表于 2024-3-10 20:18
本帖最后由 马黑黑 于 2024-3-10 20:20 编辑

这样能出来，如果都是绝对定位呢

马黑黑

绿叶清舟 发表于 2024-3-10 21:03
这样能出来，如果都是绝对定位呢

没问题。这个，前提是，宿主元素必须定位，没说是啥定位

绿叶清舟

马黑黑 发表于 2024-3-10 21:37
没问题。这个，前提是，宿主元素必须定位，没说是啥定位

去看了二个都是绝对定位的，就是没出来

马黑黑

绿叶清舟 发表于 2024-3-12 19:18
去看了二个都是绝对定位的，就是没出来

绝对定位的元素，必须设置 width 和 height，不然，如果里面没有非绝对定位的内容的话，它们的宽高是0

绿叶清舟

马黑黑 发表于 2024-3-12 19:42
绝对定位的元素，必须设置 width 和 height，不然，如果里面没有非绝对定位的内容的话，它们的宽高是0

width 和 height好象只设置了一个

马黑黑

绿叶清舟 发表于 2024-3-12 19:51
width 和 height好象只设置了一个

两个都需要。只有一些特殊情况可以只设置一个，比如 <img> 标签，设其中一个就可以，另一个是auto

绿叶清舟

马黑黑 发表于 2024-3-12 19:54
两个都需要。只有一些特殊情况可以只设置一个，比如  标签，设其中一个就可以，另一个是auto

上次在哪个贴里，只设置了一个就有显示所以这里也偷懒了

马黑黑

绿叶清舟 发表于 2024-3-12 19:56
上次在哪个贴里，只设置了一个就有显示所以这里也偷懒了

不同的元素、不同的场合，会有不同的结果。理解这些，需要基础知识。

绿叶清舟

马黑黑 发表于 2024-3-12 20:02
不同的元素、不同的场合，会有不同的结果。理解这些，需要基础知识。

这个基础基本没有了

马黑黑

绿叶清舟 发表于 2024-3-12 20:25
这个基础基本没有了

所以就只能胡搞一通

绿叶清舟

马黑黑 发表于 2024-3-12 22:47
所以就只能胡搞一通

就是啊，搞个大概就成了

马黑黑

绿叶清舟 发表于 2024-3-14 20:38
就是啊，搞个大概就成了

就是所谓的大致像一条鱼儿？

绿叶清舟

马黑黑 发表于 2024-3-15 11:56
就是所谓的大致像一条鱼儿？

就是，眼睛长肚子上还是长脚底就不是俺管的了