2010-5-21
1、line-height:行高。就是文字行与行之间的高度。就是两行文字之间基线的距离。那么基线是什么呢？就是如果给文字加上下划线那么下划线的位置就是文字的基线。
但是很多教科书把此属性翻译成行距。按我理解，汉字的行距应该是(line-height)-(font-size)的值才是真正体现在页面上的行与行的间距。
个人感觉学习CSS最好配合示意图。这个属性翻译过来的都不能准确表达CSS标准的意思，还是要在脑海中用图去解构他们。
示例：
p.one{font-size:10pt;line-height:8pt}/*行间距小于字体大小。效果就是部分文字会重叠*/
p.third{line-height:1.5em /*行间距，相对数值*/}
代码
2、通过X-Y坐标轴理解margin,padding的正负数值问题。正值代表什么，负的又如何理解呢?
比如img{foat:left;margin-right:50px;margin-bottom:25px}
<img src="test.jpg"/><p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
那么图片居左，文字在右，至今有50及25形成的距离。如果margin-right:-50px呢？那么文字会有一部分叠在图片上？如何理解这些数值体现的位置呢？
我想用X轴Y轴的坐标来解构这些比较适合。默认情况下图片和文字紧贴在一起（如果没有任何默认值的话），当margin-right为正时，在图片右侧即X轴上留出50Px，表示这块被我空出了，其它元素不用占用了。如果是负值，表示我把我本身从右侧开始向左扣出50px,你可以用我的这个50px,负距离,那就是你中有我我中有你了嘛。
3、float的理解。参看http://www.w3school.com.cn/css/pr_class_float.asp
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。默认值：none.那么float:left该如何理解呢？按照上面的定义，就是浮动在左侧的一个尽可能窄的块级框.但是这跟text-aligh:left又有何区别呢？而且如何体现这个浮动字眼呢？ 浮动浮动，为什么不是浮在文字上面而是占了位置呢？参看这篇转载来的详细介绍float的文章吧http://apps.hi.baidu.com/share/detail/3602929。有点明白。原来float是描述一个元素浮动至某一侧并停下的表现方式，具体的就是通过定义的left或者right浮动到left或者right的边缘。浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。元素浮动后将自动转为块级元素。你应该为所有的浮动元素设定宽度属性（除非是＜img＞元素，因其具有隐含的宽度）。如果不设定宽度，结果将是不可预知的
4、有float就诞生了clear:both,就是让float周围的元素要不要紧跟着它。一般常用clear:both。那么元素就不会紧跟着它。
<div style="float:left;height:80px" >ABCD</div><div style="clear:both">EFGH</div>
5、dl,dt,dd的用法。
list——定义列表
dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。 dd——define list define——用于生成定义列表各列表项的说明文字段，重复使用可以定义多个说明文字段。dt和dd中可以再加入 ol ul li和P
示例：
<dl>
<dt>标题</dt>
<dd>内容 1</dd>
<dd>内容2</dd>
</dl>
6、margin,padding不是有上右下左4个值？如果是margin:6px auto,padding:7px 8px,这只设置2个值表示什么意思呢？前面值表示上下，后面值表示左右 。
还有一种情况margin:6px;padding:6px,只有一个值又是什么意思呢？表示上下左右都是这个值。
7、*{margin:0;padding:0}。通配符，你在windows搜索里或者搜索引擎搜索里都可以用，值“所有”如“*.jpg”、“*.asp”就是说，调用这个css的页面所有元素都运用通配符里声明的属性，而不是默认的 。作用是为了避免一些浏览器差异。但是对于这个通配符用法存在争论，主要是性能方面，详见http://hi.baidu.com/koen_li/blog/item/092306e692600c22b83820ea.html
8、背景定位（background-position）。
background-position 属性用来控制背景图片在元素中的位置。技巧是，实际上指定的是图片左上角相对于元素左上角的位置。
下面的例子中，设置了一个背景图片并且用 background-position 属性来控制它的位置，同时也设置了 background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴（水平）位置，第二个是 y 轴（垂直） 位置。
/* 例 1： 默认值 */
background-position： 0 0; /* 元素的左上角 */
/* 例 2： 把图片向右移动 */
background-position： 75px 0;
/* 例 3： 把图片向左移动 */
background-position： -75px 0;
/* 例 4： 把图片向下移动 */
background-position： 0 100px;
background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。
关键词是不用解释的。x 轴上：
* left
* center
* right
y 轴上：
* top
* center
* bottom
顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：
background-position： top right;
使用百分数时也类似。需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的background： 《color》 《image》 《position》 《attachment》 《repeat》
例如，下面的声明
background-color： transparent;
background-image： url（image.jpg）;
background-position： 50% 0 ;
background-attachment： scroll;
background-repeat： repeat-y;
可以合为单独一行：
background： transparent url（image.jpg） 50% 0 scroll repeat-y;
而且不需要指定每一个值。如果省略值地话，就使用属性地默认值。例如，上面那行和下面这个效果一样：
background： url（image.jpg） 50% 0 repeat-y;