《CSS世界》读书笔记（十一）

激进的margin属性

margin与元素尺寸以及相关布局

• 元素尺寸

border box尺寸，对应jQuery中的$().outerWidth()和$().outerHeight()方法，在原生DOM API中写作offsetWidth和offsetHeight，所以有时候也称为“元素偏移尺寸”

• 元素内部尺寸

padding box尺寸，对应jQuery中的$().innerWidth()和$().innerHeight()方法，在原生DOM API中写作clientWidth和clientHeight，所以有时候也称为“元素可视尺寸”

• 元素外部尺寸

margin box尺寸，不仅包括padding和border，还包括margin，对应jQuery中的$().outerWidth(true)和$().outerHeight(true)方法，没有对应的原生DOM API

margin与元素的内部尺寸

当元素是“充分利用可用空间”状态的时候，margin可以改变元素的可视尺寸。

<div class="father">
    <div class="son"></div>
</div>

.father { width: 300px; }
.son { margin: 0 -20px; }

　　这里.son元素的宽度是340px，此时的宽度表现就是“充分利用可用空间”

CSS世界默认的流方向是水平方向，因此，对于普通元素，margin只能改变元素水平方向尺寸。但是，对于具有拉伸特性的绝对定位元素，则水平或垂直方向都可以

由于margin具有这种流体特性下的改变尺寸特性，因此，margin可以很方便地实现很多流体布局效果。例如：一侧定宽的两栏自适应布局效果，假设我们定宽的部分是128像素宽的图片，自适应的部分是文字。

（1）如果图片左侧定位：

.box { overflow: hidden; }
.box > img { float: left; }
.box >p { margin-left: 140px; }

<div class="box">
    <img src="1.jpg">
    <p>文字内容……</p>
</div>

此时，文字内容会根据.box盒子的宽度变化而自动排列，形成自适应布局效果

（2）图片右侧定位

.box { overflow: hidden; }
.box > img { float: right; }
.box >p { margin-right: 140px; }

HTML 与上面的左侧定位效果一模一样，最终实现的也是一个效果良好的自适应布局。有一点瑕疵的地方在于：元素在DOM文档流中的前后顺序和视觉表现上的前后顺序不一致。如果想要实现顺序完美一致的自适应效果——

（3）图片右侧定位，同时顺序一致

.box { overflow: hidden; }
.full { float: left; width: 100%; }
.box > img { float: left; margin-left: -128px; }
.full>p { margin-right: 140px; }

<div class="box">
    <div class="full">
        <p>文字内容……</p>
    </div>
    <img src="1.jpg">
</div>

 

内联元素垂直方向的margin是没有任何影响的，既不会影响外部尺寸，也不会影响内部尺寸。对于水平方向，由于内联元素宽度表现为“包裹性”，也不会影响内部尺寸

margin百分比值

和padding属性一样，margin的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的