欣欣说我的html代码太长，可以用类，在网上找了一下，原来全名叫类选择器，除了类选择器，还有元素选择器，可以直接作用在html元素上。赶紧来试一试，把上节的例子重写一下吧。
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>盒子模型</title>
<style>
body {
background-color: #F9F9F9;
}
.outDiv {
width: 1120px;
height: 2200px;
background-color: #FFFFFF; margin: 0px auto;
}
.topDiv {
width: 1100px;
height: 90px;
margin: 0px auto;
}
.logoDiv {
width: 370px;
height: 90px;
background-color: #BEBEBE;
float: left;
}
.adDiv {
width: 730px;
height: 90px;
background-color: #0C5A8D;
float: left;
}
.navDiv {
width: 1100px;
height: 55px;
background-color: #FFFFFF;
margin: 0px auto;
}
.midDiv {
width: 1100px;
height: 2000px;
background-color: #FFFFFF;
margin: 0px auto;
}
.borderDiv {
width: 180px;
height: 2000px;
background-color: #EFEFEF;
float: left;
}
.torDiv {
width: 740px;
height: 2000px;
ackground-color: #FFFFFF;
float: left;
}
.bottomDiv {
width: 1100px;
height: 55px;
background-color: #B6B6B6;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="outDiv">
<div class="topDiv">
<div class="logoDiv">W3School</div>
<div class="adDiv">广告</div>
</div>
<div class="navDiv">导航栏</div>
<div class="midDiv">
<div class="borderDiv">课程表</div>
<div class="torDiv">教程</div>
<div class="borderDiv">工具箱</div>
</div>
<div class="bottomDiv">尾部栏</div>
</div>
</body>
check the result
这样看起来果然html代码清爽多了，div通过类选择器来指定样式，body的样式则是通过元素选择器来指定的。值得注意的是：1、样式都是写在style标签中，这个标签是放在head里面的；2、类选择器定义的时候前面以点开头，引用的时候用class，不需要加点哦；3、元素选择器前面不需要加点，也不需要引用。这部分知识还挺深的，以后再研究吧，不然就本末倒置了。
来看看重点：盒子模型。其实在W3School中就有介绍，在这里，看完这个我就彻底明白了，原来我们设置div的width和height，只是最内部的，还有内边距padding和外边距margin，还可以通过border设置边框，来个例子试试：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>盒子模型</title>
<style>
body {
margin : 0px;
padding : 0px;
}
.box {
width : 100px;
height : 100px;
background-color : blue;
padding : 10px;
border : 10px solid red;
margin : 20px;
}
</style>
</head>
<body>
<div class="box">内部文字</div>
</body>
check the result
这可是一个不折不扣的盒子，可以看到，由于margin的存在，盒子离浏览器边界有距离，由于padding的存在，内部文字与边框也隔了一定距离。在例子中有两点要注意，一是把body的margin和padding设为0了，这是因为body默认是有padding的，如果你细心的话，就会发现，上节的例子中，div并没有贴着浏览器，这就是最好的证据；二是border的设置，一次用了三个样式，这种方法还是第一次见吧。
这个例子是比较重要的，一定要反复琢磨，可以把其中一些样式去掉，再看看效果来理解。
盒子模型和float结合起来，就可以做出一个排列，来看个小例子：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>盒子模型</title>
<style>
.outDiv {
width : 360px;
height : 360px;
background-color : pink;
}
.box {
width : 100px;
height : 100px;
margin : 10px;
float : left;
background-color : blue;
}
</style>
</head>
<body>
<div class="outDiv">
<div class="box">内部文字</div>
<div class="box">内部文字</div>
<div class="box">内部文字</div>
<div class="box">内部文字</div>
<div class="box">内部文字</div>
<div class="box">内部文字</div>
<div class="box">内部文字</div>
<div class="box">内部文字</div>
<div class="box">内部文字</div>
</div>
</body>
check the result
怎样？九个小盒子均匀地分布在一个大盒子里面，这里面的margin和width、height之间的关系，能看出来的话就说明这节搞懂了。
我明白盒子模型的意义了，很多网页上都有一块一块的区域，这些都是盒子模型的应用吧，看来这节真的很重要啊！
，不要超过100元哦！