CSS深入了解之margin

2017-03-01 18:50 SiestaKc 阅读(331) 评论(0) 编辑收藏举报

一、margin与元素尺寸的关系

元素尺寸：

可视尺寸-clientWidth(标准)
占据尺寸-outerWidth（在js中）

【【margin对可视尺寸的影响】】

适用于没有设定width/height的普通【block】水平元素
只适用于改变水平方向的尺寸

？？利用这一特性，可以实现？？

一侧定宽度的自适应布局

/*图片左浮动，跟随文字实现自适应效果。给<P>元素添加margin-left，可视尺寸减小，实现自适应效果；

如果希望右侧固定，左边文字环绕，则让图片右浮动，但是此时DOM的元素顺序不相同，这时可以调整HTML5的顺序后，利用margin的负值实现
*/

<img src="img/刺绣1.jpg"  width="150" style="float: left;">
<p style="margin-left: 170px;">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>

margin负值下的两栏自适应布局

利用了元素占据空间margin移动的特性；与relative相比，relative原本占据的空间不会发生任何变化。
不足：DOM渲染顺序与视觉顺序不符合

<div style="float:left; //外层元素一样浮动，避免坍塌
            width:100%">
    <p style="margin-right:170px;>文字说明...</p>
</div>

<img width ="150" style="float:left; margin-left:-150px;">
//虽然width为150px，但是向左偏移-150px，所以对右边的空白无影响.

使用margin负值，这里需要调整HTML结构，构建一个宽度100%的浮动元素，左浮动，后面跟随的图片也是同方向浮动，但是，margin-left负值自身的宽度大小，配合<p>元素margin-right留下的补间空白，实现自适应效果。

两端对齐布局

<!----------------------HTML代码------------------------->
<div class="box">
    <div class="ul">
             <div class="li">列表1</div>
             <div class="li">列表2</div>
             <div class="li">列表3</div>
    </div>
</div>
<!----------------------CSS代码------------------------->
        .box{ 
            width: 1200px;
                   margin: auto;
                   background: orange; }
         .ul{ 
             overflow: hidden;
             margin-right: -20px; 
             /*因为没有定宽和定高，并且是block水平元素
             margin可以改变它的宽度，负值变大，正值变小*/
              }
         .li {
             width: 386.66px;
             height: 300px;
             margin-right: 20px;
             background: green;
             float: left;
         }

【【margin对占据尺寸的影响】】

对block/inline-block水平元素均适用
与有没有设定width/height值无关系
适用于水平方向和垂直方向

？？利用这一特性，可以实现？？

滚动容器上下留白的问题

<div style="height: 200px;">
<img src="img/刺绣.jpg" height="300" style="margin: 50px 0;">
</div>

实现多栏或两栏的等高布局

              .box{
                     overflow: hidden;
                      resize: vertical;
                  }

               .child-orange,
               .child-green {
                margin-bottom: -600px;
                padding-bottom: 600px;/*利用padding才能显示背景色*/
               }

               .child-orange {
                                 float: left; 
                                 background: orange;}
               .child-green{
                                 float: float; 
                                 background: green;}

二、margin外边距重叠关系

父子margin重叠其他条件

想要除去margin重叠的特性，只需去掉下面当中的一个即刻

重叠的几种类型

外边距的高度等于两个发生叠加的外边距的高度中的较大者

2.当元素包含在另一个元素中时(假设没有内边距或边框将外边距隔开)，它们的顶/底边外边距也会发生叠加

3.假设存在一个空元素，它有外边距，但是没有边框或内边距，此时，顶外边距与底外边距发生叠加

4.并且当空元素碰到另一个元素的外边距时，还会继续发生叠加

外边距叠加的实际意义

由几个段落组成的典型文本页面为例，第一个段落上面的空间等于段落的顶外边距。如果没有外边距叠加，后续的所有段落之间的空间将是相邻顶外边距和底外边距的和。

这意味着段落之间的空间是页面顶部的两部，如果发生外边距叠加，段落之间的顶外边距和底外边距就叠加在一起，这样各处的距离就相同了。
这是普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。

margin重叠计算口诀：正正取大值正负值相加负负最负值

三、margin与百分比单位

普通元素百分比/绝对定位元素百分比
普通元素的百分比margin都是相对于父级容器的宽度计算的！

img { margin:10%; postion:absolute； }的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的!

四、margin:auto时

1、如果一侧定值，一侧auto，auto为剩余空间大小；
2、如果两侧均是auto，则平分剩余空间;

div{
     width:500px;
     margin-right:auto;
     margin-left:auto;
     background:..
}

3、而当margin: 0 auto； 时图片不居中，

是因为：此时图片是inline水平，就算没有width，其也不会占据容器。

只需设置 img的的display:block，就算没有width，也会占据整个容器。

4、内外元素均设置height，无法垂直居中？

.father{ height:200px; background:#f0f3f9;}
.son { height:100px; width:500px; margin:auto;}

/*该son元素无法垂直居中，原因是：因为当son设置高度height:100px，本身不会填充，没有所谓的剩余空间，所以margin:auto也不会分配。*/

5、在垂直方向上我们怎么使用margin实现居中？

writing-mode与垂直居中

.father{height:200px; width:100%; writing-mode:vertical-lr;}
.son { height:100px; width:500px; margin:auto; }

绝对定位元素的margin:auto 居中

.father{ height:200px; position:relatvie;} 
.son{ position:absolute; top:0; right:0; bottom: 0; left:0; width:500px; height:100px;margin:auto;} 

/*当设置son元素的宽度和高度后，原来的absolute自动填充会被强制抵消*/

五、margin的其他特性

- margin-start

正常流向，margin-start等于margin-left，两者重叠不累加

如果水平流从右往左，margin-start等于margin-right；

在垂直流下（writing-mode:vertical-*;）,margin-start等同于margin-top

- margin-collapse（默认-重叠）
- margin-discard （取消margin）
- margin-separate（没有重叠，两个margin相加）

会员力量，点亮园子希望

刷新页面返回顶部

SiestaKc