我以前不知道的 margin
lxg337
7年前
<h2><strong>margin 与容器之间的关系</strong></h2> <h3><strong>margin 可以改变容器尺寸</strong></h3> <p>标准盒模型与元素尺寸</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e3ca279c3745484247217b9cea42a6c2.png"></p> <p><strong>元素尺寸</strong></p> <ol> <li>可视尺寸 - clientWidth (实线)</li> <li>占据尺寸 - outerWidth (虚线)</li> </ol> <p><strong>margin 与可视尺寸</strong></p> <ol> <li>适用于没有设定 width / height 的普通 block 元素 <s> float absolute fixed inline table-cell </s></li> <li>只适用于水平方向尺寸</li> <li>正负值亦可</li> </ol> <p><strong>栗子</strong></p> <pre> <code class="language-javascript"><div class="out"> <div class="in"> i am a block element </div> </div></code></pre> <pre> <code class="language-javascript">.out { padding: 50px; background: red; } // 调整 .in 的 margin .in { margin: 50px 20px; background: green }</code></pre> <p><strong>如何利用这一特性？</strong></p> <p>一侧定宽的自适应布局</p> <p><strong>栗子</strong></p> <pre> <code class="language-javascript"><div class="out"> <img width="100" style="float: left" src="https://simg.open-open.com/show/e3ca279c3745484247217b9cea42a6c2.png" /> <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p> </div></code></pre> <pre> <code class="language-javascript">p { margin-left: 120px; }</code></pre> <p><strong>margin 与占据尺寸</strong></p> <ol> <li>block / inline-block 水平元素都适用</li> <li>与有没有设定 width / height 无关</li> <li>适用于水平和垂直方向</li> </ol> <p><strong>栗子</strong></p> <pre> <code class="language-javascript"><div class="out"> <img width="150" src="https://simg.open-open.com/show/e3ca279c3745484247217b9cea42a6c2.png" /> </div></code></pre> <pre> <code class="language-javascript">// 修改 img 的 margin-bottom img { margin-bottom: 50px; } .out { background: green; text-align: center; }</code></pre> <p><strong>如何利用这一特性？</strong></p> <p>滚动容器内上下留白</p> <p><strong>栗子</strong></p> <pre> <code class="language-javascript"><div class="out"> <img width="500" src="https://simg.open-open.com/show/e3ca279c3745484247217b9cea42a6c2.png" /> </div></code></pre> <pre> <code class="language-javascript">.out { padding: 50px 0; height: 200px; overflow: auto; } img { margin: 50px 0; }</code></pre> <h2><strong>margin 的百分比单位</strong></h2> <ul> <li>水平 / 垂直方向百分比</li> <li>普通 / 绝对定位元素百分比</li> </ul> <ul> <li>普通元素的百分比 margin 都是相对于容器的宽度</li> <li>绝对定位元素的百分比 margin 是相对于第一个定位祖先元素的宽度</li> </ul> <p><strong>如何利用这一特性？</strong></p> <p>宽高比例保持的自适应容器</p> <p><strong>栗子</strong></p> <pre> <code class="language-javascript"><div class="out"> <div class="box"> </div> </div></code></pre> <pre> <code class="language-javascript">.out { background: green; overflow: hidden; } // margin 重叠 .box { margin: 50%; }</code></pre> <h2><strong>margin 重叠</strong></h2> <p><strong>产生 margin 重叠的条件</strong></p> <ol> <li>必须 block 元素</li> <li>不考虑 writing-mode 的话，只发生在垂直方向</li> </ol> <p><strong>margin 重叠的情形</strong></p> <ol> <li>相邻兄弟元素</li> <li>父级和第一个 / 最后一个子元素</li> <li>空的 block 元素</li> </ol> <h3><strong>相邻兄弟元素</strong></h3> <p><strong>栗子</strong></p> <pre> <code class="language-javascript"><p>第一行</p> <p>第二行</p></code></pre> <pre> <code class="language-javascript">p { line-height: 2em; margin: 1em 0; background: green; }</code></pre> <h3><strong>父级和第一个 / 最后一个子元素</strong></h3> <p><strong>栗子</strong></p> <pre> <code class="language-javascript"><div class="p" style="margin-top: 80px"> <div class="c" style="margin-top: 80px">我是子</div> </div></code></pre> <pre> <code class="language-javascript">.p { background: yellow; }</code></pre> <p><strong>父子 margin 重叠的其他条件</strong></p> <p>margin-top 重叠</p> <ol> <li>父元素不是 BFC</li> <li>父元素没有 border-top</li> <li>父元素没有 padding-top</li> <li>父元素和第一个子元素之间没有 inline 元素分割</li> </ol> <p>margin-bottom 重叠</p> <ol> <li>父元素不是 BFC</li> <li>父元素没有 border-top</li> <li>父元素没有 padding-top</li> <li>父元素和第一个子元素之间没有 inline 元素分割</li> <li>父元素没有设置 height min-height max-height</li> </ol> <h3><strong>空的 block 元素</strong></h3> <p><strong>栗子</strong></p> <pre> <code class="language-javascript"><div class="p"> <div class="c"></div> </div></code></pre> <pre> <code class="language-javascript">.p { background: green; overflow: hidden; } .c { margin: 10px; }</code></pre> <p>一些条件限制</p> <ol> <li>没 border</li> <li>没 padding</li> <li>内没 inline 元素</li> <li>没 height / min-height</li> </ol> <h3><strong>margin 重叠的计算规则</strong></h3> <ol> <li>正正取大值</li> <li>正负值相加</li> <li>负负最小值</li> </ol> <h3>margin 重叠的意义</h3> <p>最初</p> <pre> <code class="language-javascript"><h2>h2</h2> <p>p1</p> <p>p2</p> <ul> <li>l1</li> <li>l2</li> <li>l3</li> </ul></code></pre> <h2><strong>margin 的 auto</strong></h2> <h3><strong>maring: auto 的作用机制</strong></h3> <p>你已经知道的事实</p> <ul> <li>元素有时候，就算没有设置 width / height，也会自动填充；</li> </ul> <pre> <code class="language-javascript">div { background: red; }</code></pre> <pre> <code class="language-javascript">div { position: absolute; left: 0; right: 0; }</code></pre> <ul> <li>如果设置 width / height，自动填充特性就会被覆盖</li> </ul> <pre> <code class="language-javascript">div { width: 200px; } // 此时 margin 是 0;</code></pre> <ul> <li>原来应该填充的尺寸被 width / height 强制变更，而 margin: auto 就是为了填充这个变更尺寸设计的；</li> </ul> <pre> <code class="language-javascript">div { width: 200px; margin-right: 100px; margin-left: auto; }</code></pre> <ul> <li>为什么图片 margin: 0 auto; 布局？解决~</li> <li>为什么明明容器定高，元素定高，margin: auto 0; 无法垂直居中？解决~</li> <li><strong>那我们垂直方向的话，margin 就无解了吗？</strong></li> <li>writing-mode: vertical-lr</li> <li>绝对定位元素的 marin: auto; 的居中</li> </ul> <p><strong>例子</strong></p> <pre> <code class="language-javascript">.p { position: relative; height: 500px; } .c { positon: absolute; top: 0; bottom: 0; right: 0; left: 0; }</code></pre> <pre> <code class="language-javascript">.p { display: flex; height: 500px; background: green; } .c { margin: auto; height: 100px; width: 100px; background: yellow; }</code></pre> <h2><strong>margin 负值定位</strong></h2> <h3><strong>1. 两端对齐</strong></h3> <pre> <code class="language-javascript"><div class="box"> <div class="p"> <div class="c"></div> <div class="c"></div> <div class="c"></div> </div> </div></code></pre> <pre> <code class="language-javascript">.box { width: 1200px; background: red; } .p { margin-right: -20px; overflow: hidden; } .c { width: 386.66px; height: 300px; background: yellow; float: left; margin-right: 20px; }</code></pre> <h3><strong>2. margin 负值下的等高布局</strong></h3> <pre> <code class="language-javascript">.box { overflow: hidden; } .cl, .cr { float: left; } .cl { background: red; } .cr { background: yellow; }</code></pre> <h3><strong>3. margin 负值下的两栏自适应布局</strong></h3> <p>元素占据空间跟随 margin 移动</p> <pre> <code class="language-javascript"><div class="out"> <img width="100" style="float: right;" src="https://simg.open-open.com/show/e3ca279c3745484247217b9cea42a6c2.png" /> <p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p> </div></code></pre> <pre> <code class="language-javascript">p { margin-right: 120px; }</code></pre> <p>DOM 顺序和视觉不符，那么这样~</p> <pre> <code class="language-javascript"><div style="float: left; width: 100%;"> <p style="margin-right: 120px"></p> </div> <img width="100" style="float: left; margin-left: -150px" /></code></pre> <h2><strong>margin 无效情形解析</strong></h2> <ol> <li>inline 元素垂直 margin 天然无效</li> <li>可能 margin 重叠了</li> <li>display: table-cell 与 margin </li> <li>position: absolute 与 margin (绝对定位元素非定位放线的 margin 值“无效” relative)</li> <li>内联特性导致的 margin 无效</li> </ol> <pre> <code class="language-javascript"><!--测试例子5--> <div style="height: 200px; background: yellow"> <img width="200" src="https://simg.open-open.com/show/e3ca279c3745484247217b9cea42a6c2.png" /> </div></code></pre> <h2><strong>margin-start / margin-end 的了解</strong></h2> <ul> <li>正常的流向，margin-start 等同于 margin-left，两者重叠不累加；</li> <li>如果水平流是从右往左，margin-start 等同于 margin-right；</li> <li>垂直流(writing-mode: vertical-*;)，margin-start 等同于 margin-top；</li> </ul> <h3><strong>margin-before / after</strong></h3> <h3><strong>margin-collapse</strong></h3> <p>当元素发生 margin 重叠的时候，具体该如何表现</p> <ul> <li>collapse</li> <li>discard</li> <li>separate</li> </ul> <p> </p> <p> </p> <p>来自：https://github.com/lishengzxc/bblog/issues/18</p> <p> </p>