1.
那为什么还有那么宽的白边呢？这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时，body，h1－h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉，这时再预览一下，白边就没了。 body { margin: 0px; } 2.
这里的选择器类型是新手朋友最容易迷糊的地方，类：是指定义一个class，可以多个对象引用；标签：指对默认的html标签进行重新定义，如可以定义body{margin:0}，意思是 将body的外边距设置为0，h2{color:#f00}是将所有h2标签的文字颜色设置为红色；高级它把ID和伪类放到一块了，是一个设置不合理的地方，在cs4版本中已经分开了。ID是以#开始，id只能作用于一个对象，不能作用于多个对象，优先级高于class，这是id和class的区别。 3.
同样和固定宽度居中一样，我们只需要设置div的外边距为auto即可实现居中了。
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; } 4.
一列二至多块布局
一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们可以用三个div块来划分，分别给它们起名为：头部（header）、主体（maincontent）、询问（footer）。
采用固定宽度居中的方式，代码如下： body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;} #main { margin:5px auto; width:500px; height:400px; background:#9FF;} #footer { margin:5px auto; width:500px; height:80px; background:#9f9;} 5.
为什么两个相邻的容器中间的间距不是10px，而是5px呢？按照我们正常的理解，认为应该是两个值相加，其实这里是两个合并后取最大值。用css手册中的话说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心（有关块级元素和行内元素的概念在下一节讲到）。 6.
何为块级元素，何为行级元素呢？
这里还有内联元素。（又叫做内嵌元素、行内元素、直进式元素）
（inline element）内联元素 一般都是基于语义级（semantic）的基本元素。内联元素只能容纳文本或者其他内联元素。
（block element）块级元素和 inline element都是赫塔缪勒规范中的概念。Block element 会顺序以每次另起一行的方式一直往下排。也就是说block element 是换行的，但是当inline element有了这样的属性：display ： block ； 那么 就会和block element 没有什么区别了（inline element 也是必须换行了。） Display： inline ；这个属性能够修复著名的IE双倍浮动边界 问题。
Block element
ddress - 地址
* blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签 * dl - 定义列表
* fieldset - form控制组 * form - 交互表单 * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题
* h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 * isindex - input prompt * menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） * ol - 排序表单 * p - 段落
* pre - 格式化文本 * table - 表格 * ul - 非排序列表
Inline element
* a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override
* big - 大字体 * br - 换行 * cite - 引用
* code - 计算机代码(在引用源码的时候需要) * dfn - 定义字段 * em - 强调
* font - 字体设定(不推荐) * i - 斜体 * img - 图片 * input - 输入框 * kbd - 定义键盘文本 * label - 表格标签 * q - 短引用 * s - 中划线(不推荐)
* samp - 定义范例计算机代码 * select - 项目选择 * small - 小字体文本
* span - 常用内联容器，定义文本内区块 * strike - 中划线 * strong - 粗体强调 * sub - 下标 * sup - 上标
* textarea - 多行文本输入框 * tt - 电传文本 * u - 下划线 * var - 定义变量
可变元素
* applet - java applet * button - 按钮 * del - 删除文本 * iframe - inline frame * ins - 插入的文本 * map - 图片区块(map) * object - object对象 * script - 客户端脚本
7.
Css语法 及格式
#layout{ color:#fff; border:1px; solid:#ccc; }
红色 代表 CSS选择器，蓝色 代表属性，绿色 代表 值；
如图所示，CSS语法由如下三部分构成，选择器：可以是ID、CLASS或标签；属性和值是用来定义这个物件的某一个特性。如一张桌子的长120cm，宽60cm，套用css的格式为，桌子{长:120cm;宽:60cm;}，这样是不是容易理解。 8.
Div 是 ‘#’, class 是 ‘.’；
Div的优先级高于class；比如说今天三班的学生上体育课，小明留下来打扫卫生。那么三班的学生上体育课这是一个类，而小明打扫卫生这是个id，虽然小明也是三班的学生，但id高于class，所以小明执行打扫卫生的任务。 9.
两列自适应宽度布局：
有一列要自己浮动，另一列的margin 要和浮动的宽度相同。 如：
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 300px; margin-left: 120px; }
给他们添加父级div
#content { width:470px; margin:0 auto;}(居中) Content width = side.width + main.width; 10.
Float 浮动；
CSS中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明宽度，否则它会尽可能的窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。(所谓尽可能的窄是 紧紧的内贴 ) 11.
三列自适应宽度：一般常用结构式左列和右列固定，中间列根据浏览器自适应。 而在写入div标签的时候要注意顺序：先写左列 float-left，且固定宽度，在写右列float-right，要固定宽度;最后再写中间列。
三列固定宽度：在自适应宽度的基础上增加父级div ，必须固定宽度。 12.
list-style-type;(针对列表之类的 list 嘛) 默认是实心圆：disc；
常用的是 list-style-type:none;不使用项目符号； 13.
text-decoration ;（检索或设置对象中文本的装饰） ：：：
none : 默认值。无装饰 blink : 闪烁 underline : 下划线 line-through : 贯穿线 overline : 上划线
检索或设置对象中的文本的装饰。有 href 特性的 a ，以及 u ， ins 对象默认值为 underline 。对象 strike ， s ， del ，默认值是 line-through 。 假如 none 值在属性声明的最后，所有的先前的其他取值都会被清除。例如，声明 text-decoration: underline overline blink none 等于声明 text-decoration: none 。
假如对象没有文本(如 img 元素)或者是空元素(如：)， 此属性不会发生作用。
假如你设置 body 对象的此属性值为 none ， a 对象将依然保持其原有的下划线样式。除非你针对 a 对象声明此属性值。
指定块对象的此属性将影响其所有内联子对象。而此影响一旦发生，块对象容器最终会受到影响。在IE4+中可用的值为 overline 和 blink 。虽然 blink 值被提供，但它不会被作用。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 textDecoration； 14.
标签的默认样式：
大多数标签都有自己的默认样式，比如第二天课程中遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认
为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; } ul { list-style: none; }
img { border-style: none; } 15.
css派生选择器
派生选择器可以帮助你节约大量的class定义。
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }
#menu ul和#menu ul li即为派生选择器，如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。 16.
css选择器的分组
被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
17.讲解块级元素和内联元素时提到display，今天用到了display:block;和display:none;值为none时表示将这个元素隐藏，为block时表示将它的隐藏状态改为显示状态详细介绍请参考css手册。 18. Position，
相对定位（relative）和绝对定位（absolute）；
1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素\"相对于\"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）
3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角。
4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。
