2011年11月_pengju_guo

转载 1111

满足以下条件中至少一条时会触发块级格式化上下文(Block Formatting Contexts):"float"的值不是"none","overflow"的值不是"visible","display"的值是"table-cell","table-caption",或"inline-block","position"的值既不是"static"也不是"relative

2011-11-08 16:30:36 1154

转载第11章使用正则表达式的模式匹配(一)

正则表达式 (regular expression) 是一个描述字符模式的对象。JavaScript 的 RegExp 类表示正则表达式，而 String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。ECMAScript v3 对 JavaScript 正则表达式进行了标准化。JavaScript 1.2 实现了 ECMAscript v3 要求的正则表达

2011-11-29 13:22:01 4426

转载屏蔽 Backspace 页面回退

// 监听键盘事件(function(){// Backspace (keyCode == 8)if(window.event){ //IEdocument.onkeydown = function(){var type = event.srcElement.type;if(event.keyCode == 8){if(event.srcElement.readOnly

2011-11-18 14:01:52 1092

转载 drop-down

下拉菜单这种方法是基于 A List Part 介绍的 Suckerfish Dropdowns 技术实现的。这个菜单也是基于简单的无序列表实现的。顶级的菜单项是一个主列表，每个主菜单对应的下拉菜单项将放在内嵌列表中：首先为顶级菜单添加样式规则：去除它的默认的样式，同时将列表项的 float 属性设置成 left ，以使它们以水平方式排列，然后列表项的 position 属性设置成

2011-11-16 13:59:10 550

转载【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十三：分层的显示(Layered presentation)

前面已经将 CSS 中比较核心的布局基础讲解完毕了。其中说到的主要有 3 种布局方式，一种是常规流中的定位，一种是浮动，最后的是绝对定位。不熟悉的童鞋可以翻看以前关于常规流，浮动，绝对定位的帖子。这 3 种定位方式，可以让你把元素放到任何需要的地方（- -# 当然，不包含浏览器可见窗口之外）。为了说明方便，我们把浏览器的可视窗口看作二维的坐标系，以左上角为原点。假设两个元素分别形成了 10

2011-11-15 19:03:44 587

转载【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十二

'display'，'position'和'float'相互关系前面几贴，我们介绍了display，position，float，介绍了他们是如何影响框的生成和框的布局的。那么，这几个特性之间有无制约关系呢，比如，既浮动又是绝对定位的元素，到底应当是浮动还是应当以绝对定位的方式定位呢？带着我们的问题，请看以下3者间的关系。标准如是说1. 如果 'display' 的值为

2011-11-15 18:54:02 476

转载说说标准——CSS核心可视化格式模型(visual formatting model)之十一：绝对定位

在前面的帖子中，我们已经讲了可视化模型中布局的两大方面：1. 常规流 2. 浮动，布局3大部分只剩下了绝对定位。前面的帖子中也零星的提到过关于绝对定位的某些特性，但都不够细致系统。绝对定位（Absolute positioning）相对包含块偏移定位在绝对定位模型中，一个框明确地基于它的包含块偏移。不是父元素，这点需注意。要是人家问你，绝对定位相对于谁定位啊？你很快乐的说：

2011-11-15 18:25:07 558

转载说说标准——CSS核心可视化格式模型(visual formatting model)之十：控制紧接浮动的排列-clear 特性

向前两个帖子，都是讲的伟大的浮动：它带给我们一个不属于常规流的世界，它不能超出它的包含块，它的位置跟在它之前的元素生成的框有关系(详见前面的浮动规则)…… 那么，它对处于它后面的元素有什么关系呢？对于块框，会认为它不存在，行框会绕着它排列！有没有方法使块框也可以在它后面排列，而不再当它不存在呢？答案是肯定的。W3C总是透着一种非常人性化的味道。clear 特性就是做的这件事。我感觉，clear

2011-11-15 18:17:45 470

转载说说标准——CSS核心可视化格式模型(visual formatting model)之九：浮动(Float)定位细则二

本帖接【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一6. 浮动框的顶边不可以高于源文档中先前元素产生的块框或浮动框的顶例子最直接了：HTML codestyle type="text/css"> div { width: 100px;

2011-11-15 18:15:09 476

转载说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一

浮动特性非常有用，3大布局核心之一。虽然如此，它涉及内容过多，浏览器兼容性问题也很多。它的定位不仅涉及包含块，还涉及到了行框，块框，还有行内框等内容；并且，各浏览器对其的支持还有不少兼容性问题。因此，它既是美梦又是噩梦。那么，浮动产生的困惑缘何而生，又由何而灭呢？一切都由W3C标准来定夺吧……float 特性'float'适用于哪些元素可设置给任意元素，但只适用于

2011-11-15 18:10:19 734

转载【分享】说说标准--CSS核心可视化格式模型(visual formatting model)之七：浮动(Float)概述

浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型，并不是二维的。元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表示。但是，元素和元素之间的位置如果有所重叠，谁显示在前面，就涉及到另一个轴：z轴。我们经常使用的 z-index 就是如此得来的。浮动框在整个模型中，z轴坐标比常规流中的值要高，所以会飘在它上面。也可

2011-11-15 18:01:03 634

转载【分享】说说标准--CSS核心可视化格式模型(visual formatting model)之六：常规流中的相对定位

前两个”说说标准“系列的帖子已经将常规流中的BFC和IFC都说过了。今天跟大家分享最后常规流中的最后一个要点：常规流中的相对定位。绝对定位元素在常规流中的占位是未偏移前的位置一旦一个框按照常规流或者是浮动得到定位，它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响：● B2在定位时，就好象B1没有发生偏移一样。● B1偏移后，B

2011-11-15 17:55:44 484

转载【分享】说说标准 —— 揭开外边距折叠(Collapsing margins)的面纱

生活本不是华袍，更禁不住揭开来看。 ——美丽的xixi生活之美，在于真实和朦胧之间。本没有想象中美丽，却又有许多人非要揭示它的艰辛。虽说，生活上的事，不须太过清楚，要深得“难得糊涂”其中三味，但工作上的事，确实越清楚越好，仔细想想，原来是因为工作比生活简单的多的多。今天，我正要当众揭开外边距折叠的面纱。哇咔咔咔咔！！！外边距折叠，是属于盒模型部分的一个重要概念，之所以要把它拿出

2011-11-15 15:40:08 939

转载【分享】说说标准——你真的了解盒子模型(box model)吗？

首先，想像一下，页面的构成元素都有什么？恩～～，SPAN DIV TABLE INPUT IMG 等等等等。这些元素在页面上都是怎么放置的呢？像 SPAN IMG INPUT 这样的元素是行内元素，放置的时候可以在一行，而DIV会独占一行放置……但是不管它们这些元素怎么放置，有一点是肯定的，那就是，每个元素的形状都是矩形的，严格的说，元素形成了一个矩形的区域，这个区域，被称作box，也就是

2011-11-15 14:34:16 764

转载【分享】说说标准——层叠顺序(Cascading order)，看看到底哪个样式在起作用？

Web标准化运动的口号——分离、分离、分离。在2003年的 SXSW 会议（译注：一个关于电影、音乐和交互的会议）中，Steve Champeon和Nick Finck做了一个名为 “面向未来的全方位Web设计” 的演讲。这样，他们揭示了这种Web开发新方法的蓝图。Steve还给它取了个名称：渐进增强（Progressive Enhancement）。从内容花生开始，将

2011-11-15 13:55:29 621

转载【分享】说说标准——关于样式的特殊性

本文简单的介绍下何为选择器的特殊性，它是起什么作用的，以及特殊性怎么计算方面的知识。所谓的特殊性是指，作用于同一元素的同一特性 (property)的不同选择器的多个值，哪个会起作用，特殊性值最高的会起作用。比如，如下代码中，多个样式中的 'background-color' 同时作用于同一个 DIV 元素，那么最后，到底 DIV 应该会是什么颜色呢？HTML code

2011-11-15 10:21:39 473

转载【分享】说说标准——CSS标准中的值

人对于一件事，不知道的时候感觉它很神秘，于是便很想知道这个到底是怎么回事，但是知道了之后呢，感觉也不过如此，人就是这样……呃……说正事儿，CSS中的样式设置，最终离不开两样东西：特性和特性的值。特性是诸如 ”height”、“width”、“color”等可设置的名称，特性的值，顾名思义，就是特性的值，有大小，长短，颜色，路径等……这些值，在CSS特性的描述中，都有自己的表示方式。比如

2011-11-14 20:26:10 656

转载【分享】说说标准——CSS的错误解析规则

我说我的眼里只有你 —— 景岗山用这句歌词来形容CSS的错误解析规则，我觉得再合适不过。CSS的错误解析规则的眼里只有CSS标准，对其他的错误语法，大都采取直接忽略的态度，太**忠心了（此处省略三字）。CSS跟我们所认识的其他语言，例如 JavaScript，一样，也有自己的语法，它适用于任何版本的CSS，描述了CSS的核心句法(syntax)、关键字、厂商扩展、可用字符集、规则集

2011-11-14 17:43:13 586

转载 An Experiment in Rounded Corners

今天下午突然有了一个想法，那就是在Internet Explorer中一定有简单的实现圆角的方式。不幸的是，我开始的想法完全失败了，跟以前一样在同样的地方停了下来。然而，我想试一下 VML 。VML是一个基于XML的方式，并且Microsoft已经推荐给了 W3C 。要使VML可用的语法真的很沉重。你必须为 VML 元素定义一个 behavior ，包含 VML namespace ，然后使用

2011-11-14 14:36:30 385

转载使用YUI CSS工具

JavaScript 框架高级编程 - 应用Prototype、YUI、Ext JS、Dojo、MooTools第15章使用YUI CSS工具本章内容简介：建立跨浏览器一致性控制字体利用网格构建布局15.1 建立跨浏览器一致性每种浏览器制造商都构建了自己的布局算法，虽然这些算法非常接近，但并不完全相同。因此，在不同的浏览器上，页面中对象之间的距离甚至字体间距调整都有可

2011-11-13 22:47:58 457

转载 css hack

css hackCSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

2011-11-13 21:55:51 415

转载 IE6的3px问题

这个bug仅在IE6和以下版本中出现，IE7没有这个bug 。IE6和更早的版本会在一个浮动的列(橙色)和一个非浮动的列(灰色)之间插入一个3px的空间。这个3px空间的准确位置取决于几个条件。非浮动列没有固定的宽度或者高度。非浮动列有固定的宽度或者高度。当满足第1种条件时，非浮动列里会沿着浮动列有个3px的缩进，直到浮动终止(如下图，注意在灰色的左边有3p

2011-11-13 19:55:15 2148

转载 IE/Win Guillotine Bug

我的浮动元素哪去了The Guillotine 是一个 bug ，当链接 hovered 结束后，浮动元素的 bottom part 被截断。这个效果非常像 IE/Win Unscrollable Content Bug，但是当它包含少量内容和更多的 dynamic 的时候更容易出现。这有个小例子来阐释我们在说什么。The Background现在我们已经看到了

2011-11-13 16:25:35 554

转载 pseudo-class, pseudo-element, pseudo-CSS

伪元素和伪类这篇文章打算总结伪类和伪元素的 bugs 以及在 IE6/Win 和 IE7 beta3 中表现的不一致性。 The :first-letter pseudo-element语法IE6: 在选择器 selector 和声明块 declaration block 之间必须得有一个空格 blank(IE 6 pseudo elements bug) - 这与在标

2011-11-13 02:44:20 4513

转载 PNG alpha transparency: AlphaImageLoader filter flaws

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader微软的专用属性 alpha image loader filter 经常用来解决( work around ) 在 IE6/Win 中支持的 the missing 32-bit PNG alpha transparency (24-bit + 8-bit alpha chan

2011-11-11 17:37:06 793

转载 absolutely positioned element and percentage width

absolutely positioned element and percentage widthFirefox 截图IE6截图Definition of 'containing block': ... 4. If the element has 'position: absolute', the containing block is

2011-11-11 14:47:00 410

转载 The 1 Pixel Rounding Error Problem

理论当 boxes 被 rendered ，这些盒子的尺寸如果是 "relative" 单位 (units) ，例如百分比或 EM's ，这样浏览器就必须算出来需要用多少 screen pixels 来设置盒子的尺寸。问题就是这些相对单位并不总是在所有浏览器里面都精确到相同数字的像素，但是所有盒子又必须计算出来精确的像素。这就清楚了，一个完美的解决方案并不是不可能。尽管如此，必须找到

2011-11-11 13:38:09 378

转载 Absolutely Buggy II - Absolute boxes inside relative boxes

The set-up: 你想在正常流下获得一个静态包含块，在里面放一个绝对定位元素。我们知道这个元素将根据离它最近的已定位祖先来计算它的位置，因此，包含块设置为 "position:relative" 来保证它在流中，就是为绝对定位元素提供一个 positioned holder 。The demo:body { font-family: verdana,san

2011-11-11 11:50:35 419

转载 The IE/Win Disappearing List-Background Bug

What is it?这是另一个IE bug，把一个浮动的设置为相对定位，在它内部放一个list，给list设置一个背景。(IE不管你设置了一个背景图，还是颜色，还是都设置了，他们都会消失)。当这些情况在IE中出现时，背景会错误的显示。这有一些屏幕截图，你可以清楚的看到：(IE6中会这样显示，IE7,IE8不这样显示)这是给一个中的设置了背景之后，在IE中如何渲染的效果

2011-11-11 02:26:44 592

转载 IE/Win: relatively positioned parent and floated child – disappearance

盒子的位置根据正常流来计算 (this is called the position in normal flow) 。然后盒子根据它在正常流中的位置进行偏移。当一个盒子B是相对定位的，后面的盒子的位置会根据盒子B偏移之前的位置进行计算。 (CSS2.1 9.3.1)不同类型的消失 (Different kinds of disappearance)一些bugs会引起元素在IE中消失。有一

2011-11-10 19:55:55 903

转载 IE6 Peek-a-boo Bug

The setup:一个流动的盒子，里面有一个浮动元素，旁边是内容 (content) 。一切都正常，直到用IE6查看。我的content哪去了？你重新加载页面，也没有。当你滚动页面，或选择其他窗口，在切换回出问题的地方，它又出来了！注意：这个一直存在的BUG已经被IE7修复了(released in late 2006) ，所以 IE捉迷藏BUG (Peek-a-boo BUG) 最终被

2011-11-10 12:34:51 476

转载 The FloatModel Problem

什么是 Float model ?下面是一个关于静态 (static) 元素与浮动元素 (floats) 交互的简单例子。根据W3C的规范，当一个浮动元素后面直接跟一个静态元素 (元素属于常规流)，首先，浮动元素会在包含框左边界开始显示 (本例中是 "body" 元素)，然后，静态元素会跟浮动元素一样，从相同的边，相同的垂直高度开始显示。浮动元素会覆盖在静态元素之上，除非静态元素具有左外边

2011-11-09 20:53:33 432

转载 IE6的3像素BUG产生条件及解决方法

作者：KwooJan原文地址：http://www.w3cfuns.com/forum.php?mod=viewthread&tid=263今天“W3Cfuns2群”上有朋友遇到页面无法兼容多种浏览器，代码发给我后，发现原因在于IE6的3像素BUG，我将这个问题进行重现出来，仔细给大家讲一下，先看一下下面的代码：

2011-11-09 18:02:01 715

转载 22222

On having layout本文修订中当前版本：rev. 7 2007-05-09修订历史各种语言版本目录介绍Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)”，意思是这些 bu

2011-11-09 11:19:42 672

转载【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之五：常规流中的inline formatting context

在【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四：常规流中的Block formatting context中，已经分享了块格式化上下文，现在继续分享关于常规流中的inline formatting contexts。行内格式化上下文（inline formatting contexts）什么是行框相对于块格式化上下文，在

2011-11-07 21:26:38 850

转载【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四：常规流中的Block formatting context

在上次分享的【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三：定位体系概述中，大致介绍了可视化模型中的定位体系。其中，常规流是最为基础的。这次就和大家分享常规流的一些布局要点和重要的概念。在常规流中的框（boxes，元素形成的矩形区域），都属于一个格式化的上下文中，可能是块的，也可能是行内的，但不可能同时是行内的又是块的。块框参

2011-11-07 20:50:45 1607

转载【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三：定位体系概述

在说说标准——CSS中非常重要的可视化格式模型(visual formatting model)简介中，曾经提到了：在可视化格式模型中，每一个元素都会根据盒子模型产生0个或多个box，而这些box的布局会受四大因素的影响，其中之一，就是定位体系，个人感觉，这是对布局影响最大的因素。CSS2.1中，一个框(box，就是元素形成的方块等)可以根据三种定位体系布局。CSS2.1中的定位体

2011-11-07 18:04:04 677

转载【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之二：控制框(Controlling Box)的形成

关于可视化模型的包含块，已经在“说说标准”系列中跟大家分享过了。这次，跟大家分享另一个比较重要的概念，这个概念也许大家会很熟悉，因为经常挂在嘴边，这就是，块元素和块框，行内元素和行框，以及 display 特性等。我们经常用到块元素、行内元素的概念，那么，到底什么是块元素，什么是行内元素，它们有什么特点，怎么形成的，有什么作用呢？什么是块框，什么又是行内框呢？下面，请大家跟

2011-11-07 03:40:53 687

转载【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一：包含块(containing block)

上个帖子中对可视化格式模型做了一个概述，并简单的介绍了一下包含块的概念，在这里：【分享】说说标准 --CSS中非常重要的可视化格式模型(visual formatting model)简介。这个帖子会就包含块的细节给出详细的讲解。上回贴说到，一个元素box的定位和尺寸，有时候会跟某一矩形框有关，这个矩形框，就被称作元素的包含块。而元素会为它的子孙元素创建包含块，那么，是不是说

2011-11-06 23:21:14 793

转载【分享】说说标准——CSS中非常重要的可视化格式模型(visual formatting model)简介

从今天开始，我会跟大家分享CSS非常重要的可视化格式模型，那这个概念到底有多重要呢？盒子模型是CSS中所有元素产生的box的自身构成，而可视化格式模型则是把这些box，按照规则摆放到页面上，也就是通常所说的布局。换句话说，可视化格式模型是整个页面的模型，这个模型规定了怎么在页面里摆放box，box相互作用等等。属于CSS的最为核心的概念之一。可视化格式模型的概念非常多，我会分多次说明，我也会在

2011-11-06 23:12:22 848

空空如也

空空如也