一步步实现静态页面布局
本文内容概要：
1 CSS选择器
2 盒模型
3 浮动
4 页面布局案例
5 课后习题
上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布局操作，那本周的这篇文章我们主要与大家分享的是如何去实现我们网页的布局，这也是作为前端的我们需要做的第一个大操作——实现网站的页面布局。本文主要讲解CSS的基本选择器、盒模型、浮动等知识点，并会提供一个布局案例来给大家做参考。
在上周，在文章的最后给大家留了一个网页结构的案例，通过使用讲解的所有标签来书写了一个页面，可是在那个页面里面，我们只能看到最初始的一些默认样式，倘若这时候我们需要给不同的标签、不同的段落使用不同的字体或者颜色，我们应该怎么去处理？首先我们考虑如何去写之前要考虑的一点是，我怎么准确无误的找到我需要改变的标签，那这时候我们需要借助一个手段来找到目标标签了——CSS选择器。
一、CSS选择器
到底什么是CSS选择器，了解它之前我们先来看看他的语法是怎么样的。代码如下：
.wrap {
width: 100px;
}
<div class="wrap"></div>代码解释：选择器后面加一对大括号，在大括号内设置样式属性与属性值。其中选择器通常是需要改变的HTML元素，每条声明由一个属性和一个属性值组成，且每个属性有一个值。属性与属性值用冒号分开，分号结束。
了解它的书写语法之后，通俗的理解选择器就是用来辅助我们查找页面中需要处理的标签的。那今天我们主要给大家介绍的是常见的三种选择器：ID选择器、类名选择器、标签名选择器。下面我们一个个来做一个了解。
1 ID选择器
在页面中唯一存在，好比我们的身份证号码，需要我们人为的定义，且优先级最高。
基本语法：#ID名 { }。
具体例子：
#wrap {
width: 1200px;
border-top: 10px solid #000;
}
<div id="wrap"></div>代码解释：id是div的属性，而wrap是id的属性值。Id相当于身份证，而wrap就是相当于身份证号码。
2 类名选择器
在页面中可以多次出现，有一个范围，比如一个班级编号，也需要我们自己去定义。
基本语法：.类名 { }。
具体例子：
.wrap {
width: 1200px;
border-top: 10px solid #000;
}
<div class="wrap"></div>
<div class="wrap"></div>代码解释：class是div所在的班级，而wrap是这个班级的编号，而一个页面中多次使用班级编号就好比多个人在报备自己的班级一样。
3 标签名选择器
直接使用标签的名字做选择器，不需要定义，但是选择范围太大，不建议使用。
基本语法：标签名 { }。
具体例子：
div {
width: 1200px;
border-top: 10px solid #000;
}
<div></div>代码解释：标签选择器就像人的性别一样，是与生俱来的特性。
二、盒模型
了解了我们页面布局上常使用的三种基本标签之后，我们已经可以找到需要做改变的标签了，但是具体我需要改什么，要怎么去改我们还是一无所知。
举个例子，大家在生活中会见到很多不同的三维立体物体，比如一个箱子，一个球。当我们想要知道这个物品的大小、宽高的时候都会去做一个测量。一样的，我们页面中的每一个标签也都是有宽高的，当然除了宽（width）、高（height）以外，我们的标签还具有几个属性，那就是外边距（margin）、边框（border）、内边距（padding）。这几个属性加上我们的宽、高就构成了要给大家讲解的第二大点——盒模型。
所谓的盒模型其实不难理解，举个例子：一个盒模型就相当于你从网上买鱼缸，鱼缸就是实质内容，width和height就是鱼缸的宽度与高度，而纸箱跟鱼缸之间的会使用泡沫来防止损坏，这个泡沫就是内边距（padding），外包纸箱的厚度是边框（border），在运输快递的过程中，纸箱跟纸箱之间的那个距离就是我们所说的外边距（margin）。具体这5个属性我们需要怎么去使用，一起来看看。
1 宽（width）和高（height）
宽高是设置内容区域的大小。
代码例子：
<style>
.wrap {
width: 600px;
height: 800px;
}
</style>
<div class="wrap"></div>代码解释：定义一个类名为wrap的div的宽度是600像素，高度是800像素。
2 边框（border）
边框的分开书写的方式：
border-width表示边框的粗细
border-style表示边框的样式
border-color表示边框的颜色
例如：1像素实线红色边框
<style>
.wrap {
border-width: 1px; // 边框大小1像素
border-style: solid; // 实线边框
border-color: red; // 边框颜色为红色
}
</style>
<div class="wrap">HTML5学堂</div>边框有四个方向，如果想要给某一个方向单独设置的了话，可以使用border-top|border-right|border-bottom|border-left。除此你也可以使用border同时对四个方向的边框一起设置样式。
例如：左侧边框3像素实线蓝色
<style>
.wrap {
border: 3px solid blue;
}
</style>
<div class="wrap">HTML5学堂</div>3 内边距（padding）
内边距是内容区与边框之间的距离。
padding的缩写方式：
// 表示四个方向的padding值都为10px；
padding: 10px;
// 第一个值表示上下边距各为10px，第二个值表示左右边距各为20px；
padding: 10px 20px;
// 第一个值表示上边距为10px，第二个值表示左右边距各为20px，第三个值表示下边距为30px；
padding: 10px 20px 30px;
// 表示上边距10px，右边距20px，下边距30px，左边距40px。
padding: 10px 20px 30px 40px; 除了上述的设置方法之外，也可以单独设置：padding-top|padding-right|padding-bottom|padding-left。
4 外边距（margin）
外边距是元素与元素之间的距离。在正常情况下，如果两元素横向排列，两元素之间的距离是两元素之间margin相加之和，如果两元素纵向排列，两元素之间的距离是取两元素之间margin的最大值。
它的书写方式与内边距一样，大家参考上面的内边距书写即可，这里就不再进行叙述了。但是外边距有一个很好用的特性在这里与大家分享一下。
块元素水平居中：
设置块元素的width；添加margin: 0 auto;
详情见案例：
<style>
.wrap {
width: 600px;
margin: 0 auto;
}
</style>
<div class=“wrap">HTML5学堂</div>上周我们讲解了HTML标签，了解到块元素标签在页面中是默认一行展示的，倘若这时候我的页面中需要几个块元素标签并排放置，展示在同一行上，我们要怎么办？这就涉及到我们接下来讲解的东西了，一起来继续学习哈！
三、 浮动
1 什么是浮动
float中文就是指浮动，浮动通常是用在浮动布局上，我们通过CSS定义float让HMTL元素向左或者向右（靠）浮动。
2 为什么要浮动
每个div的特点处于同一行，而布局时常常需要将块并排进行布局，那么此时我们要实现模块并排的布局所以需要浮动。
3 浮动原理
我们就把页面中的一块区域比作水槽。需要浮动的元素比作一块积木。如果给元素（积木）设置了float属性，水槽里就有水了，元素（积木）首先应该向上浮起来。如果设置的是float:left;向左浮动，那么元素（积木）从右边向上浮起来到水面，然后向左浮动到水槽的左边。如果给元素设置的是float：right；向右浮动，那么元素先从左边浮起到水面，然后向右浮动到水槽的右边。以此类推。都是按照这种规律，不管有几个元素。
4 浮动基本语法
float有四个属性值，none、left、right。none指不浮动，left指元素左浮动，right指元素右浮动。
5 如何浮动
将我们需要的块设置float属性，如以下代码:
<style>
.wrap div {
float: left; //设置div向左边浮动，实现两个div并排展示
width: 100px;
height: 100px;
background: #ccf;
}
</style>
<div class="wrap">
<div></div>
<div></div>
</div>四、案例介绍
学习完今天的几大类知识点后，我们可能都有了一个大致的了解，但是真实的页面布局操作到底是怎样的，我们通过下面的这个案例再来一起回顾一下吧。具体的案例代码可以到文章末尾获取。
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<title>HTML5Course</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<style>
.wrap {
height: 1200px;
width: 1250px;
}
.test {
float: left;
width: 250px;
height: 220px;
}
.test6 {
float: left;
width: 850px;
height: 300px;
}
.test7 {
float: right;
width: 400px;
height: 400px;
}
.test8 {
float: left;
width: 300px;
height: 350px;
}
.test9 {
float: left;
width: 550px;
height: 350px;
}
.test10 {
float: right;
width: 400px;
height: 400px;
}
.test11 {
float: left;
width: 850px;
height: 150px;
}
.test12 {
float: left;
width: 1250px;
height: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<!-- 此处的style="background: #feccff"只是用来设置背景色的 -->
<div class="test" style="background: #feccff"></div>
<div class="test" style="background: #999999"></div>
<div class="test" style="background: #ffcccb"></div>
<div class="test" style="background: #ccccff"></div>
<div class="test" style="background: #fe0000"></div>
<div class="test6" style="background: #01cc00"></div>
<div class="test7" style="background: #0000fe"></div>
<div class="test8" style="background: #feccff"></div>
<div class="test9" style="background: #ffcc00"></div>
<div class="test10" style="background: #fe0000"></div>
<div class="test11" style="background: #999999"></div>
<div class="test12" style="background: #feccff"></div>
</div>
</body>
</html>代码的展示效果：
五、课后作业
使用今天所学的知识点完成下图的布局：
PS：关于课程案例的代码，如果需要下载可以前往GitHub：https://github.com/iceswan/htmlDemo