在HTML4中，通常人们习惯使用CSS+DIV进行整体布局，但是在HTML5中新增了很多结构标签，有<header>，<footer>,<nav>等。下面我们将介绍使用新的标签进行整体布局。
整体布局在网页设计中是最基本的，掌握好整体布局有助于后续的学习。
符合W3C规范的html5页面的结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>未命名文档</title>
</head>
<body>
......页面内容部分
</body>
</html>
网页的盒子模型
其实网页由一个个盒子拼凑和叠加出来的，之就是网页的盒子模型。
把上面的网页简化，得到一个基本的网页结构图
这就是上面网页的基本的网页结构，由四个盒子组成，其中header盒子里还可以叠加nav（导航）盒子和logo盒子。其他的盒子里可以叠加许多盒子，来达到不同效果。
盒子模型的基本属性
- margin（外边距）
- border（边框）
- padding（内边距）
上面的三个基本属性都有上、右、下、左四个方向的子属性，如：margin-top、margin-right、margin-left、margin-bottom；基本属性主要用来定位盒子和控制盒子的规格。
下面是各属性的示意图，第一张看起来比较抽象，但比较详细，第二张很容易理解。
由第一张的示意图，我们可以看出，一个content在网页中实际占用尺寸为
- s-width = width + padding-left + padding-right + border-left + border-left
- s-height = height + padding-top + padding-bottom + border-top + border-bottom
下面是盒子模型的层次结构（3D结构示意图）
第1层：盒子的边框(border)，
第2层：元素的内容(content)、内边距(padding)
第3层：背景图(background-image)
第4层：背景色(background-color)
第5层：盒子的外边距(margin)
HTML5新增的布局结构标签
在以前的HTML规则中，布局大多采用DIV + id 的方式，而在html5中新增了很多结构标签，下面是可以用来布局的标签的简单介绍：
- <header> 定义一个页面或一个区域的头部。
- <footer> 定义一个页面或一个区域的页脚。可包含文档的作者姓名、创作日期或者联系信息。
- <nav> 定义导航链接。（注：如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。）
- <article> 定义独立的内容，如论坛帖子、报纸文章、博客条目、用户评论等内容。
- <section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
- <aside> 定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容。
注意：上面的标签支持html5的全局属性和事件属性。
传统的布局方式：
HTML5布局方式：
HTML/CSS的三种布局模型
HTML/CSS的三种布局模型
流动模型（Flow）
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型典型的特征：
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
浮动模型
设置元素浮动就可以实现两个块状元素并排显示，下面有详细的介绍，这里就不多说了。
层模型
层模型类似于ps中的图层的概念，但是由于网页的大小是能动态改变的，所以层模型使用的效果并不好，所以这里就不介绍了。
HTML5布局代码分析
我们以实现上面漫漫邮子路的基本网页结构图为例
HTML结构代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<title>mmyzl基本结构图</title>
</head>
<body>
<header>header</header>
<article>main content</article>
<aside>right side</aside>
<footer>footer</footer>
</body>
</html>
CSS样式：
body{
background-color: #CCCCCC; /*设置背景色为淡灰色*/
max-width:1000px; /*设置网页最大宽度，方便下面布局*/
margin:50px auto; /*设置网页顶部离浏览器边缘的距离，其他方向为auto*/
border:3px solid white; /*设置网页的边框为3px厚的实心白色线*/
}
header{
background:white;
margin:50px;
height:200px;
}
article{
background:white;
margin:0px 50px 50px 50px; /*上 右 下 左的外边距分别为0px 50px 50px 50px*/
height:700px;
width:650px ;
float:left; /*设置article盒子向左浮动（关于float属性的详解在下面，需要好好理解）*/
}
aside{
background:white;
height:700px;
margin:0px 50px 50px 0px;
width:200px;
float:right; /*设置aside盒子向右浮动*/
}
footer{
background:white;
margin:50px;
height:150px;
width:900px;
clear:both; /*clear是用来抵抗float属性的，由于上面的两个盒子带有float属性，所以这里需要应用clear属性，否则会发生重叠，可以试着注释本条属性看看*/
}
效果图：
float属性和clear属性
首先说明下CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术。.在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。
其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
那么为什么要使用浮动float属性呢？没有作用float属性的main content盒子和right side盒子是以块元素的方式显示的，这样的显示方式会独自占据一行，如下图（在上面的CSS样式中注释Float属性），要想让他们并排显示，只有对他们分别作用float left和float right属性。
我们把上面HTML代码中footer标签注释掉，效果如下图：
我们把CSS样式中footer里的clear:both属性注释掉，看看效果图：
有关float和clear属性的详细介绍可以查看鸣谢里的两篇博文，这里只对用在整体布局的简单介绍。
鸣谢
感谢上面博文的作者，本文参考或引用了上面博文的内容。
Comments | NOTHING