1）标签默认样式

html的一些标签在浏览器中是会有默认样式的，比如外边距、内边距、样式等，而且各个浏览器里表现的还不同。如果不做reset操作的话，会很影响样式的调试。所以通常会在文件的最前面加上这些重置的CSS。

html {font-size: 100%;}
body{line-height:1.4;color:#333;font-family:arial;font-size:1em;}
input,textarea,select{font-size:100%;font-family:inherit;outline:0;}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form,dl,dt,dd,li{margin:0;}
h4,h5,h6{font-size:1em;}
ul,ol{padding-left:0; list-style-type:none;}
img{border:0;}
article,aside,dialog,footer,header,section,nav,figure,menu{ display:block;}
figure,menu{margin:0;padding:0}
a:visited,a:active{outline:0}
pre{word-wrap:break-word;white-space: pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space: -o-pre-wrap;}

2）html块级元素与行内元素

　　1.块级元素【Block-level element 】

块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。

2.内联元素【Inline element】

文本的显示方式，与块级元素相反，内联元素的高度宽度是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。

点击查看具体的块级与行内标签列表

　　CSS中的display是可以控制标签变成块级还是行内的。

　　display有好多value值，比较常用的是三个：

inline：指定对象为内联元素。
block：指定对象为块元素。
inline-block：指定对象为内联块元素。（CSS2）

inline-block是我最喜欢的属性，将标签设置了这个就会有block和inline独有的特点，可以设置宽度等。但是设置了这个后也会有一些问题，例如两个inline-block之间会有间隙。

3）em与px

px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。因此用px来定义字体，就无法用浏览器字体放大的功能。

em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em是要相对于于父级的字体大小的，是需要经过实际的计算的。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。我在上面做reset操作的时候就定义了body的字体大小为1em。

em与px的转换公式如下：

　　1 ÷ 父元素的font-size × 需要转换的像素值 = em值

　　这里有篇文章写em的比较详细

4）CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

这是一种比较次的方法，只有在万不得已的情况下才使用。很多时候是可以避免出现这种情况的。

CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的：

属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

　　这里有比较详细的记载

　　从http://gs.statcounter.com上获取到的最新浏览器统计记录：

5）margin与padding

　　边界(margin)：元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。

　　补白(padding)：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是padding。如下图所示：

　　这两个就是用来控制两个标签之间的间隔，上下左右，都可以控制。有一点要注意下，如果用了padding，那个这个标签的宽度或高度也会改变。

　　用firebug能够看到指定标签的margin、padding的内容。

　　至于两者之间的区别，网上有很多地方做讨论。

在实际的页面调试中，经常会碰到一些奇怪的问题，比如margin-top失效，那这个时候改成padding-top就可以了，所以这两个属性在很多时候都是可以互换的。

在有些情况下就不行。例如页面某块区域的居中，这个时候就得使用margin来做了。

.w1000_mc{
    width:1000px;
    margin:0 auto
}

6）line-height

　　行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。如下图：

　　有了行高，文本里面的内容才好看。但是行高可以有好几种赋值方式。可以用1，1%，1px或1em等。这几种方式都是有区别的。

　　这些区别可以在这篇文章查看到。另外有一篇文章也有相关记录。

7）布局

页面经常是需要不同布局的，常见的二栏、三栏或者定位布局等。

　　下图是个二栏布局：

　　下图用的是定位布局：

　　1. float浮动实现布局

这是比较常用的布局方式，但我不太喜欢这种方式，因为在调试版本浏览器兼容的时候，经常会有意外的情况发生，尤其是IE浏览器，所以这个属性用的时候要小心。这个属性总共有三个值。

　　none：对象不浮动
　　left：对象浮在左边
　　right：对象浮在右边

语法就那么点东西，不过很多时候都要注意清除浮动，不然会有意想不到的事情发生。如下所示：用firebug可以查看到，没有浮动的时候div可以将两个p都包住。

<div>
    <p>123</p>
    <p>456</p>
</div>

下面这个是加了一个浮动后，可以看到div只能包住了第二个p标签，整个样式都散了。所以说float如果控制的不好很容易出乱子。

<div>
    <p style="float:left">123</p>
    <p>456</p>
</div>

关于清除浮动有很多方法，例如给div加个overflow：hidden，加个空的div给个clear:both的样式等。一大把方法啦。下面的代码就是用来清除浮动的。这里有篇文章

.fix{*zoom:1;}
.fix:after,.fix:before{
    display:block;
    content:"clear"; 
    height:0; 
    clear:both; 
    overflow:hidden; 
    visibility:hidden;
}

　　2.position定位布局

一个父级加个position:relative样式，子节点加个position:absolute样式，这样就能定位布局啦。如下面的结构：

<div style="position:relative">
    <p style="position:absolute">123</p>
</div>

用这种定位方式可以做一些很复杂的不规则的布局样式，也可以将本来一个复杂的样式简单话。

例如下面的这个就是让图片absolute，然后那些字加margin-left就可以了。不用浮动来实现。

<dd>
　　<a href="play/play.aspx?id=3102" target="_blank“>
    　　<img style="display: block;" src="upload/play/20131/p_131206102707788.jpg">
　　</a>
　　<h1>
   　　 <a href="play/play.aspx?id=3102" target="_blank">闯关东(A)·哈尔滨 雪乡 东升林场 长白山 雾淞岛 东北7日深度全景行</a>
　　</h1>
</dd>