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不是只对后台代码才有效的准则。