今天完成的事情：任务七提交了，开始任务八九的学习。 
明天计划的事情：看一下 Bootstrap4 和flex弹性盒子。了解之后开始做任务。试着做。

遇到的问题：不太懂bootstrap 4 也不知道从哪里问起来 。怎么在CSS里插入这个框架，插在head里面还是哪里。这些都不清楚。盲人摸象了。看资料看不懂，一些网格系统类理解容易 没用过，用起来会遇到麻烦，也不知道什么时候需要用 ，用在哪里 效果怎么样。很迷茫。

收获：

Bootstrap 4

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

• .container 类用于固定宽度并支持响应式布局的容器。
• .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

我们也可以根据自己的需要，定义列数：

Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

网格类

Bootstrap 4 网格系统有以下 5 个类:

• .col- 针对所有设备
• .col-sm- 平板 - 屏幕宽度等于或大于 576px
• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

网格系统规则

Bootstrap4 网格系统规则:

• 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
• 使用行来创建水平的列组。
• 内容需要放置在列中，并且只有列可以是行的直接子节点。
• 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
• 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
• 网格列是通过跨越指定的 12 个可用列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
• Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

任务七总结

自己的脑图：

任务总结：

1.  vw和vh

（）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位1，代表类似于1%。

视窗(Viewport)是你的浏览器实际显示内容的区域，换句话说是你的不包括工具栏和按钮的网页浏览器。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为1%）

vh：视窗高度的百分比

2.opacity会继承父元素的opacity属性,而RGBA设置的元素的后代不会继承该属性及属性值。

3.

opacity:0;元素隐藏，位置还在

display：none；元素节点不存在。

visibility：hidden；元素隐藏，位置还在

1. 从名字就可以看出明显的区别。display是设置元素的显示方法。display：none；设置元素不显示，这个时候元素会在页面的渲染流中消失。不占据任何空间。display并不会被继承。子节点消失是由于父元素从渲染流中消失造成，通过修改子节点的属性无法显示；

1. visibility是规定元素是否可见。可见。也就是前提元素已经存在于渲染流了，通过设置属性值来更改其是否显示出来。visibility：hidden是继承属性，子节点消失是由于继承了hidden，通过设置visibility：visible，可以让子节点显示。