JavaScript权威指南（第六版） （JavaScript 脚本化文档一些概念）

 
1.每一个Web浏览器窗口,标签页和框架由一个Window对象所表示.每个Window对象有一个document属性引用了Document对象.Document对象表示窗口的内容.尽管如此,Document对象并非队列的,它是一个巨大的API的核心对象,叫做文档对象模型(Document Object Model, DOM),它代表和操作文档的内容.

2.HTML文档的视觉显示包含很多变量：字体，颜色，间距等。CSS标准列举了这些变量，称为样式属性。CSS定义了这些属性以指定字体，颜色，外边距，边框，背景图片，文本对齐方式，元素尺寸和元素位置。为了定义HTML元素的视觉表现，规定了这些CSS属性的值。为此，紧跟着属性名是冒号和值，例如：
  
   font-weight：bold
  
为了全面地描述一个元素的视觉表现，通常需要指定不止一个属性。当需要多个名/值对时，它们之间用分号隔开；

   margin-left：10%； /* 左外边距是页面宽度的10% */
   text—indent：.5in; /* 1/2英寸缩进 */
   font-size: 12pt;  /* 字体尺寸12pt */
 
3.有两种方式将一组定义视觉表现的CSS属性和对应的HTML元素关联在一起。第一种是通过给每个单独的HTML元素设置style属性值的方式，称为内联样式：

  <p style="margin: 20px; border: solid red 2px;">
  内联显示的字体内容。
  </p>
  第二种方式，通常将单独的HTML元素与CSS样式分开并把它们定义在一个样式表（stylesheet）中会更有用。样式表通过选择器将一组样式属性和使用选择器（selector）描述的一组HTML元素关联在一起。一个选择器基于元素ID，类名或标签名或更多条件指定（或成“选择”）一个或多个文档中的元素。
 
4.CSS样式表的基本元素是样式规则，它们由选择器和包裹在一对“{}”中的CSS属性和值所组成。每个样式表可以保护任意数量的样式规则：
  
   p {    /*选择器“p”匹配所有的<p>元素*/
 text—indent：.5in; / * 首行缩进0.5英寸 */
   }  
 
   .warning {   /* 任何以“warning”类命名的元素 */
  background-color: yellow;  /*设置为黄色背景*/
  border: solid black 5px;  /* 黑色大边框 */
   } 
 
 5. 层叠
 在CSS里“C”代表了“层叠”。该术语指示了应用于文档中任何给定元素的样式规则是各个“来源”的“层叠”效果：
  * Web浏览器的默认样式表
  * 文档的样式表
  * 每个独立的HTML元素的style属性
  当然，style属性中的样式覆盖了样式表中的样式，并且文档的样式表中的样式覆盖了浏览器的默认样式。任意给定元素的视觉表现可能是来自3个来源的一个样式组合。一个元素甚至可能匹配样式表中的多个选择器，在此情况下，所有这些选择器的关联样式属性都将应用到该元素上。（如果不同的选择为同一个样式属性定义了不同的值，那么与最具体的选择器相关联的值将覆盖与不那么具体的选择器想关联的值。）
 
  为显示文档元素，Web浏览器“必须”组合元素的style属性，包括来自文档样式表中的所有匹配的选择器的样式值。计算的结果是一组实际用于显示元素的样式属性和值。这组值就是元素的“计算样式”（computed style）。
 
 6.复合属性
某些经常在一起使用的样式属性可以组合起来使用一个特殊的复合属性。例如:font-family,font-size和font-weight属性可以用font的复合属性值一次性设置：
 
   font: bold italic 24pt helvatica;

同样，border，margin和padding属性就是为元素的每条边都设置边框，外边距和内边距（元素和边框之间的空间）的复合属性。例如：代替使用border属性，可以使用border-left,border-right,border-top和border-bottom属性来独立设置边框的每条边。事实上，这些属性本身也是复合属性，例如：代替指定border-top，可以分别指定border-top-color， border-top-style和border-top-width等属性。

7.重要的CSS样式属性
属性              描述
postion      指定元素的定位类型
top,left     指定元素上，左边缘的位置
bottom，right   指定元素下，右边缘的位置
width，height   指定元素的尺寸
z-index   指定元素相对于 重叠元素的“堆叠次序”，定义了元素定位的第三个维度
display         指定元素是否以及如何显示
visiblity       指定元素是否可见
clip   指定元素的“裁剪区域”，只显示元素在区域内的部分
overflow        指定元素比分配的空间要大时的处理方式
margin，border，padding 指定元素的空白和边框
background     指定元素的背景颜色或图片
opacity        指定元素的不透明度（或半透明度）

8.用CSS定位元素
CSS的postition属性指定了应用到元素上的定位类型，如下是4个可能出现的属性值：
 static：
    默认属性。指定元素安装常规的文档内容流（从左往右，从上到下）进行定位。静态定位的元素不能使用top，left和类似其他属性定位。想对文档元素使用css定位技术，必须将其position属性设置除此之外的其他3个属性值。
absolute：
    该值指定元素是相对于它包含的元素进行定位。相对于所有其他的元素，绝对定位的元素是独立定位的，它不是静态定位的元素中文档流的一部分。它的定位要么是相对于最近的定位祖先元素，要么是相对于文档本身。

fixed：
    该值指定元素是相对于浏览器窗口进行定位的。固定定位的元素总数显示在哪里，不会随着文档其他部分而滚动。类似绝对定位的元素，固定定位的元素和所有其他元素是独立的，它不是文档流的一部分。

relative：
    当position属性设置为relative，元素按照常规的文档流进行布局，它的定位相对于它文档流的位置进行调整。系统保留着元素在正常文档流中的空间，不会因为要填充空间而将其各边合拢，也不会将元素从新的位置”推开“。

9.没有必要给每一个动态元素指定尺寸，某些元素（如图片）具有固有尺寸。而且，对包含文档或其他流式内容的动态元素通常指定相要的宽度就足够了，让元素内容布局来自动决定它的高度。

CSS指定位置和大小属性是有单位的。在上面的例子中，定位和尺寸属性值以”px“结尾，代表像素。也可以用英寸（”in“），厘米（”cm“），点（”pt“）和字体行高（”em“）。
CSS也允许指定元素的位置和尺寸为其容器元素的百分比。例如：

   <div style="position：absolute； left： 25%； top: 25%; width: 50%;height: 50%; border: 2px solid black">
   </div>

10.第三个维度：z-index
left，top，right和bottom属性是在容器元素中的二维坐标中指定X和Y坐标。z-index属性定义了第三个维度：它允许指定元素的堆叠次序，并指示两个或多个重叠元素中的哪一个应该绘制在其他的上面。z-index默认为0，可以是正或负的整数。当两个或多个元素重叠在一起时，它们是按照从低到高的z-index顺序绘制的。如果重叠元素的z-index值一样，它们按照在文档中出现的顺序绘制，也就是最后一个重叠的元素显示在最上面。

 注意：z-index只对兄弟元素（例如，同一个容器的子元素）应用堆叠效果。如果两个元素不是兄弟元素之间的重叠，那么设置它们的z-index属性无法决定哪一个显示在最上面。相反，”必须“设置这两个重叠元素的兄弟容器的z-index属性来达到目的。
 
 非定位元素（例如：默认使用position：static定位）总是以防止重叠的方式进行布局，因此z-index属性不会应用到它们上面。尽管如此，它们默认的z-index值为0，这意味着z-index为正值定位元素显示在常规文档流的上面，而z-index为负值的定位元素显示在常规文档流下面。
 
 11.CSS定位实例：文本阴影
   <!-- text-shadow属性自动产生阴影效果 -->
   <span style="text-shadow: 3px 3px 1px #888">Shadowed</span>
  
   <!--定位产生的文本阴影效果 -->
   <span style="postion:relative;">
 Shadowed <!--这里是投射阴影的文本 -->
 <span style="postion:absolute；top:3px; left:3px; z-index:-1; color: #888">
 Shadowed <!--这里是阴影-->
 </span>
   </span>
 
  需要投射阴影的文本包裹在相对定位的<span>标签中，不用设置其他定位属性，所以文本显示在其正常的位置上。阴影位于一个绝对定位的<span>中，它包含在上面那个相对定位的<span>中，这样z-index属性确保应用在其文本的下面。
 
12.CSS允许指定元素周围的边框，外边框和内边距。元素的边框是一个围绕（或部分围绕）元素绘制的矩形。属性还允许指定边框的样式，颜色和厚度：
  
   border: solid black 1px;  /* 绘制一个1像素的黑色实线边框*/
   border: 3px dotted red;   /* 绘制一个3像素的红色点线边框*/
 
13.margin和padding属性都指定元素周围的空白空间。主要的区别在于，margin指定边框外面--边框和相邻元素之间的空间，而padding指定边框之内---边框和元素内容之间的空间。外边距提供了常规文档流中（可能有边框的）元素和它的”邻居“之间的视觉空间。内边距保存元素内容和它的边框在视觉上分离。如果元素内没有边框，内边距往往也是没有必要的。如果元素是动态定位的，而不是常规文档流的一部分，它的外边距就无关紧要了。

  padding: 1px 2px 3px 4px;
  /*上面的代码等价于下面4行代码*/
  padding-top: 1px;
  padding-right: 2px;
  padding-bottom: 3px;
  padding-top: 4px;
 
13.CSS盒模型
首先，width和height只指定了元素内容区域的尺寸，它不包含元素的内边距或边框（或外边框）所需的任何额外空间。为了确认有边框元素在屏幕上的全尺寸，必须把元素的宽度加上左右两边的内边距和左右两个边框宽度，把元素的高度加上上下两边的内边距和上下两边框宽度。
其次，left和top属性指定了从容器边框内侧到定位元素边框外侧的距离。这些属性不是从容器内容区域的左上角开始度量的，而是从容器内边距的左上角开始的。同样，right和bottom属性是从容器内边距的右下角开始度量的。

14.两个CSS属性影响了文档元素的可见性：visiblity和display。visiblity属性很简单：当其值设置为hidden时，该元素不显示，当其值设置为visible时，该元素显示。display属性更加通用，它用来为接收它的容器指定元素的显示类型。它指定元素是否是块状元素，内联元素，列表项等。但是，如果display设置为none，受影响的元素将不显示，设置根本没有布局。
    visibility和display属性之间的差异可以从它们对使用静态或相对定位的元素的影响中看到。对于一个常规布局流中的元素，设置visibility属性为hidden使得元素不可见，但是在文档布局中仍保留了它的空间。类似的元素可以重复隐藏和显示而不改变文档布局。但是，如果元素的display属性设置为none，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来不存在。例如，在创建展开和折叠轮廓的效果是display属性很有用。

15.overflow和clip属性允许只显示元素的一部分。overflow属性允许的值和含义如下所示：
  visible：
      默认值。如果需要，内容可以溢出并绘制在元素的边框的外面。
 
  hidden：
      裁剪掉和隐藏溢出的内容，即在元素尺寸和定位属性值定义的区域外部会绘制内容。
 
  scroll：
   元素一直显示水平和垂直滚动条。如果内容超出元素尺寸，允许用户通过滚动来查看额外的内容。此属性值负责文档在计算机屏幕中的显示。
 
   auto：
      滚动条只在内容超出元素尺寸时显示，而非一直显示。
  
   overflow属性允许指定当内容超出元素边框时该如何显示，而clip属性确切地指定了应该显示元素的哪个部分，它不管元素是否溢出。在创建元素渐进显示的脚本效果时候该属性特别有用。

16.clip属性的值指定了元素裁剪区域。clip属性的语法是：
 
  rect(top right bottom left)
相对于元素边框的左上角，top，right，bottom和left4个值指定了裁剪矩形的边界。
例如：要只显示元素的100*100像素大小部分，可以赋予该元素style属性：
   
 style=”clip: rect(0px 100px 100px 0px“);
注意：圆括号中的4个值是长度，所以”必须“包含明确的单位，如px代表像素。不允许使用百分比。可以指定负值，让裁剪区域超出为元素指定的边框尺寸。也可以为任何4个值使用auto关键字来指定裁剪区域的边缘就是元素边框的对应边缘。例如，用style属性指定只显示元素最左边的100像素：
    style=”clip：rect(auto 100px auto auto“);

注意，值之间没有逗号，裁剪区域从上边缘开始顺时针设置。将clip设置为auto来停用裁剪功能。