CSS深入理解之margin_技术问答

挽哥哥

margin负值的意义是什么？: 意义是：DOM顺序跟最终视觉顺序相符，且支持页面的自适应。; 2019-10-26 1回答·965浏览

幸福来敲门4

我的等高布局实现不了

<style>

.box{overflow: hidden;resize: vertical;width: 1000px;}

.orange,.green{margin-bottom: -600px;padding-bottom: 600px;line-height: 50px;width:50%;}

.orange{background: orange;float: left;}

.green{background: green;float: left;}

</style>

</head>

<body>

</nav>

模块1

</section>

模块1

</section>

</div>

2018-07-05 1回答·681浏览

慕沐601950

margin负值两栏自适应布局我怎么抄你的代码出不来你的效果: 你代码呢？？？; 2018-03-01 1回答·1490浏览

兼容并包

请问他那个下面空隙咱出来的我的为啥没有？求解释: 已采纳 qq_杀意隆_0 的回答; 这是设置了外面包裹容器的resize; 2017-12-12 1回答·1604浏览

夕渐3509269

div 左浮动已经占满整行的情况下，图片为何还能浮动在同一行: 2017-10-22 4回答·2199浏览

mo_fei

为什么不能实现老师说的（CSS深入理解margin 5-1：css margin负值定位），请大神帮忙看看代码，谢谢。: 2017-07-17 2回答·1352浏览

佟舟

请问最后一个栗子，为什么不能在<div>里加上padding-right:150px;: 2016-12-26 3回答·1334浏览

gypsy_gyq

第一个例子设置margin-right无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin负值的运用-平铺</title>
</head>
<body>
  <div class="box">
      <div class="ul">
          <div class="li">列表1</div>
          <div class="li">列表2</div>
          <div class="li">列表3</div>
      </div>
  </div>
</body>
<style>
  .box {
      width: 900px;
      margin: auto;
      background: brown;
  }
  .ul {
      overflow: hidden;
      margin-right: -60px;
  }
  .li {
      width: 300px;
      height: 300px;
      background: aqua;
      float: left;
      margin-right: 20px;
  }
</style>
</html>

可以的代码

2016-11-03 6回答·3344浏览

刘颜

margin负值使两端对齐不太明白？: 已采纳幸存的强迫症的回答; 20像素加在了ul上面，box宽度没变，浏览器F12 自己看一下; 2016-11-02 1回答·1735浏览

SakrA_T

关于overflow的问题

已采纳 m慕光的回答

overflow:hidden;意思为当内容宽高大于父容器宽高，超出的部分就会被隐藏。

本题中内容宽度为：（386.66+20）* 3 = 1220

父容器宽度为：1200 < 1220

所以这里如果不加overflow:hidden；则父容器无法在一行中容纳所有的内容，最后一个div元素会换行显示；

但是如果你加overflow:hidden；内容超过父容器的部分可以被隐藏，即可做到一行显示。

这里不设置也没关系是因为有一句margin-right:-20px;

2016-10-30 4回答·1859浏览

慕少7532173

最后一个例子中，将文字与img颠倒顺序后，为什么还需要在p标签外套一层div呢？: 添加vdi是板正阅读代码习掼，如不加vdi直接在p设置我的理解是p不能装载除文本外的图片等; 2016-10-17 1回答·1047浏览

慕少7532173

li中使用margin-bottom:-1px并不能使最后一个li的下边框被覆盖掉，求解决

已采纳 grace_0008 的回答

#test{

margin:20px;

width:390px;

background:#F4F8FC;

border-radius:30px;

border:6px solid red; overflow:hidden;

}

加个overflow:hidden; 样式就可解决问题，使最后一个li的下边框隐藏

2016-10-15 1回答·1633浏览

Sofronia3427947

宽度固定的条件下为什么margin-right设置负值不能让元素向右移动？: 其实是有效的，margin-left和margin-top是相对于父元素左上角而言，而margin-right和margin-bottom是相对元素本身而言，会影响后面元素的位置，当后面有元素的时候就可以看到效果了。; 2016-10-04 2回答·2604浏览

李小子

关于background的用法: ...你代码是不是写错了,ul闭合标签是</ul>; 2016-09-06 4回答·846浏览

陈小窝

margin负值的两端对齐？？: 已采纳 lzuliuyun 的回答; 百分比不起作用，是因为ul的margin百分比是相对于整个扩大后的占比，就是相对box的占比，而li的margin百分比则是相对ul的占比，两个占比相对的元素就不一样了，所以其百分比的含义不一样，所以仍按照现有的思路设宽度是不正确的。; 2016-07-13 1回答·1794浏览