日期:2014-05-17  浏览次数:20761 次

CSS总结

1、word-spacing与letter-spacing的区别:

在对网页文本进行精细控制时,需要应用到多方面的CSS属性设置,如垂直方向上的行距line-height,水平方向上的字距word-spacing和letter-spacing。word-spacing是指单词间隔,letter-spacing是指字母的间隔。在设置时常常将两者混淆,得不到想要的设置效果。

2、cellspacing与cellpadding的区别:
??? DIV是层的标记,相当于一个区域块.这个比table要好,可以准确的定位比例
??? cellpadding为表格的填充,是单元格的元素与边界的距离 ;
??? cellspacing为表格的间距,是单元格与单元格之间的距离
???? 例子:http://www.htmlcodetutorial.com/tables/index_famsupp_29.html

在table中控制单元格之间的间距要用到cellspacing、cellpadding,默认情况cellspacing、 cellpadding均不为0 ,但经常的状况为了不让table单元格之间的间距影响到美观,我们经常会把cellspacing、 cellpadding设置为0,因此经常看到“<table cellspacing=0 cellpadding=0>”这样的代码。这样做无形中增加了代码的体积,因此使用css控制cellspacing/cellpadding显的意义重大了!以下是控制方法:

table{border:0;margin:0;border-collapse:collapse;}
table td{padding:0;}

第一行控制cellspacing,关键是“border- collapse:collapse;”(相邻边被合并)这一句;第二行控制cellpadding,很少人知道控制td吧?:)

?

3、fieldset和legend


				<div>
					<fieldset>
						<legend>
							<span>搜索条件</span>
						</legend>
						<table style="width: 100%;" border="0">
							<tr>
								<td width="20%">
									<span>费用名称</span>
								</td>
								<td width="80%">
									<input type="text"/>
								</td>
							</tr>							
						</table>
					</fieldset>
				</div>

?fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。
fieldset元素元素是块元素。 并且需要关闭标签,即必须成对出现:<fieldset></fieldset>。

legend是在fieldSet对象绘制的方框内插入一个标题。
legend元素必必位于fieldset内的第一个元素。
legend元素是块元素。并且需要关闭标签,即必须成对出现:<legend></legend>。

?

可以对fieldset设置了上下与左右的填充:
padding:3px 6px;
padding-bottom:1px;
padding-top:1px;
...

?

4、css继承


?

5、css基础

常用的属性。

1、字体:font, font-size, font-family, font-weight, text-decoration, line-height
A. font是一个复合属性。所有后面的这几个属性的值都可以放在font里面用。
B. font-size定义文字的大小。
C. font-family定义字体。
D. font-weight定义文字的粗细。
E. text-decoration定义文字的装饰。
F. line-height定义行高。

2、文本:text-indent, vertical-align, text-align, word-break
? text-indent,设置对象的缩进。
?vertical-align,设置对象的上下对齐方式。
?text-align,设置对象的左右对齐方式。

? word-break,设置字体的强制换行。

3、背景:background, background-color, background-image, background-position, background-repeat
A. background定义背景的一个复合属性。和上面的font一样,可以把后面这几个属性的值都放在font里面用。
B. background-color定义的是背景的颜色。
C. background-image定义的是背景的图片。
D. background-position定义背景的位置。
E. background-repeat定义背景的是否平铺。

4、定位:position, z-index, top, right, bottom, left.
A. position定位方式。
B. z-index 定义层叠顺序。
C. top, right, bottom 和left表示距离他父级的上边,右边,下边和左边的距离。

5、尺寸:width, height
A. width定义对象的宽度。
B. height定义对象的高度。

6、布局:clear, float, display
A. clear 设置不允许又浮动对象的边。
B. float设置对象浮动及如何浮动。
C. display设置对象是否及如何显示。
D. visibility 设置对象是否显示。

7、外补丁:margin , margin-top, margin-right, margin-bottom, margin-left

margin 设置一个元素所有外边距的宽度。该属性可以有 1 到 4 个值。
A. margin定义外补丁的一个复合属性。同上。
B. margin-top定义对象的上边距离父级的外补丁。
C. margin-right 定义对象的右边距离父级的外补丁。
D. margin-bottom 定义对象的下边距离父级的外补丁。
E. margin-left 定义对象的左边距离父级的外补丁。