盒子模型和字体单位

盒子模型

所有的HTML元素都看成是一个盒子，由外边距、边框、内边距和实际内容组成。可以分为：

• 标准盒模型中，width指实际内容的宽度；box-sizing: content-box;
• 怪异盒子中（IE5和IE6），width指内容+内边距+边框；box-sizing: border-box;

css属性box-sizing 用来决定采用哪种盒模型

font-size字体单位

• 像素px——绝对长度单位，相对屏幕分辨率
• 百分比（%）
• 视窗单位（vw，vh，vmin，vmax）——视口百分比长度定义相对于viewport的大小的值，即文档的可见部分。
  vw 代表视口宽度的 1/100。
• em——相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的 字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

计算公式: em=需要的px值 / 父级元素的font-size
特性：值不固定，继承父级元素的字体大小
所以 常有 body{font-size:62.5%}，这样的话 1rem=16px*62.5%=10px

• rem——相对长度单位。使用rem为元素设定字体大小时，仍然是相对大小，但相对的是网页的根元素（html）元素