前端知识体系之入门篇总结（一）

      利用国庆节时间，把前端学习的知识碎片进行了整理，但愿能在前端之路继续努力。

前端是一个范围很大的概念，其领域包括在了计算系统中的方方面面，能够说全部与用户交互行为相关的程序开发工做都是前端的范围，这包括一个数字仪表的显示设计或者一个手机APP。一般意义上讲，前端指的是Web前端的开发工做，而学习前端也是从Web前端知识开始的。

这篇blog面向对前端没有入门或者已经有必定的网页编码技术但对于前端知识体系没有一个清晰条理的开发者，其要旨是整理一个普通网页开发过程当中所能用到的知识点。与其它相似的教程不一样，本文不对HTML、CSS、JavaScript进行分开讲解，而是以一个网页的制做周期为蓝本，描述前端开发者在每个环节中涉及到的知识体系结构，方便你们学而能用。

1. 布局方式与布局技巧

咱们的知识体系从页面布局开始。现代网页一般由布局单元组成，而布局单元的不一样排布方式也就决定了不一样的页面布局方式，所以咱们先来理解一下什么是布局单元。

一般来说，布局单元是指可以完成独立功能的一个页面的局部，好比：标题(header)、导航栏(nav)、一篇文章(article)、一个表单(form)或者是一个新闻列表，对布局单元进行分割会形成内部元素的语义不完整，甚至是没法理解。

HTML5添加了大量的标签用于区分不一样的布局单元，这包括：

article	标记定义一篇文章
header	标记定义导航连接
nav	标记定义导航连接
section	标记定义一个区域
aside	标记定义页面内容部分的侧边栏
hgroup	标记定义文件中一个区块的相关信息
figure	标记定义一组媒体内容以及它们的标题
footer	标记定义一个页面或一个区域的底部
dialog	标记定义一个对话框(会话框)相似微信

而在不支持HTML5的浏览器中，咱们能够简单的使用一个div代替它们，而不会产生其它的影响，在CSS的默认行为方面，它们与div相同。

从页面的展示角度咱们能够简单的把页面的布局方式分红如下几种，可是这并非绝对的，不一样的方式可能在页面中同时出现。

1.1. 流布局

流布局，即文档流布局，目前绝大多数的网页都是流布局的。不过目前尚未任何官方给出流布局的准肯定义，个人理解是：页面主体内容定宽，而且定高或者高度自适应的布局，页面的布局结构不随页面的大小变化而发生变化。

流布局有以下特色：

1. 全部的布局单元层次明显；
2. 绝对定位的布局单元大小固定而且一般出如今body中；
3. 经过状况下会使用清除浮动。

在进行流布局页面的开发时，咱们可使用有限的水平或者竖直直线进行切割，利用块级元素的特性区分行，利用浮动和清除浮动来区分列（关于这部分请详细参考1.2 多列布局）

补充说明：

基于文档流, 咱们能够很容易理解如下的定位模式:

 

浮动元素不占任何正常文档流空间，而浮动元素的定位仍是基于正常的文档流，而后从文档流中抽出并尽量远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其余元素将忽略该元素并填补他原先的空间。同一行的行内元素会受到浮动的影响，而块级元素则不会。

另外咱们常常遇到的一个疑问：脱离文档流是否是指该元素从DOM树中脱离？

不是，用浏览器的审查元素就能够看到脱离文档流的元素（例如被float了）依然会出如今DOM树里。

形象地解释为：有户口，没有地，依然是本国公民。

1.2. 分栏布局

分栏布局是流布局的一种特例，现代网页因为屏幕愈来愈宽，一般都不是一列，而是多列。一般状况下，分栏是使用浮动实现的，但随着列的数量和内容变化的增长，咱们有了不少新的技术和浏览器接口来实现分栏效果，这一部分咱们就来详细的讲解一下分栏的一些方式与方法：

1.2.1.   两列布局（两列定宽）

 

这种状况下咱们能够考虑两列都浮动而后对外层进行浮动闭合。

 

1.2.2.   两列布局（一列定宽一列自适应）

 

这种状况下咱们能够对一列进行浮动，而另外一列设置与浮动大小相同的margin-left，而后对外层进行浮动闭合。

1.2.3.   三列布局（两边定宽中间自适应）

这种状况咱们能够两列进行浮动，而后一列自适应的方式来实现，但浮动元素必须写在非浮动元素的前面。

 

1.2.4.   使用绝对定位代替浮动

咱们也可使用绝对定位代替浮动来进行分栏，可是这必须保证非绝对定位元素的高度要大于绝对定位元素，否则会出现塌陷。

1.2.5.   使用负margin来实现页面布局

负margin是浏览器提供的一种改变元素位置的方式，它可使元素发生层叠并改变元素在文档流中的实际大小。

static元素设置负margin：

  未定宽元素的负margin

定位元素的负margin  （案例：居中布局）

 

浮动元素的负margin

 

使用负margin能够很方便的实现多列布局，如：

1.两列布局（一列定宽一列自适应）

 

2.三列布局（双飞翼布局）

 

3.三列布局（圣杯布局）

4.等高布局

1.2.6.   瀑布流（多列）布局

一般状况下，多列布局也叫瀑布流布局，目前不少网站都使用瀑布流布局对布局单元进行展现，而实现瀑布流一样也有不少方案，下边逐一进行介绍。

方案一：多列浮动

 

 

使用这种方式的优势是布局简单、不用指定列内元素的高度、自动撑开，但一样会有列数固定，不易增长或删除，数据没法按顺序加载的问题。

方案2：绝对定位

使用这种方式的优势scroll和resize时方便添加数据内容，但须要知道列内数据块的高度，同时会在resize时产生性能问题。

方案三：利用CSS3

这种方式使用方便，直接定义CSS便可，数据能够按顺序加载，resize时自动根据尺寸自动重排。可是目前支持的浏览器比较少，并且其排布方式与常规瀑布流不一样，可能截断单个区块内容。

 

1.3.  全屏布局

一般用在管理系统或者一些模拟原生应用的场景中。元素非流布局，以角或者边为锚点，没有必定结构的布局,屏幕老是被占满。在实现过程当中，有如下几种方式：

1.3.1.   表格布局（内部元素可肯定高度）

整个页面为一个表格，经过给行列设置合适的数值来知足显示效果。

代码实现：

<table height="100%" width="100%" cellpadding="0" cellspacing="0">
<tr height="120">    
            <td id="header" colspan="2" style="background:red;"></td>
        </tr>
        <tr>
             <td id="aside" width="200" style="background:yellow;"></td>
             <td id="main" style="background:green;"></td>
        </tr>
        <tr height="80">
            <td id="footer" colspan="2" style="background:blue;"></td>
        </tr>
    </table>

能够兼容到IE8，若是要兼容IE67须要用JS计算中间一行的高度，或者用内容将中间一行天然撑开。这种方法因为会破坏页面的语义化，适合于管理系统等对SEO要求不高的系统软件，或者是非登陆状态下没法使用的软件。

1.3.2.   绝对定位

将页面是的每个元素都使用绝对定位，分别参考不一样的锚点，代码以下：

（兼容ie7+，IE6兼容方面须要用JS处理。）

    <style>
#header{
  height:120px;
  width:100%;
  background:red;
  position:absolute;
}    
#aside{
  width:200px;
  background:yellow;
  position:absolute;
  top:120px;
  bottom:80px;
}
#main{
  background:green;
  position:absolute;
  top:120px;
  bottom:80px;
  left:200px;
  right:0;
}
#footer{
  height:80px;
  width:100%;
  background:blue;
  position:absolute;
  bottom:0;
}
</style>

<div id="header"></div>
      <div id="aside">nihao</div>
      <div id="main"></div>
      <div id="footer"></div>
能够兼容到IE7，若是要兼容到IE6，须要动态计算main元素的宽高，不过相对来讲语义化的程度要好不少，main元素能够比较方便的用iframe。

1.4.                 响应式布局：

响应式布局的实现主要是依赖于CSS3提供的media query，下表列出了全部目前被支持的media query

对不一样设备支持：

对Retina支持

使用响应式布局可让页面有更多的适用性，可是开发成本高，页面加载时间长，相对来讲更适合于功能性不强的页面。