今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

首先了解了下BFC的概念。

BFC(Block formatting context)直译为"块级格式化上下文"。

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

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

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

这是W3C的官方定义。。

在以下几种情况会触发BFC：

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

看了一些感觉BFC一个独立的区域，只有块级盒子参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。

一旦一个块级元素触发了BFC后内部的Box会在垂直方向，一个接一个地放置。触发BFC需要这个块级元素内部包含块级盒子。

BFC内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。这里可以利用BFC，在一个BFC内相邻的两个盒子中对其中一个盒子再次触发BFC，以防止margin重叠。

每个元素的margin-box的左边， 与包含块border-box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。利用这个特性实现自适应两栏布局。

计算BFC的高度时，浮动元素也参与计算。利用BFC这个特性解决父级盒子高度塌陷问题.....这个就是清除浮动的原理么？

然后就去看了下清除浮动

1、在尾部添加盒子，且声明clear

‍‍这个方法就是，父元素下面的子元素都浮动了，如果有一个不浮动岂不是就能包住了。‍‍

2、BFC处理方式

（1）、设置父元素float的值不为none

（2）、设置父元素overflow的值不为visible

（3）、display的值为inline-block、table-cell、table-caption

（4）、position的值为absolute或fixed

其实也就是让父元素触发BFC。生成独立的区域、

什么是语义化

语义化是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。

From wikipedia

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.

语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。

事实上SEO最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。

From 百度百科

也就是说语义化就是使用正确的标签，让机器读取html文件时可以像人读书一样，能够读懂html文档内容。

需要根据页面内容及其结构，选择合适的标签。

然后开始做任务、首先学习了flex。

flex是flexible box的缩写。弹性布局、

使用display：flex或者display：inline-flex使用flex布局。

父元素设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex容器默认存在两根主轴，一根水平的主轴main axis，起始点为main start，结束位置为main end；

第二根垂直的交叉轴cross axis。起始点为cross start，结束位置为cross end。

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex容器共有以下六个属性：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

1、flex-direction

这个属性决定了主轴main axis的方向，即内部元素排列的方向。有四个值：row（默认。水平方向，方向从左到右）、row-reverse（水平方向，从右到左）、column（垂直方向，由上及下），column-reverse（垂直方向，由下及上）。
2、flex-wrap

在默认的情况下flex内所有的元素都沿着主轴main axis排列。这个属性决定了，在一行排列不下的情况下，如何进行换行。

他有三个值、nowrap（默认情况，不换行）、wrap（换行、在第一行下方进行。）wrap-reverse（换行，在第一行上放进行换行，也就是第一行在第二行下面）

3、flex-flow

这个属性融合了上面的flex-direction和flex-wrap。默认值为row nowrap（水平由左及右 不换行）

4、justify-content

这个属性决定了项目在主轴上的对齐方式，有五个值，flex-start（在开始处对齐，也就是左对齐），flex-end（在主轴结束处对齐，也就是右对齐），center（居中对齐）、space-between（两端对齐，内部元素之间的空隙间隔相等）、space-around（每个元素的两侧距离相等）

5、align-items

这个属性决定了flex容器内的元素在垂直轴cross axis上的对齐方式，也就是垂直对齐的方式

和水平对齐一样有五个属性：flex-start（在垂直轴开始处对齐，顶部对齐）、flex-end（在垂直轴结束位置对齐，底部对齐）、center（垂直对齐）、、baseline（按第一个元素的text文本基准对齐，我看了下也就是不同字号的文字排列时，按第一个元素内部的文字底部对齐。）、stretch（默认值，如果，内部的元素位置高度或者auto，将占满整个flex容器的高度）、

6、align-content

该属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

其值有flex-start、flex-end、center、stretch、space-between、space-around。

含义和之前使用的大致相同

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

在flex容器的属性有以下六个属性：

order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: <integer>;

flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-grow: <number>; /* default 0 */

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-shrink: <number>; /* default 1 */

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

 flex-basis: <length> | auto; /* default auto */

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

明天计划的事情：（一定要写非常细致的内容） 

完成任务五
遇到的问题：（遇到什么困难，怎么解决的） 

学习flex、滚动条的生成，header和footer的定位、定位的使用方式。
收获：（通过今天的学习，学到了什么知识）

知晓了解了flex语句。