[深圳|结业弟子]JS-陈皓宇|2018年05月23日的日报-技能树.IT修真院

发表于： 2018-05-23 23:05:21

1 578

今天完成的事：

1、任务10写了三分之一。

明天的计划：

1、主要是准备一下后天的小课堂；

2、任务10写一下；

遇到的困难：

1、为何伪类：visited对button无效？？我对button设置了buttion:visited{...}；并没有效果...，网上找了挺多的，并没有正面回答的答案，难道说是button本身并不存在visited事件，而是onclick事件？？

2、任务中碰到了很多次inline-block间隙的问题；其根本原因是因为默认的font-size不为0的情况下，我们书写规范代码的时候，运用换行，换行符占位导致；消除办法挺多的，我在任务中是设置父类的font-size:0;子类重新复写font-size 的办法消除。

收获：

1、学习focus选择器：
:focus 选择器用于选取获得焦点的元素。
提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。
有点类似于：visited的效果，任务的时候我用它代替了visited。
2、发现自己对flex并不是很熟练..复习了一下；
3、消除inline-block间隙的办法,网上找了个汇总：
a、 在父元素中设置font-size: 0，然后在子元素上重置正确的font-size。
缺点：inline-block元素必须设定字体，不然行内元素中的字体不不显示。
b、使用margin-right负值
缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。
注意：当marigin-right使用相对单位em来表示时，Chrome下可以正常去除间距,而Firefox下元素之间有重叠。
c、为inline-block元素添加样式float:left
d、使用display:table和word-spacing（最优的方法）
.box{
    display:table;  /* 调教webkit*/
    word-spacing:-1em;/*其他浏览器*/
}
e、使用letter-spacing
优点：因为使用了letter-spacing相对单位em表示距离，所以不需要根据字体大小改变代码来去除元素间距。
.box{
     letter-spacing: -0.5em;
}
.box div{
     letter-spacing: 0;
}
f、使用word-spacing
优点：因为使用了word-spacing相对单位em表示距离，所以不需要根据字体大小改变代码来去除元素间距。
.box{
   word-spacing: -0.5em;
}