盒子模型-练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型-练习</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
img
{
border:1px solid #BADBDB;
margin:10px 15px;
}
.content
{
border: 4px solid #BADBDB;
width: 740px;
background:url("./picture/t_book.gif") no-repeat;
background-color: #EFF9F9;
padding: 44px 15px 15px;
}
</style>
</head>
<body>
<div class="content">
<img src=".\picture\book1.jpg" width="80px" height="80px">
<img src=".\picture\book2.jpg" width="80px" height="80px">
<img src=".\picture\book3.jpg" width="80px" height="80px">
<img src=".\picture\book4.jpg" width="80px" height="80px">
<img src=".\picture\book5.jpg" width="80px" height="80px">
<img src=".\picture\book6.jpg" width="80px" height="80px">
</div>
</body>
</html>这是我用Webstorm打出来的，但是在右边总是有那么一小点突出，怎么将那两条线合并？还有为什么要将宽度.content的宽度从770减到740并且将图片.img的左右margin从18减到15才能勉强达成目标？视频在http://www.imooc.com/video/1331，而且视频中老师最后将770直接减到700才达成目标，这是为什么
2 回答
已采纳
菜鸟一一只
TA贡献4条经验 获得超1个赞
第一个问题 为什么宽度明明相同了 确还是没合并?怎么合并?
答:1.之所以没合并是所有元素初始设置时浏览器都添加了默认的margin 或padding值的
2.怎么合并呐? 此时只需要，加上下面这句就可以删除浏览器这些默认值，方面后面的设置。（注：不是没它不行，只是方便而已）
*{
margin: 0 ;
padding: 0 ;
}
或者
body{
margin: 0 ;
padding: 0 ;
}
第一种方法不建议使用
第二和第三个是同一个问题就一起说了
理解时请结合下图标注的红色数字理解
你应该是疑惑明明设置了.center的宽度为770 (跟背景图的宽度770一致了) 怎么还会存在空隙,两者无法合并对吧也就是我图上那种情况 我背景图宽度510 代码也设置宽度 width 为510了 怎么还是有空隙呐
呵呵,简单说 你把概念混淆了 ***************盒子尺寸 并不是 width 哈*************
盒子尺寸是: margin X 2 +padding X 2 + border X 2 +width
所以才有了图片 ① 中 宽度为 548 而不是510
说的有些啰嗦了 不知道你看懂没?不懂的话 建议回顾下
HTML+CSS基础课程
中的盒模型 视频地址 http://www.imooc.com/video/3225
纯手动 求采纳
- 2 回答
- 0 关注
- 2191 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消