陶吉诃德

这是最好的时代,这是最坏的时代;这是智慧的年代,这是愚蠢的年代;这是信仰的时期,这是怀疑的时期;这是光明的季节,这是黑暗的季节;这是希望之春,这是绝望之冬;

Tao-Quixote's Blog

css权威指南(三)

1、垂直对齐文本

  • vertical-align: baseline;要求一个元素的基线与父元素的基线对齐。如果一个垂直对齐元素没有基线,如img标签,则把该该元素的底边与父元素的基线对齐。
  • vertical-align: sub;要求一个元素的基线低于父元素的基线,具体低于多少取决于浏览器,css规范中没有规定,sup与sub相反,要求一个元素的基线高于父元素的基线,具体高于到少同样取决于浏览器,如果该元素没有基线,则取其底边。
  • vertical-align: top | bottom;将元素行内框的底端(或顶端)与行框的底端(或顶端)对齐。
  • vertical-align: middle;该属性往往用于图片垂直居中对齐,计算规则:取图片垂直方向的中点,将该图片的中点与父元素基线上方0.5ex的位置对齐;
  • vertical-align: 50%;把该元素的基线相对于其父元素的基线升高或者降低,升高或者降低的值为该元素的line-height * 50%,百分比为正则升高,为负则降低。 注:计算基数为line-height的值而不是font-size。

所有垂直对齐都会影响行高,会使行高增加。

2、字间隔和字母间隔

word-spacing和letter-spacing都可以继承,但是只可以继承父元素计算后的值,而且没有计算因子。如果想要间隔与文字同步,最好用em或者ex为单位设置间隔。

3、处理空白符

  • white-space: nowrap;文本不允许换行(如果有br标签则会换行),空白符会被合并
  • white-space: pre;文本不允许自动换行,空白符保留,换行符也会被保留
  • white-space: pre-wrap;文本允许自动换行,空白符保留,换行符保留
  • white-space: pre-line;文本允许自动换行,空白符合并,换行符保留

4、文本方向

direction: inherit | ltr | rtl;
如果文本本身的阅读和书写方向并不是从右向左的,在声明了direction: rtl;后,会发现文本只是右对齐,并没有从右向左排列,这时可以加上unicode-bidi: bidi-override,会改变文本的排列方向。

unicode-bidi: bidi-override; (该属性会使顺序重拍在元素内部严格按照direction属性的值进行)
direction: rtl;