由浅入深漫谈margin属性

margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。 一、margin的基本特性 margin 属性包括 margin-top, margin-right, margin-bottom, margin-left, margin,可以用来设置 box 的 margin area。属性 margin 可以用来同时设置 box 的四边外边距,而其他的 margin 属性只能设置其自各的外边距。 margin 属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内联元素(non-replaced inline element)不起作用。 或许有朋友对非置换元素(non-replaced element)有点疑惑,稍微帮助大家理解一下。非置换元素,W3C 中没有给出明确的定义,但我们从字面可以理解到,非置换元素对应着置换元素(replaced element),也就是说我们搞懂了置换元素的含义,就懂了非置换元素... 48 条评论 »

display:inline-block的深入理解

在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。 display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有:Opera、Safari。 但很遗憾,最流行的 IE 和 Firefox 却不支持这个属性(在 Firefox3 版本中将会支持 display:inline-block)。不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似,为什么是“形似”而不是“神似”呢?这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症,比如使用这一属性后,text-align 有时候就会有问题,还得改用 Firefox 的私有属性 -moz-box-align 来解决(谢谢 aoao 提供案例)。 建议:最好不要... 68 条评论 »

IE “+” CSS Hack研究

表达方式:+property:value 测试环境:IE5,IE6 ,IE7,FF1.5,FF2.0,Opera 9,Safari 2 测试结果:IE5,IE6 ,IE7浏览器识别;FF2.0,Opera 9,Safari 2浏览器不识别。 结论:我们可以用”+”来实现只有 IE 识别的 CSS Hack。 比如我们要实现在 IE 中 480px 的宽度,而在其他浏览器 500px 的宽度,就可以通过 “+” Hack 来完成,如下: #hack { width:500px; +width:480px; /*only IE*/ } 这应该归结于IE对一些特殊字符的识别,大家还可以测试其他的特殊字符如:” >”,”-“,”@”……或许有更多的收获。 PS:可能有朋友想到 “_” Hack ,但它们是由区别的,因为IE7中是不识别“_”的。 扩展阅读:《Internet Explorer 7 CSS hacks》

... 7 条评论 »

DOCTYPE和namespace

有朋友问:不明白为什么有了 DOCTYPE 还要 namespace,他俩不是一个作用么? 其实不然,先让我们看看网上对它们的定义: 什么是 DOCTYPE? DOCTYPE 是 document type (文档类型)的简写,用来说明你用的 XHTML 或者 HTML 是什么版本。其中的 DTD 叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的 DTD 来解释你页面的标识,并展现出来。 要建立符合标准的网页,DOCTYPE 声明是必不可少的关键组成部分;除非你的 XHTML 确定了一个正确的 DOCTYPE,否则你的标识和 CSS 都不会生效。 什么是namespace? 由于 XML 允许你自己定义自己的标识,你定义的标识和其他人定义的标识有可能相同,但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生,XML 采用名字空间声明,允许你通过一个网址指向来识别你的标识。 通俗的解释是:... 1 条评论 »

裁切BUG(Guillotine Bug)的触发条件

裁切 BUG(Guillotine Bug)现象:浮动元素内某些连接 hover 时,该元素的底部会被砍掉。 详细介绍:http://www.positioniseverything.net/explorer/guillotine.html 触发条件: 一个容器元素; 在容器内有一个没有被清楚浮动的浮动元素; 非浮动的内容在浮动元素之后,并且容器内包含链接; 那些链接的a:hover样式改变某些属性; 只出现在IE浏览器。

... 0 条评论»