[置顶] CSS语言精粹

本文主要是对CSS中一些比较重要的高级部分作了一些整理，这些内容也许不是经常使用，但是都很强大。本文将长期更新。

边框

CSS2.1 规定：元素的背景是内容、内边距和边框区的背景。设置背景颜色时是没有问题的，背景色显示在边框下面，但是当使用背景图片时你会发现左边框和右边框下面并没有背景图片。这时需要把position-x和position-y设成负值，大小为border的宽度。我个人猜测原因是background-position的起始点是padding的左上角。

背景图片

背景定位

背景定位主要有三种方式：关键字，百分比和长度值。长度值比较简单，就是以元素的左上角为起点找到对应的坐标，然后从该点开始显示背景图片。

关键字和百分比的用法有点相似，比如:right, top，该关键字的意思是将图片的右上角放到元素的右上角，然后向左下方向显示图片。百分数值是同时作用于元素和图片上，例如：20%, 20%,意思是将图片的20%, 20%那个点放到元素的20%, 20%那个点上，如果图片和元素的大小一致则背景图片的左上角和元素的左上角重叠。

其实关键字的用法就是百分数值用法的一种快捷方式，left, top对应0%, 0%，certer, center则对应50%, 50%，right, bottom对应100%, 100%。

em

em是W3C推荐的尺寸单位，1em等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。如果父元素的字体大小为20px，则1em为20px。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。如果body的font-size为100%，则所有元素的默认字体大小为1em，也就是16px。

当使用em为字体大小时，em的值为父元素字体大小。而当使用em为长度单位时，即用于设置宽高时，em的值则为当前字体大小而不是父元素字体大小。例如父元素字体大小为20px，当前的元素的样式为:font-size: 1.5em; width: 2em，则当前元素的字体大小为30px(20 * 1.5)，宽度为60px(2 * 30)。

行高line-height

line-height 属性设置行间的距离（行高）。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。行内元素不可以设置高度和垂直方向的margin和padding，但是可以通过line-height来影响行内元素的布局，可以包含这些内容的最小框就是行框。

line-height 的值可以设为"normal"，"number"，"length"，"%"。"length"的值可以是15px，或者1em等，"%"的值基于当前元素字体的大小，和em单位类似。"number"的值如1, 2等，最终的行高是用这个数字乘以字体的大小。

line-height 具有继承性，就是当前元素的行高会传给全部的后代，其中"length"和"%"会直接把当前的具体值传给后代，而"number"只会把"number"本身传给后代，如1,而不会把乘以字体大小的值传给后代，后代元素拿到这个"number"之后再乘以它自己的字体大小，这样就比较灵活了，而且更合理。因此推荐使用"number"来设置行高。

font-family

CSS 定义了 5 种通用字体系列: Serif 字体， Sans-serif 字体，Monospace 字体，Cursive 字体，Fantasy 字体。其中我们比较常用的是Serif字体和Sans-serif 字体，Serif字体通俗讲就是有衬线字体，包括 Times、Georgia 和 New Century Schoolbook，而Sans-serif 字体则是无衬线字体，包括Helvetica、Geneva、Verdana、Arial 或 Univers。个体参考：CSS 字体系列

font-family的值可以是具体的字体，比如arial, times，也可以是字体系列，比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。如果是字体系列，浏览器就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），因此设置字体时强烈建议将字体系列设为最后一个值，以防止前面设置的字体不能使用。

outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。它和border的区别是outline不参与布局，就是说outline不会影响元素的盒模型，至多和其它元素重叠，而border则是盒模型的一部分，很多时候设置border会影响元素的宽度。另外一个区别是outline不能单独设置某个边的outline。

outline的特性可以用于调试CSS，你可以给元素加个outline来看一下元素的大小和位置是否正确，而不会影响页面的布局。

box-sizing

W3C标准的盒模型是元素的宽高是由内容的宽高加上Padding和Border的值决定的，就是对一个元素设定Padding和Border不会影响元素内容的宽高。而IE6以下的浏览器包括怪异模式(Quirks Mode)下的所有IE浏览器的盒模型为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，就是说给元素设定width: 100px，则100px包括了内容的宽度，Padding和Border，如果Padding和Border的值改变，则元素内容的宽度也会改变，因为它们的总和始终是100px。

早几年的前端开发人员估计都被这个差异性折磨过，我也曾经痛恨这个问题。但是IE的这种做法也有方便的地方，所以在CSS3中引入了box-sizing属性，它的一个值是border-box，即可实现IE5的那种盒模型。我们举个例子来说明IE这种模型的用途。

场景是一个100px固定宽度的元素，需要一个背景色，内容离边框有10个px。如果是用W3C标准盒模型，代码如下：

        height: 80px;

        padding: 10px 0;

下面的是CSS3的box-sizing: border-box的代码：

        box-sizing: border-box;

        height: 100px;

        padding: 10px 0;

W3C标准盒模型需要根据Padding和Border的值来计算内容的高度，并且一旦Pading和Border的值被修改，height的值必须跟着一起修改，这在开发阶段尤其麻烦。而box-sizing: border-box盒模型下，则不用考虑这些问题，只要设个高度为100px就行了，浏览器会自动根据元素的Padding和Border来对动态调整元素的内容的高度。示例代码

box-sizing的另外一个值是content-box，这个就是W3C标准的盒模型，这个值也是box-sizing的默认值。box-sizing是CSS3引入的一个样式，但是因为IE8就开始支持了，所以如果不考虑IE6和IE7的话就可以放心使用了。如果还不清楚请参考：CSS3 Box-sizing。

参考文献

W3School CSS教程

如需转载，请注明来自: BorisHuai前端修炼 > CSS语言精粹