马黑黑 发表于 2024-3-8 12:41
你需要体会一下伪元素：
做一个 400*400 的 div，背景色蓝色，一个伪元素 100 * 100，背景色红色，一 ...
一会来试试
绿叶清舟 发表于 2024-3-9 16:08
一会来试试
这个应该没有什么难度
马黑黑 发表于 2024-3-9 12:08
是的，俺善忘
没事，本来就是玩{:4_173:}
红影 发表于 2024-3-9 21:45
没事，本来就是玩
玩的更容易忘掉
马黑黑 发表于 2024-3-9 21:46
玩的更容易忘掉
是啊，因为过眼不用心{:4_173:}
马黑黑 发表于 2024-3-9 18:39
这个应该没有什么难度
https://www.huachaowang.com/forum.php?mod=viewthread&tid=55999&highlight=%CE%B1%D4%AA%CB%D8看这里第一个元素必须相对定位吗
本帖最后由 马黑黑 于 2024-3-10 20:20 编辑 <br /><br />绿叶清舟 发表于 2024-3-10 19:33
https://www.huachaowang.com/forum.php?mod=viewthread&tid=55999&highlight=%CE%B1%D4%AA%CB%D8看这里 ...
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<p>父元素相对定位（relative）+ 子元素绝对定位（absolute）主要是为了方便再父元素中定位子元素，伪元素可以看做是宿主元素的子元素。请到这里测试一下以下代码： <a href="http://mhh.52qingyin.cn/api/pcode/">哪里？</a><br><br></p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">.ma {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">margin:</span> 20px auto 0;</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 600px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">height:</span> 300px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">border:</span> 1px solid gray;</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="8">}</cl-cd>
<cl-cd data-idx="9">.ma::before, .ma::after {</cl-cd>
<cl-cd data-idx="10"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="11">}</cl-cd>
<cl-cd data-idx="12">.ma::before {</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">content:</span> <span class="tMagenta">'伪元素 ::before'</span>;</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">width:</span> 100px;</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">height:</span> 100px;</cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">background:</span> pink;</cl-cd>
<cl-cd data-idx="17">}</cl-cd>
<cl-cd data-idx="18">.ma::after {</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">content:</span> <span class="tMagenta">'伪元素 ::after'</span>;</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">width:</span> 200px;</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">height:</span> 200px;</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">right:</span> 0;</cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">background:</span> lightblue;</cl-cd>
<cl-cd data-idx="24">}</cl-cd>
<cl-cd data-idx="25"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="26"> </cl-cd>
<cl-cd data-idx="27"><<span class="tDarkRed">div</span> class=<span class="tMagenta">"ma"</span>><<span class="tDarkRed">/div</span>></cl-cd>
</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
就是所谓的大致像一条鱼儿？
就是，眼睛长肚子上还是长脚底就不是俺管的了{:4_189:}