一、布局回顾
布局从无到有经历了几个阶段:
1)无布局:html和web的出现源于科学文献的交流,当时人们更注重的是文字的传达,这一时期人们注重的是文字、文本的排版,比如说单个文字的粗细、斜体,段落、标题、列表如何排列等等。
2)Table布局:最基本的就是行与列,我们首先要考虑的是Table布局有多少行,然后列数最多的行有多少列,所有的行都有最多的列数。Table布局有两个问题:
- 行列合并:不管怎么合并,同一列上的内容宽度基本上都是一致的,无法有错落相交的感觉
- 表格嵌套:整体页面的复杂度会变高,不好控制
3)框架布局:分为框架集和内联框架。
框架集,即frame、frameset已经在h5的时代被淘汰了,因为它需要在框架内部嵌入新的网页,它对资源的消耗非常大。比如,做一个上左右的框架结构,我们需要嵌套三个网页,加上整体的网页,我们需要四个网页。
内联框架现在还无法逃脱,即iframe。
4)DIV+CSS:在栅格系统出现之前,出现了很多布局,比如blueprint、960gird,但是它没有考虑移动设备的应用。
5)栅格系统:以bootstrap、ElementUI为代表,提出了移动设备优先(Mobile First)、响应式布局(Responsive,根据不同的分辨率改变自己的样式),但是它们有一些共同的特点:
- 它们通过浮动进行布局,一个行可以把多个div横着排起来,它会带来一些影响,而且复杂度也会变高
6)Flex:弹性盒子
在这个过程中,有些技术一直在使用,一方面是浮动,一方面是定位。定位中的常用技术有:
- relative:相对定位
- absolute:绝对定位
- fixed:固定的
我们常用的布局有两栏或三栏自适应、圣杯布局、垂直水平方向都居中
做一个布局的举例,这个布局倾向于局部布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form布局</title>
<link rel="stylesheet" href="../../../../plugin/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-5">
<div class="input-group">
<span class="input-group-addon">编号</span>
<input class="form-control"/>
</div>
</div>
<div class="col-md-5">
<div class="input-group">
<span class="input-group-addon">姓名</span>
<input class="form-control"/>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-1">编号</label>
<div class="col-md-4">
<input class="form-control"/>
</div>
<label class="control-label col-md-1">姓名</label>
<div class="col-md-4">
<input class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="control-labe