一、Css 盒模型

页面上任何一个元素，我们都可以看成是一个盒子，盒子会占用一定的空间和位置，他们之间相互制约，就形成了网页的布局。

w3c的盒模型的构成：content border padding margin

IE盒模型和标准盒模型

IE盒模型和标准盒模型唯一的区别是内容计算方式的不同

IE 盒模型，宽度：width = content + padding

标准盒模型，宽度：width = content

不同定位

一、相对定位

relative(相对定位)对象不可层叠、不脱离文档流，参考自身静态位置，通过top，bottom，left，right定位，并且可以通过z-index进行层次分级。

二、绝对定位

absolute(绝对定位)脱离文档流，通过top，bottom，left，right定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

三、浮动

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

【Day06】请画出 Css 盒模型 基于盒模型的原理 说明相对定位 绝对定位 浮动实现样式是如何实现的？