margin系列问题

margin系列之百分比

假设一个块级包含容器，宽1000px，高600px，块级子元素定义  margin:10% 5%;  大家说说  margin 的  top, right, bottom, left  计算值最终是多少？

CSS:

#demo{
    width: 1000px;
    height: 600px;}#demo p{
    margin: 10% 5%;}

HTML:

<div id="demo">
    <p>恩，注意看我所在的位置。</p></div>

事实告诉我们结果是  100px 50px 100px 50px，不论结果是否符合你的预期，我们先来看demo验证一下：margin百分比结果猜想，当然，你也根据上面还原的代码自己创建一个例子。

因为默认的书写模式时横向，所以margin的参照物是父元素的宽

当书写模式变成纵向的时候，其参照将会变成包含块的高度。我们改变一下上面例子中的CSS书写模式：

CSS:

#demo{
    -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
    writing-mode: tb-rl; /* for ie */}

在 #demo 中添加这2句，其它code不变。也有个例子供观：书写模式影响margin百分比的参照对象。

恩，这回的结果是  60px 30px 60px 30px ，因为其参照对象变成了包含块的高度。

margin系列之外边距折叠

现在我们来解释一下到底什么是margin折叠？

在CSS中，两个或以上的块元素（可能是兄弟，也可能不是）之间的相邻外边距可以被合并成一个单独的外边距。通过此方式合并的外边距被称为折叠，且产生的已合并的外边距被称为折叠外边距。

处于同一个块级上下文中的块元素，没有行框、没有间隙、没有内边距和边框隔开它们，这样的元素垂直边缘毗邻，则称之为相邻。

什么是垂直边缘毗邻？

• 元素的上外边距和其属于常规流中的第一个孩子的上外边距。
• 元素的下外边距和其属于常规流中的下一个兄弟的上外边距。
• 属于常规流中的最后一个孩子的下外边距和其父亲的下外边距，如果其父亲的高度计算值为auto。
• 元素的上、下外边距，如果该元素没有建立新的块级格式上下文，且 min-height 的计算值为零、height 的计算值为零或 auto、且没有属于常规流中的孩子。

说得很清楚了，我想是的。你可能需要注意的是发生  margin 折叠的元素不一定是兄弟关系，也能是父子或祖先的关系。

解决边距折叠问题：

1把块状元素改成非块状 （浮动 定位等）

2   overflow:hidden  

3用边框隔开他们

margin系列之keyword auto

不过你可能也发现了不论是 margin: auto; 还是 margin: 0 auto; 效果都是一样的，都是让 #demo 水平居中了，但纵向并没有任何变化。

大家都知道 margin 是复合属性，也就是说 margin: auto; 其实相当于 margin: auto auto auto auto;，margin: 0 auto;相当于 margin: 0 auto 0 auto;，四个值分别对应上右下左。至于CSS中的上、右、下、左顺序就不做赘述了。

根据规范， margin-top: auto; 和  margin-bottom: auto;，其计算值为0。这也就解释了为什么 margin: auto; 等同于  margin: 0 auto;。

margin系列之内秀篇

1 margin在列表中的作用

http://demo.doyoe.com/css/margin/text-list.htm

使用margin-bottom=-1px  消掉列表的下边框   不固定高度，overflow：hidden

2.margin在图片列表中的作用

http://demo.doyoe.com/css/margin/img-list-2.htm

使用margin-right=-100px；不固定宽度，overflow：hidden

去掉最右边的li的margin-right=10px

margin系列之bug巡演

解决ie6下双边距问题

1.

给IE6在会 double margin 的方向上设置小一倍的margin值，如下： 但是这种方法不够灵活，每次改变margin的值都需要手动改变这个

CSS

#demo p{
    float:left;
    margin-left:10px;
    _margin-left:5px;}

2.display:inline，设置为行内样式。

CSS

#demo p{
    _display:inline;
    float:left;
    margin-left:10px;}

margin系列之内秀篇（二）

1用margin实现1px圆角

HTML

<div id="demo">
    <a href="?"><span>1px圆角</span></a>
    <a href="?"><span>确定</span></a>
    <a href="?"><span>取消</span></a></div>

CSS

#demo a,#demo span{
    display:inline-block;
    vertical-align:top;}#demo span{
    margin:1px -1px; /* 关键规则 */}

http://demo.doyoe.com/css/margin/radius.htm

2已知宽高元素水平垂直居中

HTML

<div id="demo">这是一个水平垂直居中的容器</div>

CSS

#demo{
    position:absolute;
    top:50%;
    left:50%;
    width:300px;
    height:300px;
    margin-top:-150px;
    margin-left:-150px;}

借助绝对定位http://demo.doyoe.com/css/margin/alignment.htm

先通过  top/left  将  #demo  的绝对定位流起始位置设置为当前屏的中心点，此时  #demo  的左上角这个点其实已经是相对于页面水平垂直居中了，由于它的宽度和高度都是300px，所以从起始位置向右下各延伸300px后才是整个  #demo  的真正位置。此时整个  #demo  其实并不是水平垂直居中的，除非我们将  #demo  的中心点放在当前屏的中心点上

所以我们只需要将  #demo  相对自身向上偏移150px，向左偏移150px，就能够实现将自身的中心点放在当前屏的中心点上，也就实现了自身在当前屏的水平垂直居中。

3.tabstrip底边线重合

对，我们要做的就是 tab 项与底边线重合，这应该是我们常见的场景了，margin 仍然是最佳选择。先来看代码：

HTML

<div id="demo">
    <a href="?">分类一</a>
    <a href="?" class="on">分类二</a>
    <a href="?">分类三</a>
    <a href="?">分类四</a></div>

CSS

#demo{
    border-bottom:1px solid #aaa;}#demo a{
    display:inline-block;
    margin-bottom:-1px;
    border:1px solid #aaa;}#demo .on{
    border-bottom-color:#fff;}

要实现  tab 中各项与包含块的底边线重合，重点在于将包含块的底边线向上偏移1px，这样就与 tab 各项的底部重合在一起。http://demo.doyoe.com/css/margin/tab.htm

4：双边线问题

 margin-bottom:1px;
    border-bottom:1px solid #ccc;使用 margin和border结合

http://demo.doyoe.com/css/margin/double-lines.htm