css内容之间的定位

《css内容之间的定位》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、目录我们在第2天的CSS教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动要素等，列表如下：·字间距·字母间距·行高·文字对齐方式·垂直对齐方式·文字缩位·顶边距、左边距等·空格填充－顶部、左边等等·边框－宽度、颜色、样式等·浮动·清除很显然，今天我们要学很多东西，所以我们得抓紧时间。让我们开始吧css控制字间距和字母间距下面要学习的CSS属性可以使你做到HTML标签做不到的事情：控制字间距及字母间距。字间距利用字

2、间距属性，你可以在字之间加入更多的距离：H3{word-spacing:1em}你所使用的参数值将加入任何浏览器的缺省设置，你可以使用我们昨天谈到的任何一种长度单位：·in（英寸）·cm（厘米）·mm（毫米）·pt（点数）·pc（打字机字间距）·em（ems）·ex(x-height)·px（象素）以下为显示结果：Beholdthepowerofcheese.如果你的浏览器不支持这种CSS属性，请点击这里查看显示效果。如果你看不到任何不同之处，则说明你的浏览器不支持这种属性，只有MAC机用的IE4能支持这种字间距设置。字母间距字母间距可以在IE4中应用，但C

3、ommunicator不行，唉...H3{letter-spacing:10px}字母间距的功能和字间距的很类似：其参数值将被加入到浏览器的缺省设置中，你可以使用上述任何一种长度单位。如果你用的是IE4，这里是一个例子：Beholdthepowerofcheese.对于这两种属性，你都可以使用normal参数。从而使其按照浏览器的原有缺省设置显示。别沮丧，还有很多CSS属性可以在两种浏览器上都可使用。下文中就是一个例子。css行距行与行之间的距离最常用的称呼是行距，而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"行高行高简直是上帝发给人间的

4、福音。利用CSS行高我们可以随心所欲地控制行与行之间的垂直距离。B{line-height:16pt}你所用的参数就是相邻两行的基准线（基准线就是英文小写字母如x,a的下阶线，但不包括诸如y,g等字母超过下阶线的部分）之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。NetscapeCommunitor和InternetExplorer在行之前加入行高参数。所以如果你将参数设为10px，浏览器将把文字的第1行以10px的高度显示。有3种设定行高的方法：·数字·长度单位·比例用数字设行距B{font-size:12pt;line-height:2}

5、当你用数字设定行高的时候，浏览器将利用字号来确定行距：它将字号乘以设定的参数值。所以，在本例中，行高将是24点。显示效果如下：Fourscoreandsevenyearsago,theWebwasn'tyetaglimmerinanyone'seye.Nooneneededit,noonemissedit.Eighty-sevenyearsfromnow,whatwillpeoplelaughatusforlacking?你还可以用小数设定参数值。（你应该知道IE3不支持数字参数值，在IE3中使用数字参数将出现大片文字的互相重叠。）用长度单位设定行距B{fo

6、nt-size:12pt;line-height:11pt}设定行高的另一种方法就是利用先前学过的长度单位（em及pt是最常用的单位），以下为显示效果：Fourscoreandsevenyearsago,theWebwasn'tyetaglimmerinanyone'seye.Nooneneededit,noonemissedit.Eighty-sevenyearsfromnow,whatwillpeoplelaughatusforlacking?你既可以轻松地将行距缩小也可以将行距放大。有了样式表，这一切都易如反掌！用比例设定行距B{font-size:1

7、0pt;line-height:140%}在本例中，行距是长度10points的140％，即14points。明白了吗？让文字互相重叠!你可能会问这样的问题：如果行距太小的话，文字岂不就重叠在一起了吗？是这样的。我们来看看这个例子：B{font-size:28pt;line-height:2pt}以下为显示效果:Whoa.Cool."Whoa"使用了浏览器的缺省行高设置。但"Cool"的行高很小所以它和第1行重叠了。（Communicator和InternetExplorer对行高的诠释有所不同。Communicator将只是将文字的上半部分重叠一点，而IE

8、则将其全部重叠。）如果你计划将你的网页中的某些内容重