CSS的一些常问特别属性

网易一面考到了一个CSS的属性,对于CSS的很多属性我感觉自己掌握的概念也比较模糊,需要特别补一下。

z-index

先来个在实际面试中问到了的z-index,z-index可以为正值,也可以为负值,表达元素在页面Z轴上的一个堆叠顺序。

不管z-index设置成什么值,它都不会脱离层叠上下文,包括负值,负z-index不会让元素从页面上消失,只是它会被放在底部。

具体的顺序是:

需要注意的是负值的z-index仍然会在background和border的前面,但是它会放在block状盒子元素的后面,也就是说一般情况下它会被body遮挡。

在层叠中浏览器永远遵守下面两条准则:

  • 谁大谁上,z-index大的在上面
  • 谁后谁上,在同一层叠的层级下,DOM流后面的元素会覆盖前面的元素。

font-weight

改变字重,必须是100 - 900之间的某个数值,数值和字母关键字之间存在关联。

如果应用了某个数值的font-weight,但是没有更改,说明对应的字体不包括这一字重,没有办法使用这一字重进行渲染。

在定义font-face的时候,我们可以定义它能够使用的font-weight。

background-image

我一直都提倡在可以的情况下尽可能用background-image来加载图片,而不是img标签,主要有两个原因:

1、img标签是必定会加载图片的,但是background-image并不一定,现在浏览器中父元素是display: none;则不会发起加载。

2、background-image可以配合background-position和background-size从一个Sprite图中加载指定的图片,而Sprite能很好地优化页面的性能。

white-space

这个属性是声明浏览器要怎么处理空白的字符,有下面几个属性值:

  • normal
  • pre
  • nowrap
  • pre-wrap
  • pre-line

normal是合并空白字符和换行符,不会渲染大段空白。
pre是空白字符不会合并,只在要换行的地方换行,会渲染出大段空白,类似于pre标签。
nowrap下文本不会换行,直到遇到<br>标签。
pre-wrap和pre-line都允许文本环绕,区别在于它只在有换行符的地方进行换行,前者合并空白字符,后者不合并。

text-overflow

老朋友了,用来实现文本溢出自动省略。

在元素overflow为hidden、while-space为nowrap的情况下,设置text-flow为ellipsis,那么多余的内容会自动变成“...”,这个情况适用于单行文本。

对于多行文本,text-flow不能起到作用。

text-indent

这个属性是控制首行缩进的,可以设置为一个固定像素值,也可以设置为一个百分比。

text-indent也允许负值,复制的话首行会向左吸。

在以下的情况里,text-indent的声明是无效的:

  • input标签
  • button标签
  • display: inline

letter-spacing

可继承、可赋值,控制字符之间的间距。赋值可以给rem、em等单位,同时最终计算出来的px也可以是小数,能够做很精细的调整。

需要注意的是,它不支持百分比,只支持固定的某个赋值。

letter-spacing在某些场景下默认不是0,具体要看浏览器的行为。默认值取normal,这个显然并非是固定值。

赋值可以取负值,效果是字符重叠或者倒序排列。