HTML+CSS编码的一些经验

　　同一个网站的不同页面，虽然HTML代码相同，但是可以通过CSS来取得不同的表现效果。如果这些页面用的是同一个CSS文件，怎样精确的定义相同内容的不同表现呢？通过给body标签赋予id以区别不同的页面，然后使用CSS后代选择器可以精确的选择目标。例如：首页的body赋予id="home", 内页的body赋予id="inner",如果选取首页文章标题的话，可以用：“#home #main h1”,而要选取内页中的标题的话就可以用：“#inner #main h1”。这样的话，同一个网站中不容的页面，HTML代码相同的也可以有同的表现效果了。

2.相对长度em与段落首行缩进两个汉字的空格：

　　相对长度单位em根据元素的不同而不同，相对，顾名思义，是根据其他事物的关系来度量。如果一个div中文字的大小为12px, 再设置其外边距为3em, 则这个外边距的值就是12*3=36px,如果将文字大小改为15px, 那么这个外边距的值就成了15*3=45px 了。

　　汉字书写都有首行空两格的习惯，相当于插入了两个汉字宽度的空格，如果用  显然无法达到令人满意的效果。这时候我们就可以用CSS来实现两个汉字的缩进，如果文字的大小为12px; 那我们缩进24px就可以了，但是在同一个页面不可能所有的文字大小都是12px, 这里我们就可以通过相对长度单位em来设置文本缩进2em，这样的话，不管文字多大，始终都会保持两个汉字宽度的随进。

3.id与class命名需要注意技巧：

　　在HTML编码中，对id与class的命名需要注意技巧，尽可能以区域所在的含义命名，如header、footer等，不要以表现或所在的位置命名，如width500、left、right。左边的侧边栏可以用side，如果你用left命名的话，后面的内容如果重构，这个侧边栏放到了右边，那么显然此时的left不适合了。

4.关于通配选择器“*”(Universal Selector)：

　　通配选择器可以对一些CSS属性进行全局设置，也就是全局默认样式的定义。这样做可以提高CSS编码效率，缩减代码，这样声明了，就不必在后面编码中再进行单独的定义。例如全局定义文字大小为12px, 而导航栏、侧边栏、内容区域中的文字正好也是12px, 有了这全局定义，那这3块儿区域就不用再单独设置了。

　　如果出现与全局定义冲突的定义，在后面的编码中直接再定义新的样式，CSS的继承和层叠经以新的样式作用于选择的对象。例如，外边距*{margin:0;}， 这里把外边距都设置为0，在后面的编码中单独定义某一元素的外边距为auto，如h3{margin:auto;}即可实现水平居中对齐。

5.关于position定位:

　　top、righ、bottom和left这4个CSS属性，都是配合position属性使用的，表示的是块的各边界离页面边框（当position为absolute时）的距离，或各个边界离原来位置（position为relative时）的距离。也就是说只有当position属性的值设置为absolute或relative时才有效，如果position属性设置为static，则子块不会有任何变化。