CSS 学习笔记（1）

一、 目的和应用
　　1. 解决内容与表现分离的问题
　　2. Cascading Style Sheets（层叠样式表），意思是多个样式可以层叠唯一
　　3. 层叠优先级
　　　　a. 浏览器缺省设置
　　　　b. 外部样式表 （）
　　　　c. 内部样式表（定义在中）
　　　　d. 内联样式 （HTML元素内部，style属性中）
　　　　e. 同一级别的层叠，后定义的覆盖前边定义的
　　4. 选择器
　　　　a. HTML 标签, div{ } , body{ }
　　　　b. HTML 元素id, #ctrl{ }
　　　　c. HTML 元素class, .ctrl{ }
　　　　d. 组合选择器
　　　　　　　1. 派生选择器, div span{ } ; #ctrl span{ } ; .ctrl span{ }
　　　　e. 其他选择器基本没有用过，不再罗列

二、 CSS Box 模型
　　1. Margin - border外， 不受 background 影响
　　2. Border - padding外，不受 background 影响
　　3. Padding - content外， 受 background 影响
　　4. Element - Text,Image 显示的地方，Width, Height 定义的对象
　　注：Margin，Border, Padding都是可选的，默认值为0, 不是Width和Height的一部分，是总Size的一部分。

三、 Float and Position
　　a. Position
　　　　1. static
　　　　　　元素框自动生成。块级元素生成矩形框，是文档流的一部分；行内元素会创建一个或多个行框，置于父元素中。
　　　　2. relative
　　　　　　元素偏离它本来应该在文档流中的位置，而它原本应该占的空间在文档流中依然保留并影响着其他元素的放置。

　　　　3. absolute
　　　　　　a. 元素框从文档流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是此时包含块。元素在正常文档流中所占的空间会关闭,
　　　　　 　 就好像元素原来不存在。
　　　　　　b. 元素定位后生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。

　　　　4. fixed
　　　　　　元素框的表现类似于将position设置为absolute， 不过其包含块是视窗（window）本身
　　　　注： 包含块，元素可以定位到包含块的外面，这也表明了，”包含块“ 其实是 “定位上下文”
　　　　　　　a. “根元素”（html or body）的包含块（初始包含块）由用户代理建立。 大多数浏览器中，初始包含块是个视窗大小的矩形
　　　　　　　b. 非根元素， 若其position是 relative 或 static, 包含块设置为最近的块级框、表单元格或者行内块祖先框的内容边界构成
　　　　　　　c. 非根元素， 若其position是 absolute, 包含块设置为最近的position不是static的祖先元素(可以是任何类型)， 过程如下：
　　　　　　　　　　　---如果这个祖先是块级元素，包含块设置为该元素的内边距边界（里面包含了padding和content）

　　　　　　　　　　　---如果这个祖先是行内元素，包含块设置为该祖先元素的内容边界
　　　　　　　　　　　---如果没有祖先，元素的包含块定义为初始包含块
　　b. Float
　　　　Value: left | right | none | inherit
　　　　浮动元素从文档的正常流中删除， 不过它还是会影响布局（eg. 一个元素浮动时，其他内容会“环绕”这个元素）
　　　　浮动元素的包含块是其最近的块级祖先元素，浮动元素本身会生成一个块级框，不管它本身是什么。其定位有下列规则：
　　　　　　1. 浮动元素的左（右）外边界不能超出其包含块的左（右）边界（除非太宽，本身都无法放下）
　　　　　　2. 浮动元素的左（右）外边界必须是源文档中之前出现过的左浮动（右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先浮动元素的下边
　　　　　　　 这个规则避免浮动元素彼此重叠
　　　　　　3. 左浮动元素的右外边界不会再起右边右浮动元素的左外边界的右边。反之，亦然！
　　　　　　4. 一个浮动元素的顶端不能比父元素的内顶端更高
　　　　　　...