#今天完成的事

任务十

sass的基本使用方法

用sass重写任务四（未全部完成）

#明天计划的事

任务十一

任务十，十一深度思考

学习额外的知识

#遇到的问题

不是很理解命令行编译的这两句的意思，先是下载了考拉，后来直接使用vscode插件了，感觉更方便

2.任务十小圆点选项还未实现，不过看了下bootstrap有这个组件，明天解决

#收获

重写页面的时候感觉以前写的样式都不知道是什么鬼，重构了发现自己还是掌握了一些新知识的

比如说以前不知道怎么办的垂直居中问题，因为以前我都是用margin或者padding来达到目的

尺寸什么的还不一定完全居中，现在已经掌握了多种垂直居中方法，还是要多写demo，多试试就知道怎么用

今天听了北京师兄的一个小课堂，讲的是如何清除浮动，为什么要清除浮动，感觉还是蛮有用的，自己又去找博客了解一下。

为什么要清除浮动：我的理解就是，比如说三张大小不一的图片，装在一个div里，最高的一张图片浮动了的话，父级的div高度就会塌陷下来，就像下面这两张图片

这样明显看起来就是不对的吗，所以我们需要清除浮动

清除浮动的方法

1.给父级div定义高度。我的理解就是原本的父级div高度是靠子元素高度撑起来的，本来父级div是没设置高度的，这时我们给父级div设置一个高度，就不存在高度塌陷问题了，但是这种方法有缺点，那就是只适合高度固定的布局，需要给出一个精确地高度，如果高度和父级div不一样会出现问题。

2.在结尾处给一个子div并给出属性clear：both。原理就是添加一个空的div，利用css提高的clear：both清除浮动，让父级div能自动获取到高度。这种方法的优点是：简单，代码少，浏览器支持好，不容易出现怪问题

缺点是：当浮动很多的时候，就要添加很多的空div，很麻烦，而且不符合布局的哲学

3.父级div定义伪类：after和zoom。优点是：浏览器支持好。缺点是：代码多，原理比较难理解。要两者结合使用主流浏览器才都支持

      代码如下：

还有一行zoom：1是为了兼容ie（推荐使用）

4.给父级div定义overflow：hidden。这种方法必须定义宽度或zoom：1，同时不能定义高度，浏览器会自动检查浮动区域的高度，这种方法还不能和position一起使用，因为超出的部分会被隐藏。

5.给父级div定义overflow：auto，这种方法和上一种差不多，条件也是必须定义宽度或zoom：1，同时不能定义高度，浏览器会自动检查浮动区域的高度，但这种方法的缺点是：内部宽高超过父级div时会出现滚动条

6.还有一种就是BFC，这种方法我不是很理解

BFC的定义如下图

怎么用BFC清除浮动呢

总的来说就是让浮动块包含在同一个bfc中，同时加overflow：hidden

比如下面这段html

他的css

在这个例子中父容器将不会有任何高度，它将不会包含已经浮动的子元素，为了解决问题，我们给父元素添加overflow：hidden在容器中创建一个新的BFC，修改后的css如下

现在这个容器将包含浮动的子元素，它的高度将扩张到可以包含他的子元素的高度，在这个BFC，这些浮动的元素将会回到页面的常规文档流（这种方法也是给父元素添加overflow：hidden，但是不是很理解原理）