CSS层叠样式表
优势：使页面结构和表现分离1.引入方式： 1）行内样式：Hello World
2）内部样式： 3）外部样式： 推荐 问题：link和@import的区别： Link和@import的区别： 1.隶属上的差别 link是一个html的一个标签，而@import是css的一个标签 2. @import次数限制 听说在IE下只能导入61个CSS样式文件 3.加载顺序的不同 当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载， 而@import引用的CSS 会等到页面全部被下载完再被加载。 4.兼容性上的差别 由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题 5.使用DOM控制样式时的差别 当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。 优先级问题：行内样式 > 内部样式 > 外部样式 就近原则
2.CSS选择器
1）语法格式：选择器{属性：属性值；} 举例：h2{color：#0F0;} 2) 常见选择器标记选择器 h2{ } 类选择器 .a { }
// 不能是数字 ID选择器 #a{ } // ID要唯一 交集选择器 h1,h2{ } 并集选择器(父类选择器) p a{ } 伪类选择器 锚连接 LoVe Hate CSS2 - :first-child 伪类 p:first-child { font-weight: bold; } 通用选择器 *{ }
注意：
一个HTML元素只能有一个ID选择器，但是可以有多个类选择器。
? 错误
? .a{ } .b{ } .c{ } 正确 3. 盒子模型（边距）
border,margin,padding.
boder：表盒子的边框。
margin：表盒子与外界的距离
立即学习“前端免费学习笔记（深入）”；
padding：表盒子边界与盒子内内容的距离。
border:1px 表示上下左右边框都为1px
boder:1px 2px 表示上下边框为1px,左右边框为2px
border:1px 2px 3px 4px 表示边框的顺序为上，右，下，左。
单独设置边框：底部边框：border-bottom: 2px solid #cccccc;
头部边框： border-top: 2px solid #cccccc;
margin,padding跟border类似。
IE6/IE7/firefox最终宽度=左外边距+左边框宽+左内边距+宽度+右内边距+右边框宽+右外边距。
4.CSS浮动
浮动概念：
在使用div布局的时候，发现每个div都是按照块的方式出来的，不利于页面的布局，所以CSS就提出元素的浮动技术，可以使得块元素在浮动的情况下在同一行中出现。
特点
元素在浮动的时候遇到父容器的边框就会卡住
如果子元素和父元素同时向相反的方向浮动，那么先浮动父元素，然后子元素在父亲元素的内部浮动
如果父元素没有浮动而且包含了浮动的子元素，那么浮动的元素就会脱离文档流(重点)
1：网页布局方式：浮动式布局，定位布局。都脱离文档流(上下关系)的控制。
2：浮动清理：clear
3：何时选用浮动定位
注意：当网站有较强的分辨率及内容大小的适应能力时，需要浮动。距中布局，横向宽度可百分比缩放，需要借助margin,padding,border等属性。
层设置浮动后，该层会脱离文档流，后面的层会流进该层里面，但是文字不会流进该层。它没完全脱离文档流
绝对定位会使该层完全脱离文档流，置其他对象之上，这个时候的层具有z-index属性。z-index属性的值越大，这个层越显示在上层。postion有常用的2个值: absolute和 relative,前者表示绝对定位，不占空间。后者表示相对定位，会占用空间。默认不设置为static
z-index
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对z-index 属性普遍的认识.
