<div> 教程这节课和上一节课一样，需要大家在这个页面进行改动来体会<div>的用法。
我们已经学过「框模型」了。稍微复习一下，在脑子里过一遍「框」、「内边距」、「边框」、「外边距」分别都是什么东西，有什么对应的设置，看起来是什么样的。然后回忆一下 display 以及 box-sizing 属性的用法。再看看这个HTML 源文件顶端的 CSS，我在里面演示了个很方便的简便写法。如果你还想练习一下，可以给这一段加个 ID，然后随便设置点什么，再看看变化。
<div> 标签我觉得你已经非常熟练加边框、加边距那一套东西了。不过你仔细一想就会发现，局限性还是很大。你只能操作一个特定的元素。你可以给一个标题加上边框，你可以给一个段落加上边框，你却不能给一篇文章加上边框。譬如说下面这一篇。你能不能搞一个大边框，然后把一整篇文章套住？
Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel risus! Consectetur purus ut faucibus pulvinar elementum integer enim neque, volutpat ac tincidunt vitae, semper quis lectus nulla at volutpat diam ut venenatis tellus?
大家能想到的功能，HTML和CSS的设计者肯定已经有所考虑。我们需要用的就是今天会讲解的<div>有关。div是division的缩写，中文含义是“分区”。
如果你想把一个「只能应用于一个元素」的操作应用在多个元素上面，那么很简单嘛，只要把那「多个元素」变成一个元素就可以了。HTML 有提供一个用得非常广泛的标签，叫 <div>，专门用来做这个。它的本质是把多个元素从结构上整合起来，或者说把多个部件抽象成一个整体，相当于人工造了一个新的「框」。用法也很简单，把它套在部件外面就可以了。
练习：把之前那篇文章套上一个 <div>。用 CSS 给整篇文章加上一个边框。
其实你可以用一个 <p> 标签把上面那篇文章括起来，然后给那个 <p> 标签加边框。但是不要那样子弄，不仅仅因为会导致 HTML 的语义不明确，还可能导致各种其他问题，比如你本来只打算用在段落上的 CSS 作用于被包起来的标题上了。
练习：<div> 的强大绝不止如此。既然他能够创造一个新的「框」，那么做个练习，把下面两篇文章并排起来，做个分栏效果。
Erat velit, scelerisque in dictum. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor, at auctor urna nunc. Consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut. Sit amet, porttitor eget dolor morbi. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci! Nisl, condimentum id venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus?
Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices in iaculis nunc sed augue lacus, viverra. Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus et magnis dis! At elementum eu, facilisis sed odio morbi quis commodo odio aenean sed. A molestie lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent.
<<<<<<< HEAD提示：box-sizing。
上节课我们学到了块级元素和行内元素。经过这一节课学习<div>的过程，不知道大家有没有发现，<div>标签实际上是一个“通用的”块级元素。当设计网页时需要用到一个块级元素，并且需要自定义CSS属性的时候，大家通常会定义一个<div>标签。平时大家如果留意各种网站的元素，应该会常看到一个用法是<div class="container">。Container是容器的意思，这个用法是大多数网站设计者习惯用法。
那么类似地，当我们想要一个自定义的行内元素时，我们会用到<span>标签。它本身是一个不带任何格式属性（即没有对应的CSS内容）的行内标签。