今天完成的事情

完成任务七第三个页面

背景半透明

实现原理：background-color：rgba（r,g,b,透明程度0-1）

box-sizing: border-box

今天在使用固定定位固定头部和底部盒子的时候，使用width：100%加上padding后，出现图标往页面外挪的现象,经过师兄指点后添加

box-sizing: border-box;完美解决

定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

语法

box-sizing: content-box|border-box|inherit;

*{  }的使用

今天在还原ui图三过程中，写了如下代码

*{

background-color：rgb(41, 189, 224);

}

开始的思路是，整个页面几乎背景颜色都差不多，只有少许不一致，那么我在*{ }中设置一个背景就可以所有背景都能应用了，可以节省时间，

但是在后续下方页面编写过程中出现背景无法修改的现象，经过师兄指导，才知道是下方页面的编写中，我只给了父元素设置背景色，但是子元素没有设置背景色，所以下方的页面给颜色依旧是*{ }中的颜色，我以为子元素会继承父元素的颜色，现在才知道颜色是无法继承的，此现象的解决办法是为每个子元素设置背景颜色，取消*{ }中颜色的设定，*{ }以后写页面时尽量不要使用。

修改页面2

今天在使用手机端访问任务7页面的时候，发现第二个页面布局出错，显示的是一行两个小盒子，而需要的效果是一行显示三个小盒子，编写页面过程中我使用的是百分比来完成自适应，使用的vw单位，但是几个盒子之间的vw合计出错，从而导致页面出错，

vw 和 vh

【vw】

viewpoint width，视窗宽度，1vw=视窗宽度的1%

【vh】

viewpoint height，视窗高度，1vh=视窗高度的1%

之前并不太懂vw vh的使用，直到ui图2使用后才发现真的好用，原来高度height也可以使用vw单位，代表的是窗口横向宽度的比例

今天的收获

1.CSS任务七完成

明天的计划

1.开始CSS任务八