---

title: 2018-05-25

date: 2018-05-25 11:48

---

------------------------------------------------------今天完成的事------------------------------------------------------

一、完善昨天的任务 4

    参考其他网站的登录框，做了可用性提升：

        1、重定义 input 宽高，使之与父 div 一致，这样更容易选中焦点。

        2、关于 background，按师兄的思路，应在 input 上声明 background。我习惯于绘图软件的图层概念，起初就将背景赋予了父元素。而声明在 input 上应该更有利于 css 代码复用。

        3、试用了 text-indent 控制 input 框输入内容和 placeholder 的缩进。

        4、将登陆按钮区域设到整个蓝色区域的 div 上，好点击。

    成果链接

    https://masterfish.github.io/learn/task4.html

二、学习任务 5 的系列知识

    1、关于 flex 布局。参考了阮一峰老师文章《Flex 布局教程》

    2、阅读了《CSS代码规范》

三、完成了任务 5

    成果链接

    https://masterfish.github.io/learn/task5.html

------------------------------------------------------遇到的问题------------------------------------------------------

    1、flex 布局是全新的概念，还需要很多练习才能掌握。

    2、现在是否需要掌握选择器的正则表达式语法？

    3、遇到复杂内容的时候，如果给每个标签都加上class，就会非常繁琐。代码规范似乎没有提供一种思路，有助于处理复杂HTML元素。

    4、没有完全理解将line-height设为父元素高度后使文本垂直方向居中的原理。

    5、目前在做的任务5中，如下图所示，两条辅助线之间存在7px误差，误差与fontsize有相关性，为什么？

------------------------------------------------------今天的收获------------------------------------------------------

    1、试用了flex，能直观地解决垂直对齐问题。

    2、掌握基本的选择器：

        后代选择器X Y 

        相邻 x的一个 y 元素选择器X + Y

        子选择器 X > Y

        相邻 x的所有 y 元素选择器 X ~ Y

    3、尽可能采用了规范建议的属性类别书写顺序：布局方式——尺寸——文本——视觉效果

    4、最简单的使文本垂直方向居中的方式是将line-height设为父元素高度。

    5、把sublime的tab指定为了四个空格，以符合规范

    6、一个细节：声明了display:inline-block的<span>，无法像真正的块级元素如<div>一样，撑开它的父元素。在写高度可变的「自我介绍」的时候遇到了这个问题。

    7、header要用z-index提升图层顺序，否则会被后面的元素覆盖。

    8、vertical-align声明是用来设置行框内元素的水平对齐方式，非常有用。