html+css知识点回顾

W3C标准不是一个标准，而是一系列标准的集合，包含三部分的标准：结构标准、表现标准和动作标准。与结构标准对应的代表语言是xHTML，与表现标准对应的代表语言是CSS，与动作标准对应的代表语言是JavaScript。

当我们将一个成品的网页设计制作成一个静态页面的时候，就要符合前面两种标准，结构标准和表现标准，那么制作出来的页面就是标准页面，用他们相对应的语言来描述这种制作标准页面的技术我们就称之为“xHTML+CSS”！

我们常说的“DIV+CSS”其实是一种不准确的叫法，是国人给这种布局标准页面的方法起的名字，是对技术理解不够透彻导致的，而标准的叫法是什么呢？呵呵，没错，是xHTML+CSS！

css回顾：

四种样式的优先级按照“就近原则”：行内样式 > 内嵌样式 > 链接样式 > 导入样式。

CSS选择器最基本的有四种：标签选择器、ID选择器、类选择器、通用选择器。

ID选择器:<p id=”one”> #one{….}
类选择器: class=”one” .one{….}
标签选择器:p{….}
通用选择器:*{margin:0; padding:0;}

通用选择器慎用：
以上面代码为例，HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，用到哪些标签就定义哪些标签 如：
body,div,p,a,ul,li{margin:0; padding:0;}

css hack：
!important
用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。
height:960px !important;height:900px;
IE7/IE8/IE9/FireFox 执行960px(绝对优先级)；;IE6对!important无视会执行900px。
*(星号)
IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况
height:960px;*height:900px;
IE8/IE9/FireFox不能识别附加有*的CSS属性语句,IE6/IE7可以识别附加有*的CSS属性语句.

首行文字缩进”text-indent:2em;”属性，只能加在块状元素上面，内联元素是不起作用的。

页面布局有两种方式：
1）浮动Float
IE6双倍边距BUG，满足下面3个条件才会出现这个BUG:
1）要为块状元素；
2）要左侧浮动；
3）要有左外边距(margin-left)；
解决这个BUG很容易，只需要在相应的块状元素的CSS属性中加入“display:inline;”
2）定位Position
absolute（绝对定位）和 relative（相对定位）
absolute绝对定位：
（父级要设定Position属性）以父级左上角为原点进行定位，父级的padding对其根本没有影响。
position:relative相对定位
默认参照父级的原始点为原始点（不论父级有没有设置Position），当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

html 回顾：
盒子模型，是XHTML+CSS布局页面中的核心！盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)。
HTML标签分成两种，块状元素和内联元素
块状元素
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。
内联元素
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。（内联元素加上一个属性display:block，高宽设置才会起作用）

常见的块状元素与内联元素:http://www.w3cfuns.com/portal.php?mod=topic&quickforward=1&topicid=21

页面模块的常用命名：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
小技巧：tips