为什么子div长宽会超出父div呢？

cornellbox 2013-06-01 07:35:30

html:
<div id="box">
<div id="box_child">
</div>
<div id="box_child">
</div>
</div>

css:
#box{
width: 690px;
height:600px;
background-color:#f99;
margin:0 auto;
float:left;
margin-top:30px;
}

#box_child{
width: 680px;
height:200px;
background-color:#f90;
margin:0 auto;
float:left;
margin-top:30px;
padding:50px;
}

子div的长宽定义时比父div小，为什么显示却超出父div很多？

...全文

3646 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

KK3K2005 2013-06-02

打赏
举报

padding属性要计算再额外的宽度里面除了ie早期版本

ZhenJiangYang 2013-06-02

打赏
举报

你看你在定义子元素的时候，有这么一句：padding:50px，这说明什么，这说明你要在子div的四个边上都加上50px的空白，这样你的子div的宽度就变成了：左边框宽度(0px)+左空白宽度(50px)+中间内容宽度(这里定义的是680px)+右空白宽度(50px)+右边框宽度（0px)，就等于多少了？等于780px了，而父div只有690px，它当然会超出去喽

街头小贩 2013-06-01

打赏
举报


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{
float:left;
width: 100%;
height:100%;
background-color:#f99; 

margin-top:30px;
}


.box_child{
float:left;
width: 680px;
height:200px;
background-color:#f90; 

margin-top:30px;
padding:50px;
}
</style>
</head>

<body>
<div id="box">
<div class="box_child"></div>
<div class="box_child"></div>
</div>
</body>
</html>

街头小贩 2013-06-01