-
盒子模型：一个盒子有以下几部分构成：
内容 content
边框 border
内边距 padding
外边距 margin
-
关于盒子：
- 内容属性：内容本身的宽=width，内容本身的高=height
- 盒子实际宽度=ML + BL + PL + width + PR + BR + MR
盒子实际高度=MT + BT + PT + height+ PB + BB + MB
（备注：第二个 L为left,R为right,T为top,B为bottom）
-
使用外边距margin的时候，要注意浏览器的兼容性
-
除了值为0的情况下，其他所有的非零的值，都要加单位，一般是px
-
由于不同的浏览器存在着内外边距的默认值，并且存在差异，所以需要对此清零。如下（用到哪些写哪些）：[实例演示不同浏览器下margin 和ul li]
-
关于列表ul，常用的 list-style:none
-
关于边框：border:1px solid/dashed/… 颜色
-
常用的一大块DIV水平绝对居中：margin:0 auto; /*上下为0，左右auto */
这个会同时设置一个宽度值：如下代码：
关于CSS的继承：
子元素会继承父元素的某些样式。注意手册标注了哪些可以继承哪些不可以。
子元素如果定义了与父元素相同的样式，会覆盖父元素的样式。
【注意】并不是所有的属性都有继承，看手册标注有是否可以继承
【浮动】
-
CSS的布局方式（3种）：
- 默认文档流方式：以默认的HTML元素的结构顺序显示
- 浮动布局方式：通过设置HTML元素的float属性显示
- 定位布局方式：通过设置HTML元素的position属性显示
-
浮动原理分析：对象浮动后，它就脱离了当前的文档流，可以理解为飘起来了，它原来的位置就会空出来，它之后的对象就会占用它原来的地方。举例：三维空间、排队、
-
浮动的主要作用：使块元素（<p>,<div>,<h1>..<h6>,<ul><li>,<table>）可以在一行中显示。
比较常用的网站中的导航菜单，一般使用ul与li，然后给li设置浮动。附加：ul，常用的 list-style:none ，取消前面的小圆点。
-
当子元素的高度超过了父元素的高度，在IE6中，会把父元素的高度自动增加, float01A.png/ float01B.png。（实例测试）
清除浮动：去掉前面浮动的对象对后面的影响。（如果前面有浮动，后面的就会跟上来，常见的网页博客的布局，给丹丹演示）查看：为什么清除浮动.png
一般最常用的：clear:both;
这个时候如果浏览器缩小，就会出问题。所以，左右部分要被一个父div包起来。代码见：清除浮动clear.png
深入布局技巧：CSS中溢出的使用。
如果overflow:hidden，则会隐藏超过对象尺寸的内容。
定位布局：通过元素的position属性控制元素的位置。
绝对定位案例解说：下面左图变成右图：（绝对定位演示.png）
-
绝对定位深度解析：当我们想要使用绝对定位时，必须要有两个条件：
- 必须给父元素添加定位属性，一般采用 position:relative
- 给子元素添加绝对定位 position:absolute，同时设置方向属性
- 详细参见 绝对定位深度解析.png
- 绝对定位与相对定位的关键区别：
- 绝对定位：是以父元素为基准点进行定位，并且会脱离文档流（相当于飘起来到三维空间）；
- 相对定位：是以自身为基准点进行定位，会离开原位置，但还占着原来的地方。
- 请看：绝对定位与相对定位的区别.png
-
补充知识：zoom
上面的案例将会按照0.5倍尺寸显示（仅在IE下有效！），测试后，Google 浏览器也可以
清除浮动之IE下zoom的效果演示.png/html
【说明】当子元素有浮动，必须给父元素添加宽高，才会使父元素有效。
如果不想添加宽高，就给父元素设置 overflow:hidden
备注：为了解决IE6下不兼容的问题，需要加上 zoom:1
关于伪对象after 和 before ，标签:before/after{content:”内容”} [查阅手册]
-
display:none 和 visibility:hidden 的重要区别：
-
display:none; 使用该项后，该对象隐藏，同时不占用原来的空间
-
visibility:hidden; 用该项后，该对象隐藏但是依然占用原来的空间
-
z-idex 一般只有两个值：1和-1,给元素设置z-index:1就会使元素优先显示在上面，z-index:-1 会使元素跑到下边去。
注意：设置z-index的同时，必须设置position:absolute
-
清除浮动的方法：案例：父div背景色不显示（备注：在IE6/7 下 显示正常！）
- 额外标签法：
-
当父元素没有指定高度时，并且它的子元素有浮动，此时这个父元素的高度不会自动增加。举例：#main没有设定高度， 里面包了#left 和 #right，当前left和right都浮动以后，main的背景色是看不到的。（清除浮动之额外标签法.png），此时的解决方案就是上面图片所示。
-
父元素使用overflow:hidden，是最简单的清除浮动的方法。但是如果子元素使用了定位布局，则会出问题。关于overflow，请看
使用overflow:hidden 的方法解决上面背景色不显示的问题。（清除浮动之overflow-hidden方法.png）
关于出问题，参见：清除浮动之overflow-和定位同时存在的问题.html/png ， 引出伪对象after.
利用伪对象after方法（最流行的方法）清除浮动之overflow-和定位同时存在的问题 - 解决办法.html
补充（了解即可）：CSS中文字体对应的英文写法，因为有时候直接写中文字体会乱码：
