今天完成的事情：

学习并使用sass，在写Task11开头的登录、注册、关闭让我想到了三栏布局，索性就采用sass写写布局方式，顺便复习之前的知识

明天计划的事情：任务十一 

遇到的问题：

scss这块学的很模糊，目前只知道如何定义变量、如何使用混合宏、如何进行元素和属性的嵌套这种简单的语法

问题一：目前对继承这块不是很清楚什么时候该继承，因为继承有时候回继承到子元素当中，也就是使用继承是在两者样式一致的时候才应该采用，否则就不要去继承，不知道是不是这么一回事；

问题二：如何定义变量才能使后面的代码更加简洁

问题三：css当中的函数该如何使用

收获：

关于bfc方面和布局相关的知识

 关于BFC

BFC元素的特性：

float：left 浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，因此无法实现自动填满容器自适应布局。

position:absolute脱离文档流，对于很多的布局不友好。

over:hidden ：这是为一个好用的元素既可以溢出剪裁，块元素的流体特征也保持的很好，我们可以用它做局部。

display：inline-block 在ie6和ie7后block水平的元素设置display：inline-block还是block水平，还是hui自适应容器宽度显示。于是display:inline-block是最合适的元素，即BFC又保留流体特征。

display:table-cell让元素表现的像单元格一样，只有ie8以上支持和display：inline-block一样，会跟随元素内部的宽度显示。

BFC的主要作用有以下几点：

边距重叠（子元素的外边距穿透，一般给父元素设padding，父子用padding，兄弟用magin）

不与float box重叠

高度塌陷

我所关注的点是：

Bfc不与float box重叠

此时图片浮动的图片的盒子与文字的盒子发生了重叠；

当我们需要让其排版分布成两栏布局

这样时，可以通过对文字区域的盒子设置一个大于图片宽的的左边距，其实我们需要的效果可能就是30px左右的间距，但是却需要设置成500px的外边距，大材小用

利用float盒子区域与bfc区域不重叠

我们对文字区域设置一个新的bfc，overflow：hidden；

此时也能形成这样的两栏效果，区别于外边距形成的效果，应用在两栏布局上，对比我们常规为非浮动元素或非定位元素设置margin来挤开的方法，其优点在于不需要去知道浮动或定位元素的宽度。

2.高度塌陷

普通的文档流元素是无法包含浮动后的元素，浮动会导致脱离文档流，从而无法被计算到确切的高度，这种情况我们称之为高度塌陷。解决高度塌陷的前提就是能识别并包含到浮动元素。但是一旦为元素建立BFC环境，那么这个元素就可以识别到浮动元素，而BFC就有这个特性，所以BFC也可以计算浮动元素的高度

通过overflow:hidden将元素转换为BFC，固然可以解决高度塌陷的问题，但是大范围的应用在布局上是肯定是行不通的，毕竟overflow会造成溢出隐藏的问题，特别是与JS交互的效果时。

所以在解决浮动元素导致的高度塌陷的问题时，我们可以通过伪元素：：after给容器中添加一个空的box，然后这个box设成clear：both；来清除浮动，

其原理是在浮动元素的最下面加一个块级元素，并且该块级元素本身应用了清除浮动属性，又因为块级元素独占一行的本质，所以该元素会掉落在浮动元素的下面，从而间接导致了父元素能够重新获取高度，也就是所谓的隔墙法的衍生。

利用scss写个三栏布局的样式，

左右固定，中间自适应

三栏布局之圣杯布局：采用浮动，负边距，相对定位

整体思路是采用负的外边距和相对定位来实现

外围的容器设置左右padding，让中间绿色块填满内容区域

对红色块做边距-100%即便与绿色快重合，采用相对定位将其移动至外围容器的padding区域

三栏布局之 双飞翼布局：浮动，负边距

双飞翼布局同圣杯布局一样，也是中间部分先渲染

与圣杯的区别在于:

圣杯的是在外层的容器设置padding进而产生左右两侧的空白

双飞翼在于对中间层的子容器设置padding让子容器中的内容不被两侧翅膀给遮挡

而且圣杯布局在宽度小于一定程度但大于两侧翅膀时，布局会被打乱，

而双飞翼则不会出现这种情况，

三栏布局之流体布局： 浮动 和正外边距

代码很简单，左右两侧分别设置左右浮动，中间不设浮动，设置相应的margin

缺点：中间主体部分不是最先加载出来，页面内容较多时会影响用户体验。

三栏布局之flex布局 display：flex；

容器设置flex，

中间主体部分采用flex-grow：1;采用flex-grow对其进行自适应，

侧边栏采用flex-shrink：0；控制其固定也可以用order属性来排序

简单实用，就是需要考虑浏览器的兼容性

还有的方法是：table和绝对定位布局，BFC布局