开发者社区> 问答> 正文

margin负值的问题

经典的三列布局,俗称双飞燕布局,左右两列宽度固定,中间自适应三列都设置为左浮动,直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    body{ margin: 0; padding: 0;}
    .left , .right{  height: 300px;   width: 200px; float: left;}
    .right{ margin-left: -200px; background-color: red; }
    .left{ margin-left: -100%;background-color: #080808; }
    .middle{  height: 300px;  width: 100%; float: left; background-color:    blue;}
</style>
</head>
<body>
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>

一般用float布局,当一列排满的时候,假如其他还有float元素,那么它在碰到其他float元素,会靠在右边,当一行排满,它就会在第二行重新排列,这里middle width=100%,那么left和right 是不是应该排在下一行,但是当你给left设置margin-left:-100%,right设置margin-left:-200px 大于其自身的宽度时,都跑到第一行去了 (一定要设置大于-200px,否则跑到第二行)
这里的疑问就是,当一个float元素他的margin负值大于他的宽度时会发生什么?有哪些奇怪的特性?

展开
收起
杨冬芳 2016-06-22 17:00:26 1966 0
1 条回答
写回答
取消 提交回答
  • IT从业

    一个元素的宽度为margin+padding+border+内容宽度
    2.一个float:left的元素的左外边界必须再其前面出现的float:left元素的右外边界的后面,并且元素的的左边界不能超过其包裹元素的左内边界,右外边界也不能超过包括元素的右内边界
    3.一个float:left元素的左外边界必须在其之前的任何一个float:left元素的右外边界的右边

    如题中的css的定义及float元素在DOM中的位置
    按HTML代码的顺序,首先放middle元素,然后是left,最后是right
    1..middle元素首先放置,占据整个父元素的宽度(container_width)
    2..left元素接下来放置,其宽度为200px,margin-left:-100%
    3..left元素的左外边界必须在middle元素右外边界的右边。margin-left:-100%形成的效果是元素的左外边界在.left元素的左内边界向左100%container_width处,同时需要满足前面提到的规则,那么形成的效果是.left元素整体向左边移动了100%container_width,其左内边界和middle的左外边界对齐。.left元素的右外边界位于middle元素的左外边界的的200处。
    3..right元素接下来放置,宽度为200px,margin-left:-200px,.right的左外边界在其左内边界向右200px;
    4..right元素的左外边界必须在之前出现的float:left右外边界的右边,对之前.left元素和.middle元素的分析,这个位置点就是.middle元素的右外边界;形成的效果就是.right元素左内边界向左移动了200px

    如果.right元素的设置margin-left:-100px时,元素宽度为-100+200=100px。如果放在.middle同一行那么其右边界将超过包裹元素的的右内边界,故.right将换行显示,并且左外边距将向右边移动100px,看到的效果是.right元素只有100宽度的内容可见

    2019-07-17 19:45:47
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载