box-sizing, 相对定位与绝对定位

1. box-sizing的功能和演示

box-sizing是用于设置指定盒子的宽高尺寸:
.box {font-size, width, height, border,padding顺时针方向}

• px像素/16=em, 1em=16px
• 浏览器上显示的尺寸是加了边框margin的尺寸
• em是根据上下文确定box的值
• rem是固定盒子的值，根据根元素的字号来确定
• 三值，意思是左右的值相同，上下不同
• 二值，意思是左=右,上=下
• :root=html
• 如果要转为标准盒子content-box,就将boarder-box改为content-box即可

代码区

效果

2. 相对定位与绝对定位

• position relative 相对定位. 通过盒子的4边，top, right, bottom and left来确定盒子在文档中移动。
• position absolute绝对定位. 相比上一级设置盒子的绝对定位。
• View width, view height
• 1 vh=视口高度的1%, 1 vw =视口宽度的1%