[无名弟子]李达|2017年03月03日的日报-技能树.IT修真院

发表于： 2017-03-03 20:46:32

2 667

今日完成的事：

1、修改并提交任务五和六，修改了任务七的一大部分

2、学习了关于inline-block之间的空格以及如何消除

3、学到了新的flex属性，配合vw食用口感更佳

4、观看开学直播

明天计划的事：

1、重构并提交任务七，并学习一下display三种模式的区别

2、开始任务十的学习

遇到的问题：

1、inline-block元素之间有空格，使用调试模式审查元素也没能找到那部分空格是什么

解决方案：查阅资料后发现真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距。

解决思路主要是去掉行间空格，目前发现有以下解决办法：

使用其他方法，诸如margin设为负值，letter-space设为负值，设置字体大小为0等方法比较麻烦，而且有可能影响布局，我个人不太喜欢。

收获：

1.学到了flex布局中的flex属性定义方法

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间， flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。这样就可以更方便的控制弹性盒子内部的项目大小。 注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

值	描述
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。