CSS深入理解之margin_技术问答

深山小童

这个比例自适应可能在什么地方用的到: 应该用不到吧，里面添加内容尺寸就不行了。; 2018-04-23 2回答·1415浏览

慕圣9166005

padding实现白眼效果: 2017-12-01 2回答·1525浏览

qq_大清_0

想知道老师的这个授课用的软件是什么？: 自己写的网页; 2017-11-15 1回答·1570浏览

清澜艾尔

那个有颜色的矩形其实是外边距margin吗？: 已采纳 hblee 的回答; 不是的，那个绿色是.box的content的颜色，box里面包含了一个空div，这个空div有50%的margin，所以撑开了父元素box，空div的里面没有任何东西，margin也是无颜色的; 2017-05-03 1回答·2027浏览

Eyecandy

margin-top：50%；margin-bottom:50%;不应: 就会重叠在一起，造成实现的内容被覆盖掉; 2016-12-04 2回答·1507浏览

香宝的夫差

margin:50%: 已采纳东郭后生的回答; 朋友，左右margin不层叠，上下margin在某些条件下回层叠，这个课里面讲清楚了margin层叠，看看视频就懂了; 2016-11-09 1回答·2211浏览

helkbore

求高宽2:1的源码. 我试了问答里的都不太好用

（1）最里层的div是普通元素，所以其margin的百分比是相对于其容器.box的宽度来计算的；

（2）最里层的div是空元素，所以本身不占据空间；

（3）.box设置overflow:hidden;触发BFC，它会重新计算.box整个盒子的大小（占据尺寸），使得被触发BFC的元素不会影响到外面的元素，所以上下左右四个margin: 50%;不会出现在.box外面；

（4）为什么2：1？因为垂直方向上margin重叠，所以高度上只有一个margin:50%;

2016-10-26 5回答·1248浏览

Close_0

求高宽2：1的源代码及解释？

已采纳慕莱坞4529473 的回答

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  .box {
   width: 300px;
   background-color: olive;
   overflow: hidden; 
  }
  /* 解释为什么会有overflow。
   可能是触发BFC，BFC一个特性是被触发BFC的元素不会影响到外面的元素，所以上下左右四个margin: 50%;不会出现在.box外面。那为什么会是呈现出高宽相等的呢。
   因为在.box内部元素的排版按扎正常流的方式，所以会是的一个元素自身发生上下margin重叠现象，所以只有一个margin:50%;
   */
  .box > div {
   margin: 50%;
  }
 </style>
</head>
<body>
 <div>
  <div></div>
 </div>
</body>
</html>

2016-10-17 3回答·1905浏览

DOMOHAHA

宽度2：1请教怎么实现？

box 是外层的伸缩框

inner是带有背景色的自适应矩形

inner里面的空div 设置margin: 50%;

inner的overflow: hidden;是关键防止最里面的div的margin穿透这样才能把inner撑开显示背景色

最里面的空div左右margin: 50%;把水平方向撑开

上下margin: 50%;自身发生重叠，实现了宽高2:1的自适应

2016-08-17 3回答·1408浏览

hey_whatsup

求解求大神照顾

已采纳我要成为前端大姐大的回答

表示在类元素box下的div元素,">"其其子元素

body{
    {div class=“box”}
        {div class="top"}
        </div}
        {div class="bottom"}
        </div}
    {/div}
    }

这第一个top可以在css样式中表达为

.body>top

这第一个bottom可以在css样式中表达为

.body>bottom

2016-07-21 2回答·1243浏览

吐槽职人

后面自适应部分没听懂。。。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
    <style>
.box{
    width: 900px;
    height: 200px;
    background-color: olive;
    overflow: hidden;
    position: relative;
    }
.tent{
    margin: 20%;
    background-color: red;
    position: absolute;
}
    </style>
</head>
    <body>
        <div>
            <div>122333</div>
        </div>
    </body>
</html>

是根据相对定位和绝对定位的 3：00那里重新看下

2016-07-20 7回答·2039浏览