yaway.fe

The @media construct allows style sheet rules for various media in the same style sheet:

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

Style rules outside of @media rules apply to all media types that the style sheet applies to. At-rules inside @media are invalid in CSS2.1.

使用引号 只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

italic 和 oblique 的区别 font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。 通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

字体加粗 font-weight 属性设置文本的粗细。 使用 bold 关键字可以将文本设置为粗体。 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

使用 em 来设置字体大小 浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

结合使用百分比和 EM

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

tableLayout 属性用来显示表格单元格、行、列的算法规则。 该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。

设置表格布局算法：

table
  {
  table-layout:fixed;
  }

禁用（disabled）：value 不会在 Form 提交时发送出去。这个对于按钮来说用处比较大，一般的 type=”text” 最好是隐藏，而不是禁用，因为它不需要发送数据。

只读（readonly）：value 会在 Form 提交时被发送出去。所以需要在外观上显示跟一般 input/textarea 一样，但不允许用户修改数据，可以用这个属性。

隐藏（hidden）：这个比较好理解，value 会被发送，并且用户看不到。

堆栈顺序

每一个在HTML文档中的元素既可以在其他元素的前面，也可以在其他元素的后面。这就是所谓的堆栈顺序。

堆栈上下文

一组具有共同双亲的元素，按照堆栈顺序一起向前或向后移动构成了所谓的堆栈上下文。

1.现在，堆栈上下文有三种方法可以在一个元素上形成： 当一个元素是文档的根元素时（html元素）

2.当一个元素有一个position值而不是static，有一个z-index值而不是auto

3.当一个元素有一个opacity值小于1

在同样的堆栈上下文里的堆栈顺序

下面是几条基本的规则，来决定在一个单独的堆栈上下文里的堆栈顺序（从后向前）：

1.堆栈上下文的根元素

2.定位元素（和他们的子元素）带着负数的z-index值（高的值被堆叠在低值的前面；相同值的元素按照在HTML中出现的顺序堆叠）

3.非定位元素（按照在HTML中出现的顺序排序）

4.定位元素（和他们的子元素）带着auto的z-index值（按照在HTML中出现的顺序排序）

5.定位元素（和他们的子元素）带着正z-index值（高的值被堆叠在低值的前面；相同值的元素按照在HTML中出现的顺序堆叠）

定位元素带有负的z-index值被在一个堆栈上下文中先排序，这意味着他们出现在所有其他元素的后面。正因如此，它使一个元素出现在自己父元素之后 成为可能，这以前通常是不可能的事。当然，这局限于它的父元素与它在同一个堆栈上下文，并且不是那个堆栈上下文的根元素。一个伟大的例子如Nicolas Gallagher的CSS不用图像降低阴影。

position:static 不会影响节点的遮盖关系.

如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高.

参与规则: 我们尝试不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用. W3C 对 z-index 属性的描述中提到 在 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

当 position 设为 relative, absolute 或者 fixed, 而没有设置 z-index 时, IE8 以上和 W3C 浏览器 (下文我们统称为 W3C 浏览器) 的 z-index 默认值是 auto, 但 IE6 和 IE7 是 0.

参与规则 2: 如果所有节点都定义了 position:relative, 并且将 z-index 设为整数值, 根据从父规则, 父节点的层级决定了子节点所在层级.

非情非得已, 切勿用 JavaScript 计算 z-index, 并将某个节点的 z-index 设置成所有节点中层级最高.

_self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

我们都知道在 JS 里，变量不定义就可以用。但一定要清楚，未定义的变量，仅仅是可写，但不可读。

未定义变量意味着在 scriptObject 的变量表中找不到，JS 引擎会沿着 scriptObject 的 upvalue 往上寻找，如果都没找到，对于写操作 i = 1; 最后就会等价为 window.i = 1; 给 window 对象新增了一个属性。对于读操作，如果一直追溯到全局执行环境的 scriptObject 上都找不到，就会产生运行期错误。