今天完成的任务

经过师兄的建议 重新写了下任务1 任务3

回顾并 整理了一些内容

px em rem 的区别

三者都为抽象单位 在屏幕像素与尺寸的影响下每个像素的实际大小不同

有的眼神不好的用户会调整浏览器字体的大小而px不支持（ie，谷歌等浏览器） 所以字体大小单位不建议有px

em rem 兼容所有浏览器 但是em会继承父级元素的大小 在计算时比较麻烦

IE盒子模型与W3C标准盒子模型的区别

IE:content部分包含了padding和border 盒子占据位置计算:content+margin 盒子的实际大小:content(当content大于padding+border)

W3C:content不包含padding和border 盒子占据位置计算:content+padding+border+margin 盒子的实际大小:content+padding+border

IE5.5及更早的版本使用的是IE盒子模型。IE5.5以上的版本只需要为文档设置DOCTYPE就会遵循标准兼容模式使用W3C标准的盒子模型

css3的box-sizing属性可以选择盒子模型解析方式 content-box(W3C) border-box(IE)

关于 行内元素,块级元素,行内块级元素 的盒子模型特性

行内元素:上下margin无效 上下padding有效但不影响盒子占据的位置 

块级元素:上面写了

行内块级元素:同块级元素

关于行内元素可设置宽高：

·替换元素：替换元素根据其标签和属性来决定元素的具体显示内容，<img><input><textarea><select><object>等。替换一般有内在尺寸如img默认的src属性引用的图片的宽高，表单元素如input也有默认的尺寸。img和input的宽高可以设定。

· 不可替换元素：即将内容直接表现给用户端。

·注意：几乎大部分的替换元素都是行内元素，所以说如input、img、textarea是行内元素但是是可以设置宽高的说法。

行内元素-可替换元素的盒子模型特性：同块级元素

行内元素 与块级元素都能浮动 浮动完后都拥有行内块级元素特性

明天的计划

重新写下 任务4 整理 5，6的代码规范

整理下 position绝对，相对，固定定位  flex布局

尽量完成任务7