今天和秋秋一起review了一下我自己写的登录页面。她给我提了几个point，对我很有启发。
css样式的代码和html代码分离。
我自己做的时候是在google console里面调好了样式以后就直接copy到了对应的tag里，而不是在css中通过selector来找到元素后设置样式。
这样的做法我感觉和java代码中同样的函数在个各类中反复出现有些类似。将html和css完全分离开来有几个好处：
逻辑上，看html代码的时候不用关心它对应的样式，而只用关心html的结构；
另外在以后修改的时候，这样的做法就避免了需要到多处去寻找相应的地方修改。例如：我想修改<div class="example">...</div>这个div的样式时，如果我有部分样式是写在html里，有部分写在了css里，甚至我都不确定哪些在html哪些在css里，我就必须检查两个文件。但是若将html和css很明确的分隔开来，修改的时候就省下了不少麻烦。
border设置
在设置border时我是这样做的：
border-style: solid;
border-width: 1px;
border-color: gray;
今天才知道这样就OK了：
border：1px, solid, gray
padding和margin的区别
我想把两个元素之间的间隔距离拉大，使用了padding。但其实更好的做法是使用margin。padding和margin的区别是：
简单的说padding是内容和边框的间隔，而margin是元素和元素之间的间隔。也就是说如果我用了padding来加大元素间的间隔，当元素的背景和大背景相同时确实是达到了效果，但是其实这两个元素的border还是挨在一起的。而当使用margin的时候才真正的将两个元素从border到内容分割了开来。
margin的使用
margin: 10px, 20px, 10px, 20px; ->对应的是上，右，下，左，也就是上下10px，左右20px
margin: 10px, 20px; ->对应：上下，左右，效果同上
margin: 10px, 20px, 30px;->对应：上10px，左右20px，下30px
margin还可以使用auto方法来自动设置，但是使用auto时必须同时给该元素设置width，否则margin并不知道如何进行自动的设置：
margin: 0 auto;
width: 1170px;
这样的效果是：元素宽为1170px，两边的间隔将自动设定。
overflow-hidden的使用
自己实践的时候已经发现了需要使用overflow-hidden来清样式，这样上一层的样式才不会影响到下面的元素的样式。但是我的使用方法是在需要clean flow的地方显示的写出了overflow-hidden。
我认为这样做并没有大的问题，只是这样一来css中增加了很多重复代码。
解决方法是在需要clean flow的tag下加上一个clear-float的class：
/*style.css中*/
.clear-float {
overflow: hidden;
}
/*login.html中*/
<div class="footer clear-float"> …</div>
position的使用
我认为position相对于别的样式来说相对复杂，因为它很难调到自己满意的样子。position使用的时候，将会把当前的元素从context flow里单独拿出来设置样式，这样造成的一个结果就是后面的元素就不会根据html的context flow来为该使用了position的元素留出位置。因此，在使用position的时候一定要记得给元素显示的设置width和height。
postion有三个属性：fixed，relative，absolute。总结来说：
fixed：相对浏览器的位置固定。
relative：相对定位元素会相对于它在正常流中的默认位置偏移。
absolute：相对于static定位以外的第一个父元素进行定位。
总结
以前总觉得html很简单，css很麻烦。其实都错了，html有很深的讲究，实现同样的结构使用的html有好有坏，好的html是结构清晰调理分明的，让人一眼就能明白整体结构和各部分语义。css看起来很复杂，需要不停的调整来达到自己想要的效果，但是其实也有很多的方法需要更多的实践和练习去发现和熟悉。
html和css也需要保持代码的整洁。clean code不是只对后台代码才有效的准则。