前端重要知识总结

概述

长期以来，对于一个比较偏向于后台码农来说，对前端的种种技术一直是又爱又恨，爱是因为其中的很多技术，如JavaScript、jquery、ajax、css等，非常有趣，代码码起来很舒服，尤其对于javascript，我想每一个写代码的人或多或少都知道或者都想知道这个技术，当然其语法比较简单，但是当我们用它去解决前端中的种种问题时，它有十分的强大，甚至用一些后台javascript技术都能完成一个网站的建设，如比较流行的MEAN架构，就是一个全javascript的框架技术。恨是是因为前端技术琐碎，要求每个程序员对各种美以及不美的事物有一定的想象能力，有一定的鉴别能力，这往往对于一些偏重后台技术的程序员来说简直是不可能的，我们写代码基本不要那种奇怪的审美，所谓的好看与不好看再我们看来都是好看的。出于这样的原因，经过了长达半个月的积累准备，我决定对前端的一些常用知识进行总结，一方面是对自己一段时间使用的总结，另外一方面希望能对一些专注于后台的程序员一些启发。如有问题请大家批评指正，毕竟对于同一个问题每个人的想法和理解是不同的。

标签的使用

HTML 5 一直在强调标签代表的是这个元素的语义，在代码的书写过程中，我们就需要去仔细的判断选择HTML的标签，比如在一个网站的导航条中都有该网站的鲜明的logo，很多人知道，logo就是一个img标签包裹的图片，但是反过来我们想，logo的语义究竟是什么？这个问题可能需要我们明白，一个网站在选择其logo时考虑了什么问题？我想他们考虑的最多的问题是：首先logo是对自己公司的总结，其次logo是对自己公司业务的一个极为重要的表示，最后logo才是一张设计好的图片，那么出于这样的考虑，可能我们采用下面的标签去表示一个logo或许会更加的好：

当然如果你的logo不具有标题的语义，那么我们也可以使用p标签去包裹img标签，需要明白的是logo的语义绝对不仅仅是img那么简单。

标签的选择会决定整个页面的语义，一定要明确这个问题。

浮动

浮动可以说在整个网站的布局过程中起到了非常重要的作用，可以说，整个HTML的标签全部都是块级元素，我们都知道块级元素是不能发生并排的，如果要让元素并排就必须使用浮动，但是使用浮动说起来简单，一个元素一旦浮动了，那么它就脱离了标准文档流，脱离了标准文档流的元素不仅仅对自己会产生影响，还会对其它的元素产生影响，那么一个元素浮动了，为了保证不对其它的元素产生影响，我应该要做好清除浮动的工作，清除浮动一般用以下的几种方法：

一个设置了高度的元素，不管其是否发生浮动，都不会影响到其它元素的使用

<h3><a href="#"><img src="图片"></img></a></h3>  <!--首先logo是一个标题的语义，其次我们希望在点击logo是会发生一些跳转，那么其就是一个超级链接，最后才是img标签-->

一个元素一旦浮动，其padding和margin就不能设定了，采用隔墙法，我们可以用墙本身的高来实现padding和margin效果

清除其它元素(重要是指浮动元素)的对我自身的一切影响，所以在一个已经发生了浮动的元素之后写的其它的元素，都要使用clear:both去清除浮动，一般也不常使用。

常用，其本质的含义是，当一个元素发生溢出时，溢出的部分就会被隐藏，但是前段工程师们发生，使用overflow:hidden 不仅仅可以清除浮动，还可以使得margin、padding起作用，也是一个必须知道的技巧。

前半部分说了：为什么要使用浮动以及清除浮动的方法，接下来我想说说我对为什么要清除浮动的理解。

一个元素浮动了不要紧，但是在一个网站的建设中，不可能只有一个元素发生浮动，那么就会发生另外一个浮动的元素去追前面已经浮动了的元素。

盒子

在HTML中任何的元素都可以是块级元素，可以通过display进行转换，任何的元素都是盒子，对于盒子这种老生常谈的问题我不想多说，唯一想介绍的一种方法是我们可以通过fw软件精确获取元素的各种参数，从而实现盒子的精确还原，平时要多做盒子“精确还原”的练习。

居中

在确定一个网页的版心时，我们通常会采用各式各样的居中技术，使得整个网页的版心居中，一定要注意：这种版心的居中不是靠左右的padding或者margin得到的，本质上这是居中，很多前端工程师的代码写出来，感觉是居中的，但是一看其代码，竟然是一像素一像素的使用padding或者margin挤出来，虽然我们常说挤挤总会有的，但是这。。。

margin: 0 auto

height: 10px;
text-align: center;
line-height: 10px;

这是最简单的居中方法，还有其它的，自行google解决，我一般只简单的使用这种方法。

总结

写前端真正体现了我们小时候作文老师经常说的一句话“天下文章一大抄，看你会抄不会抄”，看起来像不是我们的目的，精确的还原每一个盒子才是重点。