2 zaxlctjs zaxlctjs 于 2015.07.26 11:01 提问

div+css布局的一个很小问题,求解,谢谢了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
.A{width:950px; height:40px; background:#ccc;}
.nav{width:800px; height:20px; background:blue; margin-top:5px;}
</style>
</head>

<body>
<div class="A">
   <div class="nav"></div>
</div>
</body>
</html>


在我的想象中, 打开浏览器应该是这样的
图片说明

然而,实际上,打开浏览器却是这样的
图片说明

为什么会这样,
margin-top为什么不基于他外面的大盒子,而是基于外面显示?

9个回答

vuturn
vuturn   2015.07.26 11:48
已采纳

父div没有padding或者border,垂直外边距会发生合并。

CSDNXIAOD
CSDNXIAOD   2015.07.26 11:12

DIV+CSS布局的一个小问题的解决
div+Css三列布局中的一个小问题
DIV+CSS布局
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

strutce
strutce   Ds   Rxr 2015.07.26 11:09

<!doctype html>



无标题文档 *{margin:0; padding:0;position:absolute; z-index:1;} .A{width:950px; height:40px; background:#ccc;} .nav{width:800px; height:20px; background:blue; margin-top:10px;}


strutce
strutce 把css样式改成这样就可以了,
接近 3 年之前 回复
vuturn
vuturn   2015.07.26 11:49

你在父div加上padding或者border就不会了,自己百度下垂直外边距合并,就明白了

zhangyang5023637
zhangyang5023637   2015.07.26 12:03

<!doctype html>



无标题文档 *{margin:0; padding:0;} .A{width:950px; height:40px; background:#ccc; float:left} .nav{width:800px; height:20px; background:blue; margin-top:5px;float:left}


你的样式属性里面少了 这个 float:left

zhangyang5023637
zhangyang5023637   2015.07.26 12:04

<!doctype html>



无标题文档 *{margin:0; padding:0;} .A{width:950px; height:40px; background:#ccc;} .nav{width:800px; height:20px; background:blue; margin-top:5px;}


你的样式属性里面少了这个 float:left

showbo
showbo   Ds   Rxr 2015.07.26 13:28
danielinbiti
danielinbiti   Ds   Rxr 2015.07.26 11:17
 .A{width:950px; height:40px; background:#ccc;}
 这个样式改改,在chrome或者ff下需要增加overflow:hidden或者overflow:auto; 
.A{width:950px; height:40px; background:#ccc;overflow:hidden}

或者用父容器的padding-bottom来控制。
cuiwei1026522829
cuiwei1026522829   Ds   Rxr 2015.07.26 17:09
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
求助各位高手,帮忙做下,谢谢了
由计算机“想”一个四位数,请人猜出这个四位数是多少。人输入四位数字后,计算机首先判断这四位数字有几位是猜对了,并且在对的数字中又有几位位置也是对的,将结果显示出来,给人以提示,请人再猜,直到人猜出计算机所想的四位数是多少时为止。 
DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充
作为一个前端小白,这是我面试前端职位的题目之一,没有实践经验,误打误撞,最后还是错了! 今天难得有时间,认真思考了一下。答案不一定最佳的解决方案,但是能实现同等效果。 问题描述:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为200px,中间那个DIV充满剩余的宽度。 这个题目是我当时做的第一个题目,看完题目就把答案写出来了:不就是一个float:left;的事情吗
Broken Necklace破碎的项链
Broken Necklace破碎的项链 你有一条由 N 个红色的,白色的,或蓝色的珠子组成的项链(3                                              r 代表 红色的珠子
CSS + DIV 布局控制 菜单
CSS + DIV 布局控制 菜单CSS + DIV 布局控制 菜单CSS + DIV 布局控制 菜单CSS + DIV 布局控制 菜单CSS + DIV 布局控制 菜单
div+css布局资料
div css 布局div css 布局
div+css 面试题目
1.超链接访问过后hover样式就不出现的问题?被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A2.IE6的双倍边距BUG例如:浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline3.为什么FF下文本无法撑开容器的高度?标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识m
css之品字布局
1、品字布局(每块都有固定宽高) 品字布局 *{margin:0; padding:0;} div{ width:100px; height:100px; background:red; font-size:40px; line-height:100px; color:#fff; text-align:center;} .div1{ margin:50px auto 0;} .div2
css div左右布局两种方式示例代码
css div左右布局两种方式示例代码,兼容性好,复制即用。
css实现左右布局,左侧div固定不变,右侧div宽度自适应
1.如果不考虑浏览器的兼容问题的话,可以使用css3的新增属性 calc()  ;calc是calculate的简写,汉语为计算的意思。 .left{ width: 200px; float: left; height: 200px; background: pink; } .right{ float: left; width: calc(100% - 200px);
div css 布局大全
div css布局大全,想了解布局的话不妨看一看。 div css div css。