IE8按钮margin auto居中失效Bug

你会猛然觉得,这是正解啊,因为 button 或者 input type button类型 的元素是 inline-level 的。

不对啊,button 应该是 inline 的吧?哦,可能是 inline-block

在这之前,我们似乎要先明确一些基础知识。

什么是 inline-level 元素?

阅读全文 »

IE6/7 clear引发的margin-top bug

我知道,这是一个被谈及较少的bug,但我几乎可以肯定你在遇见过的同时并没有把它当成是一个bug。

w3c关于 clear 特性的描述

设置了 clear 为非 none 值的元素,其顶部 border 边界在垂直方向不允许出现在之前的浮动元素底部 margin 之上。

阅读全文 »

可挖掘性

之前已经写过一篇关于 margin 应用场景的文章:margin系列之内秀篇,当然,它的应用场景会远大于文中所述,无法一一列举。

所以本篇权当是对此的补遗好了,各位客官如有比较Cool的想法都可以留言给我,我会视情况补丁进来。

1像素圆角

阅读全文 »

我所知道的浏览器margin bug

  • IE6浮动双倍margin bug;
  • IE6浮动相邻元素3px bug;
  • IE6/7 clear引发的margin-top bug;
  • 待补充的有一堆

为bug生为bug死为bug欲仙欲死的日子

各浏览器的实现差异或者由此而引入的错误,一直都是前端开发人员的梦魇。相信大多数的前端都为此而精疲力尽过,浏览器bug你所知有几?

IE6浮动双倍margin bug

这当是IE6最为经典的bug之一。高大上的前端,你肯定从未与其失之交臂过。

触发方式

  • 元素被设置浮动
  • 元素在与浮动一致的方向上设置margin值
阅读全文 »

最Cool的利器

一样东西在不同的场景,不同的人手里,所能做的事会有很大不同。我深切的以为 margin 绝对是 CSS 中最有能力的利器之一,不知大家以为然否?

前面几篇文章大概的讲了一些关于 margin 的特性,所以本篇会聊聊 margin 的实际应用场景,也算让自己休息一下,不用再讲知识点。

有个很典型的需求

阅读全文 »

不怀疑你也在工作中遇见过

几乎可以不用怀疑,前端工作中的你一定遇见过 margin 折叠。

不确定?别着急,你可能写过这样的代码:

CSS:

1
2
3
p{
margin: 50px;
}

HTML:

1
2
3
4
<div id="demo">
<p>我是一个华丽的段落,别看我文字少</p>
<p>我是另一个华丽的段落</p>
</div>

大家觉得这 2p 之间会发生点什么?是会合体呢?还是分开?来看看 DEMO1 margin折叠

阅读全文 »

也许我们是一样的

可能大家都用会 margin 或者相对偏移的 top, right, bottom, left 来做一些类似元素偏移的事,其实我也会。这回我们只聊 relative 下的 top, right, bottom, left

比如说我们想让一个 div 向下偏移 50 个像素,通常会这样:

Case 1:

1
2
3
#demo .margin-top{
margin-top: 50px;
}

Case 2:

1
2
3
4
#demo .relative-top{
position:relative;
top: 50px;
}

HTML:

1
2
3
4
<div id="demo">
<div class="margin-top">我是margin-top:50px</div>
<div class="relative-top">我是relative top:50px</div>
</div>

上述2种方式,我们都可以完成 div 向下偏移 50 个像素的需求。来看看 DEMO1: margin-top vs. relative top

阅读全文 »

你可能从没注意过它

margin系列之keyword auto 中,说过了 margin 值为 auto 的情况,这次要聊的是值为百分比的情形。

我必须承认这是一个非常基础的知识点,但有一段时间我发现很多人对此有错误的认知。偶尔在面试或者分享的时候,我会问到这个问题,有人会脱口而出的告诉我他对此的感性理解。

或许现在大多数人对此不屑一顾,但我仍想说一说,这样以后就可以不再问类似的问题了。

假设有这样一个场景

仍然以一个问题来开始,这是我之前在 微博 发过的,原文是这样的:

阅读全文 »

margin的重要性:

有个不容置疑的事,前端开发人员没有人能够忽视CSS margin的重要性。CSS coding时,margin的使用频率就如同呼吸般频繁,如果我可以说得夸张点的话。

margin作为CSS盒模型基本组成要素之一,是非常Basis的一个技术手段,所以我想对于它的一些基本情况应该不用太介绍了?

margin经常被用来做什么?

  • 让块元素水平居中;
  • 让元素之间留有舒适的留白;
  • 处理特殊的first或last,大家懂的?
  • 一些布局;

需要注意的地方:

  • margin折叠;
  • margin的百分比值;
  • margin的auto值;
  • margin和相对偏移top, right, bottom, left的异同;
  • IE6浮动双margin Bug;
  • IE6浮动相邻元素3px Bug;

看起来似乎有不少的知识点?恩,这些都是我们需要了解的,包括一些没有被列举出来的点。

今天要讲的其实只是其中很少的一部分,恩,标题里有:keyword auto

阅读全文 »