今天完成的事情：

1.使用float布局，通过计算宽度和边距的方法达到目标效果

2.了解了盒子模型

3.对浮动更进一步的认识

今天的收获：

1.了解前端页面的组成

页面分三部分组成

结构层：由html或xhtml语言组成，负责构建页面最基本的内容以及元素间的关系

表现层：由css语言组成，告诉页面该如何显示内容，比如div的背景颜色，字体大小与排版等

行为层：由javascript语言组成，前端最为关键的语言，负责如何对相应事件做出反应

2.了解css

全称层叠样式表，用来定义如何显示html的元素，控制html的布局和样式，一般使用外链的方式，在head头部添加link herf引入css

3.盒子模型

浏览器会根据渲染模型，为每个元素生成4个嵌套的矩形框，他们分别是content box内容盒子，padding box内边距盒子，border box边框盒子，margin box外边距盒子

这里要提到宽度，最常见的属性，但在不同浏览器下所指的是不一样的，w3c规定width/height=内容(content)宽度/内容长度

万恶的IE规定 width/height=content+padding+border

注意：普通文档流垂直相遇的外边距会合并，大的合并小的，但在浮动，绝对定位，行内框不会发生定位

4.float：浮动

块级元素总是单独占一行，多个元素会另起一行显示，添加浮动后会像水缸里水面漂浮的木头一样并排显示，如果水缸（width）不够容纳元素，那么首先元素会向下移动，然后移向float所指的方向，如果高度不同，那么很有可能被卡住

注意：浮动会使元素脱离普通文档流，使父元素塌陷，解决方法：清除浮动

5.一行代码兼容不同的浏览设备

<meta name="viewport" content="width=device-width, initial-scale=1">

遇到的问题：

不太明白清除浮动的原理，为什么可以使崩塌的父元素重新包裹住浮动的元素

明天的计划

完成任务2