巧用CSS的left|op|right|bottom值快速给子元素定位
本帖最后由 马黑黑 于 2022-4-2 18:07 编辑 <br /><br /><p>假设有父子元素如下：<br> </p><pre><<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"father"</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"son"</span>><<span style="color: darkred">/div</span>>
<<span style="color: darkred">/div</span>>
</pre>
<p><br>现在想把儿子元素定位在父亲元素的指定位置，通常的实现思路无非就是分两步走：在CSS里，一是给父子元素设定position为relative和absolute，二是给子元素设定 left 和 top 值：<br> </p>
<pre><span style="color: red;">.father </span>{
<span style="color: blue;">margin</span>: auto;
<span style="color: blue;">width</span>: 600px;
<span style="color: blue;">height</span>: 400px;
<span style="color: blue;">background</span>: olive;
<span style="color: blue;">position</span>: relative;
}
<span style="color: red;">.son </span>{
<span style="color: blue;">position</span>: absolute;
<span style="color: blue;">width</span>: 80px;
<span style="color: blue;">height</span>: 50px;
<span style="color: blue;">left</span>: 10px;
<span style="color: blue;">top</span>: 10px;
<span style="color: blue;">background</span>: pink;
}</pre>
<p><br> 这是不错的思路。上面的CSS代码，儿子元素在父亲元素的左上角，弄到右上角，用 left 值来设定位置的话就会有点麻烦，需要去计算父亲元素的宽度，还需要结合自己的宽度尺寸。这时，用 right 值替代 left 值就很省事：</p><p><br></p><p> <font color="#0000ff">right:</font> 10px;</p>
<p><br> 右下角呢？用 right 取代 left、用 bottom 取代 top：</p><p><br></p><p> <font color="#0000ff">right</font>: 10px;<br> <font color="#0000ff">bottom</font>: 10px;</p><p><br></p><p>最后是左下角，用 bottom 取代 top：</p><p><br></p><p> <font color="#0000ff">left</font>: 10px;</p><p> <font color="#0000ff"> bottom</font>: 10px;</p><p><br></p><p>当儿子元素偏右或偏下的时候，上述方法比较经济，我们要做的就是儿子元素需要离开右边或底边多少个像素即可。</p><p><br></p><p>但当需要儿子元素绝对居中时，还是要老老实实用公式设定 left 和 top 值（假设儿子元素的宽高分别为80、60像素）：</p><p><br></p><p> <font color="#0000ff">left</font>: calc(50% - 40px);</p><p> <font color="#0000ff">top</font>: calc(50% - 30px);</p><p><br></p><p>以上父子元素定位很实用，可以做做尝试，加深体会。我将在后续回复中给出一个完整的实现案例。</p><p><br></p> <style type="text/css">
.father {
margin: auto;
width: 600px;
height: 400px;
background: olive;
position: relative;
}
.father div {
position: absolute;
width: 80px;
height: 60px;
background: pink;
text-align: center;
line-height: 60px;
}
.father div:nth-Child(1) {
left: 10px;
top: 10px;
}
.father div:nth-Child(2) {
right: 10px;
top: 10px;
}
.father div:nth-Child(3) {
right: 10px;
bottom: 10px;
}
.father div:nth-Child(4) {
left: 10px;
bottom: 10px;
}
.father div:nth-Child(5) {
left: calc(50% - 40px);
top: calc(50% - 30px);
}
</style>
<p>演示实例：<br> </p>
<div class="father">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
二楼代码：
<style type="text/css">
.father {
margin: auto;
width: 600px;
height: 400px;
background: olive;
position: relative;
}
.father div {
position: absolute;
width: 80px;
height: 60px;
background: pink;
text-align: center;
line-height: 60px;
}
.father div:nth-Child(1) {
left: 10px;
top: 10px;
}
.father div:nth-Child(2) {
right: 10px;
top: 10px;
}
.father div:nth-Child(3) {
right: 10px;
bottom: 10px;
}
.father div:nth-Child(4) {
left: 10px;
bottom: 10px;
}
.father div:nth-Child(5) {
left: calc(50% - 40px);
top: calc(50% - 30px);
}
</style>
<div class="father">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
二楼的演示，为了简洁，子元素我用了 :nth-child(x) 选择器，x 代表儿子元素的第 x 个。
儿子元素的共性属性放在 .father div {...} 选择器里。然后用 :nth-child(x) 分别设定第 x 个子元素的位置。
:nth-child(x) 中的 child 我在示例中用了大写的 C（受JS影响太深），其实规范是用小写，好在这里并不影响。 非常实用的知识，黑黑辛苦了{:4_187:} 红影 发表于 2022-4-2 19:20
非常实用的知识，黑黑辛苦了
这个确实很实用 马黑黑 发表于 2022-4-2 23:50
这个确实很实用
嗯，上下左右要会巧用，我只习惯用TOP和LEFT，弄得数字老大的{:4_173:} 受教了，这个方法好。跟到学习。 加林森 发表于 2022-4-3 19:31
受教了，这个方法好。跟到学习。
{:4_190:} 红影 发表于 2022-4-3 19:14
嗯，上下左右要会巧用，我只习惯用TOP和LEFT，弄得数字老大的
合适的时候用用吧 马黑黑 发表于 2022-4-3 20:10
谢谢！ 加林森 发表于 2022-4-3 20:25
谢谢！
客气了 马黑黑 发表于 2022-4-3 20:25
客气了
我感觉我得慢慢接受这些的，快了就容易糊涂了。 加林森 发表于 2022-4-3 20:29
我感觉我得慢慢接受这些的，快了就容易糊涂了。
消化需要过程 马黑黑 发表于 2022-4-3 20:38
消化需要过程
嗯嗯，我不能急的。 加林森 发表于 2022-4-3 20:39
嗯嗯，我不能急的。
对，慢慢来 马黑黑 发表于 2022-4-3 20:40
对，慢慢来
嗯嗯，我慢慢去消化吧。 加林森 发表于 2022-4-3 20:44
嗯嗯，我慢慢去消化吧。
{:4_190:} 马黑黑 发表于 2022-4-3 21:17
今晚你喝酒没有呢？ 加林森 发表于 2022-4-3 21:22
今晚你喝酒没有呢？
喝了喝了
页:
[1]
2