这篇属于补充内容
这次作业中还有一个花时间比较久的就是小部分的定位问题,比如在弹出窗口中
顶部的箭头其实是用图片显示的,之前有看到过用纯代码通过边框展现出箭头的效果,但是在这里却不能够使用,因为那种方法只能是产生这种效果
即没有线条的,当然现在也不能断言没有别的方法。
这种方法的原理图是这样的
代码
html
<div class="item" style="width: 100px">
<div class="test"></div>
</div>
css
.test{
border-width: 50px;
border-style: solid;
border-color: yellow blue green black;
}
.item{
margin: 10px;
overflow: hidden;
clear: both;
}
然后回到作业中的问题,是如何将图片准确的定位。我在解决这个问题的时候,其实用到相对定位与绝对定位的结合。现将盒子box1设置为相对定位,将图片用作小盒子box2的背景图,将2放在1中,设置为绝对定位,由于绝对定位会根据最近的非 static 定位祖先元素的偏移,因而2其实会在1中进行偏移。当还没有很好的掌握定位时,可以根据以下步骤一步一步尝试定位:
- 将top、left属性都设置为0,观察盒子2的位置,其所在位置即初始位置
- 根据初始位置进行偏移
在偏移过程中去逐渐掌握规律,比如说初始位置的定位会包含在padding内而不再margin内;当用用到top属性时,盒子2的上边界会抵着盒子1的上填充,同理,当使用left属性时,即代表左边界抵着左填充,如下:
具体代码
html
<div style="background-color: purple;display: inline-block;">
<div class="abc"><div class="ghi"></div>
<!-- 只是为了显示出盒子内容 -->
<div class="def"></div>
</div>
</div>
css
.abc{
margin: 10px 20px 30px 40px;
padding: 40px 30px 20px 10px;
width: 50px;
height: 60px;
position: relative;
display: inline-block;
background-color: blue;
}
.def{
margin: 10px 20px 30px 40px;
padding: 40px 30px 20px 10px;
width: 50px;
height: 60px;
position: absolute;
top: 0;
left: 0;
display: inline-block;
background-color: skyblue;
}
.ghi{
background-color: #fff;
width: 50px;
height: 60px;
}
通过查看可以发现
边框是刚好抵住的,正符合上面所说的。然后就可以通过top、left、bottom、right来定位盒子的具体位置,但位置是相对位置,可以说是初始位置向相反方向移动。即top是代表初始位置在定位后位置的上面的距离,可以理解为初始位置向下移动了多少距离。
这是今天通过静态作业2所了解到之前还没有了解透彻的地方。
今天的学习笔记到这里!