width 和 height

width:
  inline 元素:自适应包裹内容
  block 元素:
    文档流:自适应填充父元素
    脱离文档流:自适应包裹内容

height:一个元素的高度由其内部文档流元素的高度总和决定

文档流:文档内元素的流动方向
  inline 元素:从左往右流(宽度不够换行继续从左往右流)
  block 元素:从上往下流(宽度有空余也是从上往下流)

脱离文档流
  float
  position: absolute | fixed

文本(英文)换行方式
word-break:
  break-word | normal:字母不可打断,在单词间打断
  break-all:字母可打断

font-size:整个字体集中,最高字符的最上端和最低字符的最下端之间的距离

vertical-align:默认基线对齐

line-height:默认是建议行高(建议行高由 font-family 决定)

border-width 不支持百分比

TODO
line-height

百分比高度参考

  • height:基于容器高度计算
  • padding-top/bottom:基于容器宽度计算
  • margin-top/bottom:基于容器宽度计算
  • transform: translateY():基于元素自身高度计算

box-sizing

box-sizing: content-box(默认)| border-box | inherit;

content-box			width|height = content
border-box			width|height = content + padding + border