php设置margin,深入理解CSS中margin的使用方法

1.css margin可以改变容器的尺寸

元素尺寸

可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的，clientWidth

占据尺寸--包括margin的宽度 outWidth不在标准之中，jquery中有相对应的方法

margin与可视尺寸

1.1使用那个与没有设定width/height的普通block水平元素

2.2只适用于水平方向尺寸

文字

文字

当改变margin值时盒子的宽度会变化。

应用 ：实现一侧定宽的自适应布局

　　　　　　

图片左浮动

margin与占据尺寸

1.block/inline-block水平元素均适用

2.与没有设定width/height值无关

3.适用于水平方向和垂直方向

例

　　　　　　　　

可以看到容器占据的尺寸变小了。

利用这一特性

滚动容器内上下留白

　　　　　　　　

里面盒子撑开外面盒子显示滚动条，当然这在非chrome浏览器中是没有留白效果的(上面有下面没有)。

正确的做法是

　　　　　　

第二话：css margin与百分比单位——了解margin百分比单位

水平方向百分比/垂直方向百分比

普通元素百分比/绝对元素百分比

百分比margin的计算规则

img{margin :10%;with:600px;heigth:200px;}

普通元素的百分比margin都是相对于容器的宽度计算的！所以这里的margin:10%;---->top:60px,left:60px;都是相对与容器的宽度来计算的。

绝对定位元素的百分比margin

img{margin:10%; position:absolute;}

绝对元素的百分比margin是相对与第一个定位元素的祖先元素具有(relative/absolute/fixed)的宽度计算的。普通元素的是相对与父元素的来计算的。

　　　　　　　　　　　

利用特性

宽高2：1自适应矩形

.box{background-color:olive; overflow:hidden;}

.box > p{margin:50%}

这里还涉及一个只是点就是margin重叠。这里设置overflow 也是因为防止margin重叠

第三话 margin重叠通常特性

1.block水平元素(不包括float和absolute元素)

2.不考虑writing-mode(文字书写方向是从上到下的)，只发生在垂直方向的(margin-top/margin-bottom)

margin重叠3种情境

1.相邻的兄弟元素

p{line-height:2em;margin:1em 0;background:#f0f3f9;}

第一行

第二行

这里就会发生margin重叠了

2.父级和第一个/最后一个子元素

.father{background:#f0f3f9}

son

给子第一个或最后一个子元素设置margin等同于给父元素设置相同的margin值，子元素相同margin，子元素和父元素一样的margin值

3.空的block元素

.father{background:#f0f3f9}

这里son的高度只有1em，不是2em

空block元素margin重叠其他条件

1.元素没有border设置

2.元素没有padding值

3.里面没有inline元素

4.没有height，或者min-height

margin-top重叠

1.1父元素非块状格式化上下文元素

1.2父元素没有border-top设置

1.3父元素没有padding-top值

1.4父元素和第一个子元素之间没有inline元素分隔

margin-bottom重叠

1.1父元素非块状格式化上下文元素

1.2父元素没有border-bottom设置

1.3父元素没有padding-bottom值

1.4父元素和最后一个子元素之间没有inline元素分隔

1.5父元素没有height，min-height，max-height限制

干掉margin-top重叠

.father{background:#f0f3f9}

son

1.父元素非块状格式化上下文元素 .father:overflow:hidden;

2.父元素没有border-top设置

.father:border:4px solid #ccc;

3.父元素没有padding-top值

4.父元素和第一个子元素之间没有inline元素分隔

son

干掉margin-bottom重叠

前面四个和margin-top一样，

son

margin重叠的计算规则

1.正正取大值

.a{margin-bottom:50px;}

.b{margin-top:20px;}

.father{margin-top:20px;}

.son{margin-top:50px;}

.a{margin-top:20px;margin-bottom:50px}

上面的结果都是margin:50px;

2.正负值相加

.a{margin-bottom:50px;}

.b{margin-top:-20px;}

.father{margin-top:-20px;}

.son{margin-top:50px;}

.a{margin-top:-20px;margin-bottom:50px}

上面的结果都是30px

3.负负最负值

.a{margin-bottom:-50px;}

.b{margin-top:-20px;}

.father{margin-top:-20px;}

.son{margin-top:-50px;}

.a{margin-top:-20px;margin-bottom:-50px}

上面的结果都是-50px

margin重叠的意义是？

网页诞生之初…………只是排版文字布局用，没有现在这么复杂。

1.连续段落或列表之类，如果没有margin重叠首尾项间距会和其他兄弟标签1：2关系，排版不自然；

2.web中任何地方嵌套或直接放入任何裸p都不会影响原来的布局

3.遗落的空人一个p元素，不要影响原来的阅读排版

实践：

善用margin重叠

.list{margin-top:15px;}

更好实现

.list{

margin-top:15px;

margin-bottom:15px;

}

更具有健壮性，最后一个元素移除或位置调换，均不会破坏原来的布局。

第4话：理解CSS中的margin:auto

margin:auto 的机制

元素有时候，就算没有设置width或height，也会自动填充

p{background:#f0f3f9}

如果设置width或height，自动填充特性就会被覆盖

p{width:500px;background:#f0f3f9;}

此时的margin值是0px

如果设置值width或height，自动填充特性就会被覆盖。

原来应该填充的尺寸被width/height强制变更，而margin：auto就是为了填充这个变更的尺寸设置的；

p{width:500px;marign-right:100px;margin-left:auto;}

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

为什么图片img{width:200px;marign:0 auto}不居中

因为图片是inline水平的，就算没有width，也不会占据整个容器。

设置img{display:block;width:200px;marign:0 auto;}

因为此时图片是block水平的，就算没有width，也会占据整个容器不能在一行显示。

为什么明明容器定高，元素定高margin：auto 0 无法垂直居中

.father{height:200px;background:#f0f3f9;}

.son{height:100px; width:500px;margin:auto;}

水平居中了，垂直不居中。

解释：如果.son没有设置height:100px;高度会自动200px高吗？——NO 所以margin谈不上自动填充，强制设置宽度高度， 所以是不会自动填充的。

注意：水平方向上如果子大于父，计算结果为负值的时候也是不居中的。

实现垂直方向margin居中

更改流为垂直方向，实现垂直方向的margin:auto

writing-mode与垂直居中(css3)

.father{height:200px; width:100%; wiriting-mode:vertical-lr;}

.son{height:100px;width:500px;margin:auto;}

absolute与margin居中

.father{height:200px;position:relative;}

.son{position:absolute; top:0px right:0px bottom:0px;left:0px}

.son没有width/height，absolute元素自动填满了容器。

当设置了width和高度

.father{height:200px;position:relative;}

.son{position:absolute; top:0px right:0px bottom:0px;left:0px；width:500px;height:100px;}

原来拉伸铺满现在缩回来了。

被拉伸的空间设置margin:auto;平均分配就会实现水平垂直居中了

.father{height:200px;position:relative;}

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

IE8+以上支持！

第五话：css margin负值定位

1.margin负值下的两端对齐(margin改变元素尺寸)

例子

.box{

width:1200px; margin:auto;background:orange;

.ul{overflow:hidden;}

.li{

width:380px;height:300px;

margin-right:20px;

background:green;

float:left;

}

}

实现的列表最后一个留有间隙。

而通过margin负值来改变容器的大小,让容器变宽。能完美解决这个问题

.box{

width:1200px; margin:auto;background:orange;

.ul{overflow:hidden;margin-right:-20px;}

.li{

width:386.66px;height:300px;

margin-right:20px;

background:green;

float:left;

}

}

2.margin负值下的等高布局 margin改变元素占据空间

margin与上下留白

　　　　　　

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

.child-orange,

.child-green{margin-bottom:-600px;padding-bottom:600px;}

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

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

通过设置很大的margin-bottom负值，和很大的padding-bottom填充缺失的空间，实现等高布局。原理：内容块状元素可以在padding中显示.只要没有设置

background:clip,box-sizing:content

3.margin负值下的两栏自适应布局，元素占据空间跟随margin移动

图片右浮动

　　　　

第六话 css marign无效情形解析

1.inline水平元素的垂直margin无效

2个前提 1.非替换元素，例如不是img元素；2.正常书写模式

例

marign:0px

给span设置margin233px;

水平上有效的，垂直方向是无效的。

2.margin重叠

3.display：table-cell

display:table-cell/display:tab-row等声明margin无效！

例外的替换元素img,button

4.position与margin

绝对定位元素非定位方向的margin值“无效”

绝对定位的margin值一直有效，不只是像普通元素那样。

5.鞭长莫及的margin失效

bfc内容块中如果前面有浮动元素那下一个元素的margin是相对与外层的p计算的。

6.内联导致的margin失效

p[style="height:200px;background-color:#f0f3f9;"]>img[style="marign-top:30;"]

当margin-top足够大的时候失效了。

解释：内联元素要实现和基线对齐，在图片后加x可以看出，无论margin-top有多远，他都不会脱离容器外面。

第七话margin-start和margin-end

margin-start

img{

margin-left：100px;

-webkit-margin-start:100px;

-moz-margin-start:100px;

margin-sart:100px;

}

1.正常的流向，margin-sart等同于margin-left，两者重叠不累加；

2.如果水平流失从右往左，margin-start等同与margin-right；direction:ltr(rtl)

3.在垂直流下(writring-mode:vertical-lr),margin-sart等同于margin-top

webkit下的其他margin相关属性

margin-before

img{-webkit-margin-before:100px;} 默认流向的情况下，等同于marign-top

margin-after

img{-webkit-marign-after:100px;} 默认流向的情况下，等同于margin-bottom;

margin-collapse 外边框重叠

-webkit-margin-collapse: collapse|discard|separate

控制margin重叠

collapse默认-重叠

discard 取消

separate 分隔 没有重叠