网页布局案例的2-4编程练习有问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
img{
width: 380px;
height: 240px;
}
/*此处写代码*/
.div2{
width:380px;
height:240px;
/*position:absolute;*/
/*top:0;*/
/*什么情况下使用绝对定位还是相对定位？？？*/
/*position:relative;*/
/*top:-240px;*/
background-color:black;
opacity:0.5;
z-index:1;
}
</style>
</head>
<body>
<nav>
</nav>
<div class="div1">
<img src="http://img1.sycdn.imooc.com/climg//58f829ca00010be703840240.jpg">
</div>
<!-- 此处写代码 -->
<div class="div2"></div>
</body>
</html>1、div1不是根据图片内容来扩充高度吗？为啥下边还有空白？
2、我试了相对定位跟绝对定位好像都能实现这个遮罩效果，那什么情况下使用相对定位还是绝对定位比较好？
13
收起
正在回答 回答被采纳积分+1
1回答
好帮手慕阿莹
2018-06-11 13:29:55
1、有白边是因为图片默认有个白边，你可以给图片设置一下：
img{
width: 380px;
height: 240px;
/*添加以下属性可以去除白边*/
display:block;
}
2、此处应该用绝对定位，position:absolute；
用position:absolute；的效果：
用相对定位position:relative;的效果：
我们需要的是第一种效果，在把自己当做一个参照物的时候用相对定位，可以给别人做一个定位标杆
绝对定位的元素的位置相对于最近的已定位祖先元素进行定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，也就是body。
建议同学可以再看一下2-3和2-5，以及教辅资料《绝对定位教辅》
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星