文章目录
盒子模型
所有的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)元素