CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

• IE 6与W3C盒子模型

盒子模型（Box Model）是CSS 的核心，简单的说Web 布局设计就是一堆盒子的排列与嵌套，掌握了盒子模型与它们的摆放控制，会发现再复杂的页面也不过如此，然而，任何美好的事物都有缺憾，盒子模型有两种不同的诠释，一种来自IE6，一种来自W3C 标准浏览器。在内容区外面，依次围绕着 padding 区，border 区，margin 区，这一模型结构在所有主流浏览器都是一致的。通过盒子模型，我们可以为我们的内容设置边界，留白以及边距，盒子...

• 白话Block Formatting Contexts

当涉及到可视化布局的时候，Block Formatting Contexts提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱的。这样的话，无论你包装里面的货物怎么摆放，都不会影响到其...

• 一个全角空格的问题

昨天编辑找我让我帮忙暂时去掉专题里的一块内容，我给了他style=”display:none”，让他放到相应的元素里，改完后跑过来找我说无效，我用FB看了觉的奇怪，后来一查竟然是全角空格引起的

• 网页元素的层叠关系

一个复杂的首页通常不是简单的二维，有时需要三维的，所以不得不考虑z-index的层叠关系问题。通常一个页面会由不同组别的人来维护，由于没有一个统一的规范，z-index会随便的定义，制作人为了安全起见会设置一个很大的z-index值：9999，但是这样设置也并不表示就是安全100% 在页面最上面了，所以需要一个规范来使得z-index来确保页面元素的正确z-index。产生z-index的情况： css元素的布局定位广告漂浮元素 select、flash与ifr...

• HTML5是什么东东我们为什么要关注

《HTML5是什么》是一幅很酷的HTML可视化的解说,分析了各种浏览器的支持，以及和Flash的各种对比。从图形信息设计的角度来看，我不喜欢颜色组分析浏览器性能的那块，不应该让我回头来看对比颜色，看哪个浏览器缺失了哪个性能。

• 用CSS禁用输入法

用简单的一行CSS就可以在表单元素里禁用输入法。

• CSS实现HTML元素透明的那些事

CSS3草案中定义了{opacity: | inherit;}来声明元素的透明度，这已经得到了大多数现代浏览器的支持，而IE则很早通过特定的私有属性filter来实现的，所以HTML元素的透明效果已经无处不在了。首先看看A级浏览器所支持的用CSS实现元素透明的方案：

• IE双倍浮动边界Bug

看《CSS实战精粹》已经看到hack了，之所以最近没有把文章抄上来，一是懒，二就是比较困惑。对CSS我属于白痴一样，所以看书中介绍的例子，解决了某某样式BUG，对此我一头雾水，所以我决定将书中提到的一些Bug给弄出来看一下到底是如何让人头疼的一个问题。第一篇，大家一起来看一下“IE双倍浮动边界Bug”，高手请飘过~~ Bug 描述 The IE5/6 Doubled Float-Margin Bug 中文翻译版，无图大家通过上面提供的链接很方便知道现象的...

• 闲谈CSS3动画

随着CSS3越来越热，CSS3动画也逐渐受到大家的关注。这次有幸修改淘宝网全站页头，小小地应用了下(详见http://www.taobao.com/下拉箭头处的hover效果)。与其说是渐进增强，不如说是满足了技术人小小的虚荣心。以下是自己的一点理解，希望能对大家有所帮助。 … 关于CSS3动画从(http://www.w3.org/Style/CSS/current-work)可以看出，CSS动画涉及的知识点包括 CSS 2D Transformations, CSS 3D Transformations, CSS Transition...

• 为什么不压缩 HTML

CSS 和 JavaScript 的压缩已经很成熟，各大网站都在使用。HTML 的压缩（特指去除空白字符和注释），除了 Google 等搜索页面，在其它网页上基本见不到踪迹。原因很简单： HTML 文档中，多个空白字符等价为一个空白字符。也就是说换行符是不能被干掉的，要干掉的话，也得至少保留一个空白。 HTML 元素中，有一个pre元素，表示 preformatted text. 里面的任何空白，都不能被删除。 HTML 的注释，有 IE 的条件注释。这些条件注释是文...

• CSS Sprites 是否有必要？

Smashing Magazine 上面有一篇文章讨论了一下 CSS Sprites ，文章本身并没有否定这种技术的意思，但是提出了很多有价值的反面观点，做 Web Developer 的可以参考一下： 1. 浏览器默认会缓存所有的图片 2. CSS Sprites 要把很多图片组织在一起，会增加切图的工作量。 3. CSS Sprites 需要你编写很多定位代码，增加编码工作量。 4. 不容易维护。 5. 不是所有的图片都应该当做背景。很多时候要考虑到页面语义化，有些作为内容的重要图...

• 支持多浏览器的网站变灰方法

这篇文章中给出了针对 IE 浏览器的使网站变灰的方法，具体做法是在 CSS 文件的开头添加这样一行： html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 但是很遗憾这种方法并不能支持 Firefox 和 Chrome。这篇博客介绍一种支持各种浏览器的网站变灰方法，试验其支持 Firefox、Chrome 和 IE，据说可以支持 Opera（未测试），方法比较简单，就直接介绍步骤了。 1. 到这里下载 grayscale.js 文件到你网站的...

• 十六进制HTML颜色

网页颜色在 HTML 中用十六进制记数法或名称来指定。使用十六进制记数法，要表述颜色的第一个方法是指定要混合的三原色中每一种色彩的量。通过指定红、绿、蓝的三原色组合，您可以构造出任何颜色。十六进制代码中每六位数代表一个最终颜色值。 #XXxxxx

• XML/RSS的CDATA区段

之前做RSS输出的程序时，用""解决了description节点文章内容的老断点的问题。当时不甚其解，也没花时间弄明白它的原理。今天继续学习了一下XML的基础格式，豁然开朗。每种数据格式，如果要被广泛推广，被多种解析器能理解，必需要有其特定的格式，就如语法一般。虽然XML 和 HTML 为不同的目的而设计：以下是引用片段：XML被设计为传输和存储数据，其焦点是数据的内容。 HTML被设计用来显示数据，其焦点...

• IE下pre标签的InnerHTML问题

今天在升级我自己的语法高亮显示插件的时候, 发现在IE下, 都缺少了最后一行的显示, 如果pre中只有一行语句的时候, 就什么都不显示.. 最后发现, 原来在IE下,pre的innerHTML取不到原本应该有的结尾的回车换行符号.

• IE7 form中input背景图片失效的解决

Q：在一个表单中为input按钮设置背景图片后，IE7浏览并未显示所设置的背景图片，而是显示了一个default style的按钮，为什么呢？

• HTML5本地存储初探(三)

完成了数据的本地存储，就要将文件存储也搞定。为了实现文件的本地存储，html5搞了一个叫 manifest 的文件，这个文件就是一个缓存清单，把需要缓存在客户端的文件告诉浏览器。manifest是一个...

• HTML5本地存储初探(二)

完成了UI，我们就需要对数据进行处理了。在开始“数据”的本地存储之前，我们先来了解一下client-side database storage API: the client-side database storage API allows web applications to store structured data locally ...

• HTML5本地存储初探(一)

html5带给我们的不仅仅是更多语义丰富的标签，还有更多更牛逼的特性，比如“离线存储”。对于台式电脑来说，或者它并没有带来什么惊喜，但是对于移动设备来说离线存储简直就是一个神...

• 如何强制限制表格宽度

网站有个地方由于个别用户写的域名比较长，导致表格被撑的很开这就需要强制限制表格宽度（防止文字对列表的挤开），举个例子如下：

...