小白的《CSS权威指南》笔记（下部分）

颜色和背景

颜色

color设置前景色。

前景色

color：<color> | inherit
通过给元素添加class值，然后再通过class选择器来改变它的颜色。

替换属性

HTML3.2的BODY属性：TEXT、LINK、ALINK和VLINK。
可以用color替换它们。

影响边框

color值还可以影响元素周围的边框。
边框颜色取自内容的颜色。
border-color的值会覆盖color的值，对于边框来说。

影响表单元素

可以为表单元素设置color值。
会不会同时改变边框的颜色取决于用户代理及其默认样式。

继承颜色

color属性可以继承。
由于先前版本的浏览器对table元素的color值有定义，浏览器的值会比继承的值更优先，所以如果在body设置的color不会作用到table元素。现代浏览器已经修复这个bug。

背景

元素的背景区包括前景之下直到边框外边界的所有空间。

背景色

background-color：

• <color>
• transparent（默认，透明）
• inherit

如果希望背景色从元素中的文本向外稍有延伸，只需增加一些内边距。
background-color不能继承。

历史问题

Navigator4对背景色的处理不会应用于整个内容框和内边距。
解决：外面加一个border，border颜色和背景色一致。

特殊效果

结合color和background-color。

背景图像

background-image：

• <uri>
• none
• inherit

body {background-image: url(bg23.gif);}

允许向任何元素应用背景图像。
理论上，可以向textareas和select列表等替换元素的背景应用图像。
background-image不能继承。

为什么背景不能继承

不雅观

关于背景的良好实践

在使用背景图像时最好同时设置背景色，达到一定效果。

有方向的重复

background-repeat：

• repeat（垂直和水平方向上都平铺）
• repeat-x（水平上平铺）
• repeat-y（垂直上平铺）
• no-repeat（不允许图像在任何方向上平铺）
• inherit

背景定位

background-position：决定原图像的位置（中心点）。

[[<percentage> | <length> | left | center | right ]
[<percentage> | <length> | top | center | bottom]?] ||
[[left | center | right] || [top | center | bottom]] |
inherit

例：

background-position:center center;

关键字

单个关键字		等价关键字
center			center center
top				top center
				center top
bottom			bottom center
				center bottom
right			center right
				right center
left			center left
				left center	

百分数

百分数值同时应用于元素和图像。
数值可以为负值（有意想不到的效果哦）。

长度值

从元素内边距区左上角的偏移（偏移点为左上角）。
数值可以为负值（有意想不到的效果哦）。

有方向的重复（深入）

通过结合使用background-position和background-repeat。

关联

background-attachment：可以使背景图片随文档滚动。

• scroll（默认值，随文档滚动）
• fixed（固定在窗口的位置，不随文档滚动）
• inherit

有意思的效果

实现背景的理想对齐：

body {
	background-image: url(grid1.gif);
	background-repeat: repeat;
	background-attachment: fixed;
}
h1 {
	background-image: url(grid2.gif);
	background-repeat: repeat;
	background-attachment: fixed;
}

复螺旋变形：
http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html

汇总

background：

[<background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>] | inherit

限制：如果background-position有两个值，它们必须一起出现，而且如果这两个值是长度或百分数值，则必须按水平值在前垂直值在后的顺序。

浮动和定位

定位的基本思想：允许定义元素框相对于正常位置、或父元素、或另一个元素、或浏览器窗口本身应该出现在哪里。
浮动：脱离正常流布局。

浮动

float：所有元素都可以浮动。

• left
• right
• none
• inherit

最先作用：文字环绕图片。

浮动元素

一个元素浮动时，其他内容会“环绕”该元素。
浮动元素的外边距不会合并。
如果确定要浮动一个非替换元素，则必须为该元素声明一个width。

不浮动

float：none；
用于防止元素浮动。

浮动的详细内幕

包含块（containning block）
浮动元素的包含块是其最近的块级祖先元素。
浮动元素会生成一个块级框，而不论这个元素本身是什么。

浮动的一些规则：

• 浮动元素的左（或右）外边界不能超过其包含块的左（或右）内边界。
• 浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
• 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
• 一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
• 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
• 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
• 左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右边（左边）。
• 浮动元素必须尽可能高地放置。
• 左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。位置越高，就会向右或向左浮动得越远。

实用行为

这些效果产生原因有两方面：
1.规则中指出了一些要求。
2.规则中有些方面没有谈到。
比如：
浮动元素比父元素高时，浮动元素会超出其父元素的底端。
浮动元素会延伸，从而包含其所有后代浮动元素。

负外边距

负外边距可能导致浮动元素移到其父元素的外面。

浮动元素、内容和重叠

对于一个浮动元素于正常流中的内容发生重叠的处理方式：

• 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示。
• 块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。

清除

clear：

• left
• right
• both
• none
• inherit

CSS2.1引入一个清除区域（clearance）：
清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内。

定位

position：

• static（初始值，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。）
• relative（元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。）
• absolute（元素框从文档流完全删除，并相对于其包含块定位。）
• fixed（元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。）
• inherit

包含块

• ”根元素“的包含块（也称为初始包含块）由用户代理建立。（html或body）
• 对于一个非根元素，如果其position值是relative或static，包含块则是由最近的块级框、表单元格或行内块祖先框的内容边界构成。
• 对于一个非根元素，如果其position值是absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何类型）。

偏移属性

top、right、bottom、left：

• <length>
• <percentage>
• auto
• inherit

正值向内偏移，负值向外偏移。
偏移定位元素的外边距边界时，带来的影响是元素的所有一切（包括外边距、边框、内边距和内容）都会在定位的过程中移动。

宽度和高度

不显式设置width和height：

top: 0; bottom: 0; left: 0; right:50%;

限制宽度和高度

min-width、m