请问老师当left,right设置浮动后对wz进行margin-top设置参考是body、

请问老师当left,right设置浮动后对wz进行margin-top设置参考是body、

请问老师当left,right设置浮动后对wz进行margin-top设置边距时参考的是body,而不是container

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{margin: 0;padding: 0;}

.container{width: 1000px;height: 600px; margin: 0 auto; /*overflow: hidden;*/}

.middle{width: 1000px;height: 1000px;margin: 0 auto;}

.left,.right{float: left;width: 300px;height: 500px;padding-left: 130px;padding-top: 10px;}

img{width: 300px;height: 200px;}

.des{float: left;width: 300px;}

.wz{font-size: 20px;font-weight: bolder;;width: 1000px;height:50px;line-height: 50px;margin-top: 10px;float: left; text-align: center;}

</style>

</head>

<body>

<div class="container">

<div class="wz">ENJOY THE LIFE</div>

<div class="middle">

<div class="left">

<img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg">

<div class="des">Life is like a book,just more and more refined,more write more carefully.When read,mind open,all things have been indiffrent to hreart.Life in the precipitation.</div>

</div>

<div class="right">

<img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg">

<div class="des">Life is like a book,just more and more refined,more write more carefully.When read,mind open,all things have been indiffrent to hreart.Life in the precipitation.Life is like a book.</div>

</div>

</div>

</div>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

1、代码中多了一个结束的分号

http://img1.sycdn.imooc.com//climg/5cb3f9f000013eec03890326.jpg

2、这里是相对于container的哦,

http://img1.sycdn.imooc.com//climg/5cb3fa1a0001b46204410220.jpg

http://img1.sycdn.imooc.com//climg/5cb3fa2a0001892a04060330.jpg

效果

http://img1.sycdn.imooc.com//climg/5cb3fa3f00014f4610930749.jpg

container没有向下移动,则说明这里是相对于container,如果是相对一body的,container向下移动才对。

希望可以帮到你!


  • 慕函数3852583 提问者 #1
    老师我上面代码里面WZ设置了左浮动,当没设置浮动时候margin-top设置边距时参考的是body
    2019-04-15 16:46:34
  • 慕函数3852583 提问者 #2
    老师您看上面照片
    2019-04-15 16:47:30
提问者 慕函数3852583 2019-04-15 16:46:55
  • 这里的设置了浮动仍然是相对于父元素的,在不设置浮动的情况下,wz处于正常的文档流中,这个时候设置margin-top会影响父元素,原因是:这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠,说白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding,就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦,只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin,防止它越级,把自己的margin当成领导的margin执行。而设置了float以后,wz脱离了文档流,这个时候,父元素还在文档流当中,所以设置了浮动的wz,在设置margin-top就影响不到父元素了。希望可以帮到你!
    2019-04-15 17:31:39
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师