今天完成的任务

a.任务5的完善；验收：

1.还原设计图：头部底部固定在屏幕上方和下方（完成）

2.扩展性：按钮不使用图片（完成）

3.自适应：适配主流手机屏幕（完成)

4.兼容性：使用其他浏览器如firefox、IE10+等查看保证展示效果一致(完成）

b.日志6.13-6.15的复习

c.拓展知识(没有学到拓展知识，都是前面知识的温习和回顾)

明天的计划

a.任务6的执行

b.日报6.16-6.20日报的复习

c.flex的使用

遇到的问题

今天再次琢磨上次的根元素html的625%的布局问题：终于发现了出现这个问题的主要原因是因为父元素的font-size没有设置，所以默认值是根据根元素625%，所以顺带着默认行高变大， 在没有(包含子元素)文字的父元素上设置font-size= 0；有文字的父元素把font-size设置成子元素文字大小就可以解决这个问题.

收获(深度思考)

css可以绘制哪些常见的特殊形状？

用border和radius可以简单制作：原型；圆环；三角形；钻石；椭圆这些图形。 最多可以制作40多个（后面太复杂了，先记录着，还没亲自动手制作）参考资料:https://blog.csdn.net/qq_36699230/article/details/80086195

https://www.bbsmax.com/A/A2dmamLbde/

如何理解vertical-align与line-height？

line-height:

定义：设置块级元素行间间隔，行高。

属性 ：normal 浏览器自动设置合理的行高，该属性在浏览器中默认是1-1.2，行高可以继承，但是1-1.2的行高倍数会导致阅读不畅； length : 设置固定的行高  px em ，由于行高的继承性，此种方法设置行高最为不理想，因为很可能出现子元素字体如果设置大了，字体会出现覆盖现象;  number :设置数字值，行高等于字体大小与该数字值的乘积 ，数值的继承性则是先继承数字，然后在求出； %  设置百分比，百分比继承的时候，会继承父元素求出来的line-height值，以px,为单位继承下去。

line-height,line-boxes,inline-boxes,height之间的关系：height 和 line-height都可以设置元素的高度，如果没有设置元素的高度，此时，元素的的高度由line-height撑开；line-boxes会取所有inline-boxes的最大值，然后给到他的老大height高度。

对于块级元素，其高度是由line-height撑开的，而并不是文字内容。

对于行内元素，其高度只能由内容撑开。

vertical-align

定义：该属性定义行内元素的基线相对于其所在行的基线垂直对齐。可以设置数值和百分数，长度值为负的时候代表，相对于基线向下移动。

属性：top  使元素的顶部对齐其所在父元素的line-box顶端 

bottom 使元素的底部对齐其所在父元素的line-box的底部

text-top 使元素的顶端对齐父元素内容区顶部。

text-bottom 使元素的底部对齐父元素内容区底部。

区别：

line-height一行垂直居中，而vertical-align不管有多少行，都能垂直居中！

当然了，这其中还有的细分点，比如：vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式..

2者关系：笑称基友关系（参考资料：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height）

请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？

emmm,6.13日报里有详细的，我就简单截个图

 适用场景：该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。（目前感觉垂直居中使用它是很惬意的）

title与h1、b与strong、i与em、img的alt与title、src与href有什么区别

title与h1的区别: 

定义：title是网站标题，h1是文章主题

作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的

b与strong,i与em的区别: 

但从视觉上效果观看b与strong、i与em是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

建议：为了符合CSS3的规范，b应尽量少用而改用strong ,i应尽量少用而改用em

img中的alt与title属性区别: 

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方

title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover

src与href的区别: 

href，.是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。 

src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用 

src通常用作“拿取”（引入），href 用作 “连结前往”（引用）

demo: 1.<img src="1.png"> 就是src引入1.png作为img的源文件所在路劲，会显示1.png

2.<a href="1.png"> 就是href引用 1.png，网址会跳转到1.png(不行自己写一下代码）

如何使用IconFont？

参考资料：https://blog.csdn.net/paditang/article/details/70141040

HTML中dl、ul、ol用哪个比较好？

11点多了，明天再思考

拓展知识：

flex总结：