今天完成的事情： 完成了任务5深度思考，做了报名活动，看资料无聊的时候写了一下任务6框架、又看了一遍弹性盒子、初步了解了雪碧图

明天计划的事情：学习雪碧图、bootstrap、文字被截断出现”…”省略号、尝试任务6

遇到的问题：

在看如何理解vertical-align与line-height？的时候看错了，以为是要找相同，就找资料一直找相同点，找到最后找懵了，又看视频去找。。。。最后回过头来看才发现是如何理解。。

收获：

1、先审题

2、更加清楚的认识了vertical-align与line-height

line-height（单行行高）

一段是一个包含盒子由一个或多个行框盒子组成，一行是一个行框盒子由一个或多个内联盒子组成

内容区域+边距=行高

内容区域与字号和字体有关

Ø   line-height:noromal（默认属性值）

随着用户的浏览器默认值走，且与元素字体关联

Ø   line-height:<number>（父级应用子级重新计算行高，最佳值1.4286）

使用数值作为行高，例如：1.5 就是1.5倍字体大小；

Ø   line-height:<length>

使用具体长度值作为行高。例如：em、rem、px、pt

Ø  line-height:<percent>（父级应用子级直接继承行高）

使用百分比作为行高值，和<number>一样

Ø  line-height:inherit 继承

消除图片底部间隙的方法

Ø  消除图片块状化—无基线对齐

img{displar:block}

Ø  图片底线对齐

img{ vertical-align:bottom;}

Ø  行高足够小-基线位置上移

.box{line-height:0;}

vertical-align（垂直对齐）

vertical-align起作用的前提(默认状态下：图片、按钮、文字和单元格)

Ø  verticall-align百分比是相对line-height计算的 解决相似垂直居中的方法 font-size：0；

Ø  主框对齐：  top  middle  bottom

Ø  文字顶底对齐text-top  text-bottom

Ø  上下标没什么用：sup  sub

middle 不定尺寸图片或多行文字的垂直居中

1、主体元素inline-block化；display：inline-black/black；切换为块或内联块

2、设置一个宽度0高度100%的空辅助元素

3、vertical-align:middle

3、更加清楚的认识了解了弹性盒子

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，它有两条轴分别是横轴(默认轴)（main axis）和竖轴（cross axis）

声明display: flex; 就成了弹性容器，弹性盒子可以嵌套

父级六个属性

Ø  flex-direction决定排列的方向（切换主轴）

父级{flex-direction: row(横) | row-reverse(反向) | column(竖) | column-reverse; }

Ø  flex-wrap 决定折行，

父级{flex-wrap: nowrap(不折行默认值) | wrap(折) | wrap-reverse(反向折); }

Ø  flex-flow上边两个元素的组合，基本用不到

父级{flex-flow：元素1属性  元素2属性}

Ø  justify-content 决定横轴对齐方式（最终结果和flex-direction息息相关）

父级{justify-content: flex-start | flex-end| center| space-between| space-around; }

flex-start（默认值）：首；

flex-end：尾；

center： 居中；

space-between：两端对齐；

space-around：手拉手两端对齐。

Ø  align-items决定竖轴对齐方式（最终结果和flex-direction息息相关）

父级{ align-items: flex-start | flex-end | center | baseline | stretch;}

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

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

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。(设置flex-direction: column时不生效)

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度(子级侧边有其他元素时不生效)。

Ø  align-content决定多根轴的对齐方式（只有一根轴线，不起作用。以多行作为整体进行对齐）

父级{align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

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

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

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

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

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

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

子级属性

Ø  order(定义项目的排列顺序。数值越小，排列越靠前，默认为0。)

子级{ order: 数值;}

Ø  flex-grow(定义项目的放大比例，空间剩余放大，默认为0不放大)

子级1{ flex-grow:数值; } 最终放大按照占的份额变化

Ø  flex-shrink(定义项目的缩小比例，空间不足缩小，默认为1)

子级{ flex-shrink : 数值; }属性为0不缩小，其他项目都为1，则空间不足时，属性0不缩小。

Ø  flex-basis(沿着主轴设置固定尺寸)

子级{ flex-basis: 长度 | auto;}

0：根据内容撑开

非0：优先级大于width和height

auto：设置了width则元素尺寸由width决定；没有设置则由内容决定

Ø  flex(是flex-grow, flex-shrink 和 flex-basis的简写，后两个属性可选。)

子级{ flex: 1 1 auto }两个默认属性，可自定义

flex: 1 = flex: 1 1 0 // 缩放都为1，尺寸根据内容撑开

flex: 2 = flex: 2 1 0 // 缩1放2，尺寸根据内容撑开

flex: auto = flex: 1 1 auto; // 缩放都为1，不伸缩

flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩

Ø  align-self单(个项目有与其他项目不一样的对齐方式，可覆盖align-items属性)

默认值为auto，表示继承父元素的align-items属性，其他都与align-items属性完全一致