<div>

什么叫逻辑区(logical sectioin)？

页面上彼此相关的一组元素。（网页中的独立的栏目版块，就是一个典型的逻辑部分。）

例如我们发现在一个关于宠物的html上，

“猫猫”区的元素构成为一个标题和一个段落，如<h2>+<p>

"狗狗"区的构成也为一个标题和一个段落，<h2>+<p>

我们可在属于一个逻辑区的元素周围放置<div></div>，并同时用id/class指定标签

<div id="cats">     id 用于标识单独的唯一的元素。

<div class="pets">  class 用于元素组（类似的元素，或者可以理解为某一类元素）

看起来像这样：

<div id=“cats”>

<h2>

<p>

还可以在结构上增加结构

 <div id="pets">  

 <div id="cats">  

<h2>

<p>

 <div id="dogs">  

<h2>

<p>

然后，在CSS文件对应引用div       (#id名称/class名称）

#cats {

border-width:thin;

width:200px;              ( 这个width指定的是内容区的宽度.神奇的发现cats宽度栏将锁定在200px,不论页面如何拉伸.)

padding-bottom:20px; (复习下，padding是四周内边距.)

margin-left:20px;         (复习下，margin是四周外边距.)

text-align:center;        （text-align只能在块元素上设置,它使得块元素中的所有内联内容对齐.但直接在内联元素上使用如<img>将失效;

使内容如标题，段落文本对齐的并不是<div>,因为标题和段落是块元素,实际上它们继承的是text-align的值）
background-image:url(images/cocktail.gif);
background-repeat:repeat-x;

}

• width属性只指定内容区宽度,整个盒子的宽度=两边内边距+两边外边距+两边边框宽度+内容区宽度
• 显然，如果没有外边距，内边距，边框,盒子的总宽度即是内容的宽度.
• 一个元素若没有设置宽度,块元素的默认宽度为auto,它允许内容延伸填满可用的空间.width是块元素.
• 一个元素的高度也是默认auto,浏览器在垂直方向上会延伸内容区，使所有内容可见。如果一定要设置高度，当心高度不够不足以放下内容，内容底部可能会溢到其他元素中一般情况下不要去指定元素高度，让它默认auto即可。

用<div>为页面增加结构的意义

把页面分解为逻辑区，使得页面结构更为清晰，方便指定样式。

能进一步展现页面的底层逻辑结构，可以帮助别人理解你的页面，也因此有助于页面的维护

此外，要根据任务需要增加结构，让结构尽量简单。别为加结构而加结构。若不能提供任何实际好处，只会使页面更加复杂。