今天完成了什么：

完成第二张页面和第三张页面头部和底部按钮，剩下文字排版处理遇到点问题，可能需要一个上午来解决-- 。

明天计划：

完成任务7。调试好上传代码审核。

今天遇到了什么问题：

水民盒子在顶部想起头部标题栏是加了固定定位脱离文档流，所以给main盒子加上marigntop；

看到底部无法覆盖查了下资料使用添加了box-szing：border-box；才得以解决。

图标竖着排列。經師兄指點后醍醐灌頂，打通任督二脈，display：none屬性是隐藏元素，当使用display：block时就能显示出来，另外该样式需要横向排序，所以可以使用display：flex使其横向排列。display:inline 也可以，不仅仅display：block。

发现未添加背景，滑动的内容看到的。添加背景色后顯示正常。

文字盒子布局仍然出现问题。花了一个晚上还没弄好，想着用margin-left：%来设置，发现问题应该没那么简单。白色字体应该跟上面文字盒子是一样的左右间距，拉伸的时候保持一样，但是在苹果和各个设备显示的时候距离都在不断变化。用了弹性盒子居中这些方法都不对，明天再试试吧，可能是布局问题，对这种布局一看到心里其实没底。

今天收获了什么：

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。box-sizing类似于ie盒模型，它会把内边距和边框包含在width内。在实际工作中，我们设置一个固定宽度的盒子，但当给它设置padding、border之后，它的真正宽度就会改变。这时box-sizing就派上用途了。它会自动调整内容的宽度，保证盒子的真正宽度还是我们设置的宽度。

今天查看了下快元素和行元素的特性：

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

  center , dir , div , dl ,  form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , ol , p , pre , table , ul , li

内联元素主要有：

a ,  b , big , br , em , font , i , img , input , select , span , strong , sub , sup ,textarea ,

CSS中块级、内联元素中主要用的CSS样式有以下三个：

display:block  -- 显示为块级元素

display:inline  -- 显示为内联元素

display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

 对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。

visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：

 1、display:none 元素不再占用空间。

 2、visibility: hidden 使元素在网页上不可见，但仍占用空间。