Html&CSS 今日心得

今天和秋秋一起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不是只对后台代码才有效的准则。