CSS-基础(二)

2020-06-11

CSS学习笔记（二）

em is relative to the font-size of its direct or nearest parent, rem *is only relative to the html (root) font-size.

根据W3C的定义：

Equal to the computed value of the font-size property of the element on which it is used

因此，em是相对于使用它的元素的字体大小, 如果该元素没有设置字体大小，那么就会向父级寻找

em浏览器默认字体大小，16px( 火狐和Chrome )

/*如果该元素设置了字体大小，那么对应的em单位就会相对于该元素的字体大小*/
p {
  font-size: 16px; 
  line-height: 2em; /*32px*/
}

为了方便换算，我们通常在css中设置body的属性 font-size:62.5%，这就使1em值变为10px

而rem是相对于根(html)元素的font-size计算的

Equal to the computed value of font-size on the root element.

font:bold italic 16px/1.4rem 'Merriweather', serif;

从左到右依次是font-weight, font-style, font-size, line-height,font-family。其中font-weight和font-style是可以参略的

上滑线，删除线，下滑线

text-decoration:overline || line-through || underline

阴影颜色，右偏移量, 下偏移量，模糊度

text-shadow:red 4px 4px 4px

保留多余空格和换行p{white-space:pre;}

/*div内文本不换行溢出隐藏*/
div{
  
	 white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

文本锁进 text-indent:2rem

文本对齐 text-align:center

The vertical-alignproperty can be used in two contexts:

To vertically align an inline element’s box inside its containing line box. For example, it could be used to vertically position an <img> in a line of text
To vertically align the content of a cell in a table

单词间距word-spacing

字母间距letter-spacing

垂直从左到右排版 writing-mode:vertical-lr

图片与文字垂直对齐 vertical-align