精通CSS-笔记1基础
第一部分.基础知识
Chapter1
本书中的所有示例代码都可以通过以下网址来访问：www .cssmastery .com / www .friendsofed .com。
命名类与Id：完全使用小写，使用-连字符。
微格式：是一组开发人员开发的一套关于命名约定和标记模式，它可以用于标记人物、地点或日期等。简而言之是一套命名规则。
DOCTYPE当前有两种风格：严格(strict)和过渡(transitional)。过渡允许使用已经废弃的元素，而严格不允许。
浏览器模式：标准模式和混杂模式(quirks mode)。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。Mozzilla与Safari还有第三种模式：“几乎标准的模式”，只在处理表格的方式上有一些细微的差异之处。
DOCTYPE不存在或形式不正确都会导致HTML和XHTML文档以混杂模式呈现。
Chapter2．Css选择器
2.1常用选择器：
类型选择器(如p、h1)、后代选择器(如blockquote p)、ID选择器(#id)、类选择器(.class)。
将一个类或ID用于它们的祖先，然后使用后代选择器定位它们。
伪类：:link和:visited称为链接伪类，只能应用于锚元素。:hover、:active和:focus称为动态伪类，理论上可以应用于任何元素。IE7忽略:active和:focus。
通过把伪类连接在一起，可以创建更复杂的行为，如在已经访问链接和未访问链接上实现不同的鼠标悬停效果，a:visited:hover、a:link:hover。
2.2通用选择器：*
2.3高级选择器//IE6-不支持
如果浏览器不理解某个选择器，就会忽略整条style。但在对于站点功能或布局很重要的元素上，都应该避免使用这些高级选择器。
子选择器和相邻同胞选择器：
子选择器只选择元素的直接后代，如#nav>li。IE7+支持，但IE7中有一bug，如果在父元素和子元素之间有HTML注释，就会出问题。在IE6-中，可以通过#nav li{}去设置所有li的样式，再通过#nav li *{}去覆盖这种样式。
相邻同胞选择器：用于定位同一父元素下某个元素之后的元素，如h2+p。如果在目标元素之间有注释，IE7也会有bug。
属性选择器：
可以根据某个属性是否存在或属性的值来寻找元素。
根据某个元素是否具有某个属性来选择，如：选择acronym具有title属性的元素可以写成acronym[title]{}，acronym[title]:hover, acronym[title]:focus{}。
根据该元素的某个属性值来确定：a [ rel =“nofollow”]。IE7+支持。也可以这样使用[ rel = ”nofollow” ]和这样使用[title]。
假如属性有多个值，属性选择器允许根据属性值之一寻找元素：a[rel~=”co–worker”]。
伪元素选择器：
如p:first-letter{}，向p元素的第一个字母添加特殊样式；
如p:first-line{}，向p元素的首行添加特殊样式；
如p:before{content:url(logo.gif);}，在p元素之前添加内容；
如p:after{content:url(logo.gif);}，在p元素之后添加内容；
层叠和特殊性：
层叠：寻找到同一元素的方法可以有多种，CSS通过一个称为层叠的过程处理这种冲突。层叠给每个规则分配一个重要度。大维度上的重要度：标有!important的用户样式>标有!important的作者样式>站点开发者编写的样式（作者样式）>浏览器用户自定义（用户样式）>浏览器样式表。
小维度上的重要度：根据选择器的特殊性决定规则的次序。特殊性：特殊选择器>一般选择器。若两个规则的特殊性相同，那么后定义的规则优先。
站点开发者编写的样式（作者样式）中，行内样式优先级>其他。ID选择器>类、伪类和属性选择器>类型选择器和伪元素选择器（相邻同胞选择器、子选择器不作为优先级考虑对象）。
继承：
应用样式的元素的后代会继承样式的某些属性，比如颜色和字号。IE和Netscapes在继承表格字号存在bug。
直接应用于元素的任何样式（包括浏览器默认样式）总会覆盖继承而来的样式（因为继承而来的样式的特殊性为空）。
2.4规划、组织和维护样式表（管理代码的方法）
推荐使用单一CSS外联样式表。但建议在这一样式表内进行分割代码。以/*开头，以*/结果，进行注释。
设计代码的结构：
最前面一般的规则/*group general styles-----*/：主体样式、全局reset、链接、标题、其他元素等。
辅助样式/*group helper styles-----*/：表单、通知和错误、一致的条目。
页面结构/*group page structure-----*/：标题、页脚和导航；布局；其他页面结构元素。
页面组件/*group page components-----*/：各个页面。
最后覆盖/*group overrides -----*/：这里使用一种风格统一的大注释块分隔每个部分。
使用注释的自我提醒：@colordef/@todo/@bugfix/@workaround，例：/* @todo: just write some words to remember something */。
Chapter3 浮动、定位和盒模型
3.1盒模型概述
*{margin:0;padding:0;}不要这样设置。
IE6-的盒模型与W3C标准中的盒模型不同，回避这个问题的方法：不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素或子元素。
外边距叠加（普通文档流中块框的垂直外边距）：当两个或更多垂直外边距相遇时，它们将形成一个外边距，且等于两个发生叠加的外边距的高度中的较大者。两个元素位置可以是上下排列，也可以是一个元素包围另外一个元素。也可是同一个元素：空元素且有外边距无边框无内边距，在这种情况下，顶外边距与底外边距就碰到了一起，发生叠加；即使发生这种情况，在遇到另一个元素时，还会叠加。
3.2定位概述(position)
Display:none不占用文档中的空间且不显示。
CSS中的3种定位机制：普通流、浮动和绝对定位。
块级框(display:block)：外边距叠加，从上到下垂直排列。
行内元素（行内框display:inline）特点，可以设置水平方向上的内外边距、边框，但不能设置宽度。垂直方向上的设置无任何显示。由一行形成的水平框称为行框，行框的高度足以容纳所有行内框，也可以对行框设置行高。行内框可修改的尺寸：行高、水平边框、水平内外边距。
Display:inline-block元素：能够设置宽度、高度、垂直与水平外边距和垂直与水平内边距、且水平排列。IE8+支持。
匿名块框：将一些文本添加到一个块级元素的开关时，会被当作块级元素对待。无法直接对其进行应用样式。但也可以使用:first-line伪元素选择器。
相对定位position:relative：相对自身位置变动，但原来空间仍然存在（并且仍然会外边距叠加），会覆盖其他框，left/top/right/bottom，默认z-index为0；
绝对定位position:absolute：脱离普通文档流。位置设置相对于离它最近的已定位的祖先元素。如无，则相对画布或HTML元素（初始包含块）。IE6-存在一个bug。
固定定位position:fixed：绝对定位的一种，脱离普通文档流，相对于视口(viewport)。IE6-不支持，IE7部分支持。
普通文档流position:static。
浮动float:left/right：脱离普通文档流，左右流动到外边缘碰到包含框或另一个浮动框的边缘。浮动元素后面的框会表现得像浮动不存在，但框内容会受到浮动元素的影响，妤选框被缩短，给浮动元素留出空间。
清除浮动clear:left/right/both/none：在清理元素时，浏览器在元素顶上添加足够的外边距，直到下降到浮动框下面。
利用溢出overflow:hidden/auto/visible（默认）/scroll：hidden/auto属性值有一个副作用，会自动清理包含的任何浮动元素。
利用伪类:after以及content”.”;height:0;visibility:hidden;display:block;clear:both;进行清理。IE6-不支持。
利用JS。
