今天完成的事情：

1今天完成了部分任务八。

2了解了

多列布局

左列定宽，右列自适应

该布局方式非常常见，适用于定宽的一侧常为导航，自适应的一侧为内容的布局

左列定宽，右列自适应

利用float+margin实现

.left{float:left;width:100px;}

.right{margin-left:100px;}

注：IE6会有3px的bug

利用float+margin(fix)实现

clipboard.png

<div class="parent">

    <div class="left"></div>

    <div class="right-fix">

        <div class="right"></div>

    </div>

</div>

.left{width:100px;float:left;}

.right-fix{width:100%;margin-left:-100px;float:right;}

.right{margin-left:100px;}

使用float+overflow实现

.left{width:100px;float:left;}

.right{overflow:hidden;}

overflow:hidden，触发bfc模式，浮动无法影响，隔离其他元素，IE6不支持，左侧left设置margin-left当作left与right之间的边距，右侧利用overflow:hidden 进行形成bfc模式

如果我们需要将两列设置为等高，可以用下述方法将“背景”设置为等高，其实并不是内容的等高

.left{width:100px;float:left;}

.right{overflow:hidden;}

.parent{overflow:hidden;}

.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}

使用table实现

.parent{display:table;table-layout:fixed;width:100%;}

.left{width:100px;}

.right,.left{display:table-cell;}

实用flex实现

.parent{display:flex;}

.left{width:100px;}

.right{flex:1;}

利用右侧容器的flex:1，均分了剩余的宽度，也实现了同样的效果。而align-items 默认值为stretch，故二者高度相等。

明天计划的事情:

1明天继续完成任务八。

2学习多列布局的一些内容。

遇到的问题：

做第一个页面下面的5个图片的时候，用ps软件截取下来的图片大小不一，在百度了之后，看到有人说可以用裁剪的方法吧你想要的图片裁剪下来，果不其然，我用裁剪的方法吧五张图片都按照同样大小裁剪夏利了。

收获：

1今天学习了多列布局。

2学习了ps软件如何裁剪。

3学习了媒体查询的大致内容。