CSS权威指南第三版（8-10章）

Menu

• 第八章 内边距、边框和外边距
  • 宽度和高度
  • 外边距 内边距 边框
  • 背景图像
  • background
• 第九章 颜色和背景
• 第十章 浮动和定位
  • 浮动规则
  • 浮动元素负margin会超出其父元素内边界方法
  • 浮动元素与父元素内元素重叠时的规则
  • clear 图像的左侧和右侧均不允许出现浮动元素
  • 包含块
  • 偏移属性 top left right bottom
  • max-width、max-height、min-width、min-height
  • overflow 内容溢出
  • clip 绝对定位元素的剪裁
  • visibility 能见度
• position 定位
  • 包含块
  • 定位规则
  • 定位元素居中
  • 固定定位-fixed
  • 相对定位-relative
  • 绝对定位 - position
  • z-index 堆叠顺序

---

宽度和高度

• width和height对行内非替换元素不起作用，如span、em；

外边距 内边距 边框

• 如果外边距的值是%，那么是根据父元素的width来计算值；
• 如果父元素的width发生改变，子元素的值也会跟着发生变化；
• 如果父元素没有设置width，那%会根据页面的大小来计算值；
• 如果margin和width都设了值，那么最后个margin强制变成auto，会接收剩余的宽度；

第九章 颜色和背景

• 如果本元素没有设置color属性，边框的颜色是继承父元素的文本（color属性）颜色；
• 边框粗细保留关键字对应值：thin 2、medium 3、thick 5；

• 行内元素的border上下边框不影响行高，会覆盖上下相邻行的文本。但是左右相邻的字不会覆盖，文本会显示在边框前后；

  
  
  行内元素边框

背景图像

• background-repeat 背景图像重复方式：

  • repeat-x 横向重复
  • repeat-y 纵向重复
  • no-repeat 不重复

• background-position

  • 第一个值是水平位置，第二个值是垂直位置。
  • 左上角是 0% 0%。右下角是 100% 100%。
  • 如果您仅规定了一个值，另一个值将是 50%。
  • 如果移动10% 20%，需要根据元素width和height减去自身的width和height来计算移动距离，比如width和height都是600px，图形是200x200px，移动10% 20%，就是向右（600-200）10%=40，向下（600-200）20%=80；
    
    background-position

• background-attachment

  • 属性设置背景图像是否固定或者随着页面的其余部分滚动；
  • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
  • fixed 当页面的其余部分滚动时，背景图像不会移动。fixed是根据可视区域大小确定位置的。不是元素大小；

• background

  • tag {background: gray url(glassy-gray.jpg) 0 0 no-repeat fixed;}
  • tag {background: 背景颜色 背景图片 position repeat方式 故不固定;}
  • 可以缺省参数，那么缺省的参数将以缺省参数的默认值填充，默认填充的属性会覆盖继承的值；

第十章 浮动和定位

• 如果要浮动一个非替换元素，那么必须为非替换元素加width属性，否则该元素的width将为0；

• 浮动元素的包含块是其最近的块级祖先元素，浮动元素本身也会生成一个块级框，他会像块级元素一样展示和表现。

• 浮动规则

  • 浮动元素的外边界不能超过父元素的内边界

    
    
    浮动元素的外边界不能超过父元素的内边界

  • 如果左边已经有一个浮动元素框，又有一个浮动框向左浮动，也没超过上一个浮动框的下外边界，那么右浮动框会贴住左浮动框；

    
    
    多框浮动规则

  • 如果一个行框内有一个浮动图像，这个浮动图像的最高点不能超过该行框最高点；
    浮动图像的最高点不能超过该行框最高点；

  • 如果一个行框里有多个浮动元素，如果此行框剩余的宽度不足以容纳后面的浮动元素框的宽度，那么就需要灵起一行。

  • 如果浮动元素框的宽度超过了父元素的内边界，那么就会超出去；

  • 父元素也可以设为浮动元素；

  • 浮动元素不会挡住文本；

• 浮动元素负margin会超出其父元素内边界方法：

  1. 设置浮动元素的margin为负数；
  2. 浮动元素的width比父元素的width宽。height同理；

• 浮动元素与父元素内元素重叠时的规则

  1. 行内元素框与一个浮动元素重叠时，行内元素的边框、背景和内容都在该浮动元素之上显示；

  2. 块级元素框与一个浮动元素重叠时，块级元素的边框背景在该浮动元素之下显示，而内容在浮动元素之上显示；

     
     
     浮动元素与父元素内元素重叠时的规则

• clear 图像的左侧和右侧均不允许出现浮动元素：

  • 块级元素设置clear后，块级元素的上边界会贴住浮动元素的下边界，有两种方法可以把他们分开：
    1. 设置块级元素的margin，但是需要算块级元素下移了多少，然后加上要分开的距离。才能分开。
    2. 设置浮动元素的margin，直接设置要分开的距离即可。

• 定位-position

  • 定位的类型：
    • static: 位置不变，会生成元素框。
    • relative：元素相对于原位置偏移，形状不变， 原来的空间仍保留。
    • absolute：相对于包含块定位；原来的空间被删除， 不管定位前是什么类型的框， 定位后都会生成块级框；其包含块必须是最近的一个position值除了static之外的其它值的祖先元素；
    • fixed：相对视窗定位；其它同上；

• 偏移属性 top left right bottom：
  • 在同时设置了4个边的情况下，top 和 left 的权重高，会忽略right和bottom；
  • 如果不确定祖先元素的width和height，那可以用定位来设置该元素的大小，同时定位元素不能有width和height属性；

span {position: absolute; top:0; right:50%; bottom:0; left:0; }

定位来设置该元素的大小

……神奇的分割线
- 偏移值可以设置为负值，那就会向反方向偏移；
- 如果值是auto，那么就是其原来的位置；

• max-width、max-height、min-width、min-height

  • max-width 定义元素的最大宽度：该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。
  • max-height 属性设置元素的最大高度：该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值。
  • min-width 属性设置元素的最小宽度：该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。
  • min-height 属性设置元素的最小高度：该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。

• overflow 内容溢出

  • overflow 属性规定当内容溢出元素框时发生的事情。
  • 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
  • visible 默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    inherit 规定应该从父元素继承 overflow 属性的值。

• clip 绝对定位元素的剪裁

  • clip 属性剪裁绝对定位元素。
  • 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

absolute_tag {clip: rect(0px, 100px, 100px, 0px);}

• visibility 能见度
  • visibility 属性规定元素是否可见。提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
  • visible 默认值。元素是可见的。
  • hidden 元素是不可见的。
  • collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

- position 定位

• 包含块：

  • 根元素的包含块是html或body（浏览器决定）；
  • 非根元素position值是“static” or “relative”，他的包含块是由最近的祖先元素的内容边界构成；
  • 非根元素position值是“absolute”，他的包含块就是由最近的祖先元素的position值非“static”的内容边界组成；
  1. 如果这个祖先元素的块级元素，包含块为该祖先元素的内边距边界（边框）组成；
  2. 如果这个祖先元素的行内元素，内容边界组成；
  3. 如果没有祖先，则为初始包含块（html）；

• 定位规则
  static：没有定位，元素出现在正常的流中， 会生成元素框。
  relative：元素相对于原位置偏移，形状不变， 原来的空间仍保留。
  absolute：相对于包含块定位；原来的空间被删除， 不管定位前是什么类型的框， 定位后都会生成块级框；其包含块必须是最近的一个position值除了static之外的其它值的祖先元素；
  fixed：相对视窗定位；其它同上；

• 定位元素居中
  定位元素， 如果left和right数值相同， 当margin为auto， 就会水平居中。(元素左右定位好， 剩下的宽度可以设置margin)

• 固定定位-fixed（IE7之前都不支持）

  • 固定定位的包含块是视窗，元素会完全从文档流删除。
  • 可以用fixed创建帧式界面
  • 可以用fixed在屏幕上放置一个“永久性”元素， 如一个小的链接列表， 或页脚。

• 相对定位-relative

  • 相对定位元素偏移后原来所占空间不会消失。

• 绝对定位-absolute

  • 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

  • 绝对定位的元素的位置相对于最近的已设置定位属性不为“static”的祖先元素，如果祖先元素没有position属性不为static的，那么它的位置相对于最初的包含块（html）。

    
    
    绝对定位-absolute

• z-index 堆叠顺序
  • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  • 元素可拥有负的 z-index 属性值。
  • Z-index 仅能在定位元素上奏效。
  • 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。