今天完成的事：完成了任务14；又一次复习了之前的知识；

明天要完成的事：继续css的学习；对之前的深度思考进行查看；

难题：写完任务14的时候突然自我怀疑我写的什么玩意？？？

less的组件库是什么意思？后面查了资料；师兄也跟我说了一遍；

突然就把vue和less及css的概念搞混了；又去百度了一下；

收获：重新把之前的一些概念做了分类和记录；修改了一些概念上的错误：

vue：是一套构建用户界面的渐进式轻量型框架。

html：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。（你是谁或者什么）

css：CSS 用于控制网页的样式和布局。（长什么样子；或者表现出什么样子）

CSS3 是最新的 CSS 标准。（不要男女双标大家统一标准，最新标准）

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。（样子太多了；用less稍微减少一点提前处理一下更方便）

js：JavaScript 是属于 HTML 和 Web 的编程语言。（你要做什么；让页面动起来）

1.DOCTYPE是document type的简写，它并不是 HTML 标签，也没有结束标签，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。（声明告诉浏览器我的版本；帮浏览器正确显示我的文档）

2.如何消除margin重叠的问题:

给父元素加上：overflow:hidden

在外层设置padding属性，这样就不会重叠了。

给它设置成透明的边框。

绝对定位脱离文档流。

设置边框样式

(原因是外边距坍塌导致的)

（通过强调margin附近的值使浏览器注意到margin不会忽略margin的存在；感觉这样理解有点问题；百度了说和BFC有关）

相关阅读;

什么是BFC：Block Fromatting Context，解释为块级格式化上下文，

BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC定义了如下布局规则：

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

块元素垂直方向的距离由margin决定。两个相邻块元素的垂直方向的margin会发生重叠。

BFC的区域不会与float元素的区域重叠。

计算BFC的高度时，浮动元素也参与计算

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

1、float的值不是none。（float:left 或者float:right）

2、position的值不是static或者relative。（position:absolute或者position:fixed）

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible（overflow:hidden、overflow:scroll）

5、父元素与正常文件流的子元素（非浮动子元素）自动形成一个BFC

3.另外关于列表的选择：

有序列表和无序列表一样子元素只能是li ；li是容器级的；

自定义列表：dl 和 dd 也都是容器级；

dl dt dd的用法
dl 内容块
dt 内容块的标题
dd 
内容
可以这么写：

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

4.关于去除inline-block元素间 间距的方法：

1.父元素使用font-size:0 在这里是div使用

<div>

<a>

<a>

<a>

</div>

2. 使用margin负值

子元素使用 a使用

3.word-spacing 或者letter-spacing 可以为负值 

（word-spacing或 letter-spacing 属性都是增加或减少字符间的空白（字符间距）。

 不同之处在于：

letter-spacing是设置h1 h2 之间的间隔 ：字间距，添加每个字母或汉字之间的空白（少用）

而word-spacing属性增加或减少单词间的空白（即字间隔）。词间距，添加每个单词之间的空白

该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。）  

对父元素使用负值；并对子元素重新设置为0；

5.对行高的理解：

line-height的概念：每个文本行中可以看做有四条线：顶线，中线，基线和底线。

图中两条红线之间的距离就是行高（line-height），上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~

半行距 = （line-height - font-size）/2

当然，半行距也可能为负值（当line-height < font-size），这时候两行之间就会重叠，如下图所示：

解决图片底部有间隙：

1. 设置父元素 line-height 为0，基线和底线就会重合，间距就会消失。

2. 图片设置 vertical-aligh 为 bottom ，底线对齐。

3. 图片设置 display 为block，因为块元素没有vertical-align属性，所以不存在基线对齐。

（基线并不是顶线到底线而是2条基线的距离；基线下面还有一条底线）

vertical-align:行内元素的基线和该元素所在行的基线垂直对齐；只有当所在行的行高等于高度时；

vertical-aligin:bottom才是垂直整个所在行对齐；

vertical-aligin:middle把此元素放置在父元素的中部。

当line-height和height相等时：vertical-aligin:bottom，vertical-aligin:middle起同样的效果

感觉打开了新世界大门：除了display的align-item之外又有了；这个vertical-align；

而且垂直居中还可以父元素line-height=height；加上子元素vertical-align:middle；

去蛇皮操作；

不过外边距坍塌的原因还是没查到；不过到是会解决了；

今天的学习有一种打开世界大门的感觉；除了display：flex还有很多居中的办法：确实是要反省

长期以来依赖flexbox的习惯；flexbox确实好用；

6.less：mixin（混合）：能够熟练运用；带参数的mixin：（这里的参数其实就是变量；）和用变量差不多提前声明:之后引用；也存在作用域；

明天继续；感觉今天学的不是很扎实学的倒是很多；也比较实用