04-css盒子模型-彻底理解css盒子模型

浅浅的花香味﹌ 2022-05-23 10:08 356阅读 0赞

**第6章盒子模型**

(一) **盒子模型【盒子套盒子】**

l CSS将网页中的所有元素都看成一个盒子。

l 盒子模型属性：有边框、内边距和外边距。（还包括“**元素内容本身**”）

1) 对应包装盒的纸壳，它一般具有一定的厚度

2) 内边距：位于边框内部，是内容与边框的距离，既对应包装盒的填充部分，所以也称为**填充**。外边距：代表盒子与其它盒子间的距离。

3) 外边距：位于边框外部，边框外面周围的间隙，所以也称为**边界**。 内边距**外边距**边框

**理解CSS盒子模型**

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

![20180606235746939][]

l 因为盒子是矩形结构，所以边框、内边距、外边距这些属性都分别对应上(top)、下(bottom)、左(left)、右(right)四条边，这四条边的**设置**可以不同。

l 盒子除了平面结构图外，还包括三维的立体结构图，从上往下看，它表示的层次关系：

1) 首先是盒子的主要标识：边框(border)，位于盒子的第一层。

2) 其次是元素内容(content)、内边距(padding)，两者位于第二层。

3) 再次是前面着重讲解的背景图(background-image)，位于第三层。

4) 背景色(background-color)，位于第四层。

5) 最后是整个盒子的外边距。

l **边框**

l **边框有3个属性：color（颜色）  width（粗细）  style（样式）**

1. **border-color**

由于盒子模型分为上下左右四个边框，border-color属性的设置方式：

<table> 
 <tbody> 
  <tr> 
   <td><p><strong>属性</strong></p></td> 
   <td><p><strong>说明</strong></p></td> 
  </tr> 
  <tr> 
   <td><p>border-top-color</p></td> 
   <td><p>上边框</p></td> 
  </tr> 
  <tr> 
   <td><p>border-bottom-color</p></td> 
   <td><p>下边框</p></td> 
  </tr> 
  <tr> 
   <td><p>border-left-color</p></td> 
   <td><p>左边框</p></td> 
  </tr> 
  <tr> 
   <td><p>border-right-color</p></td> 
   <td><p>右边框</p></td> 
  </tr> 
  <tr> 
   <td><p>border-color</p></td> 
   <td><p>设置四边框的颜色，（上、右、下、左）<strong><span style="color:rgb(227,108,10);">空格</span></strong></p></td> 
  </tr> 
 </tbody> 
</table>

2. **border-width**

border-width用来指定border的粗细程度，它的值：

Ø thin：设置细的边框

Ø medium：默认值，设置中等的边框（2px）

Ø thick：设置粗的边框

Ø 像素值：表示具体的数值，自定义设置边框的宽度**（常用）**

**border-top-widthborder-top-widthborder-top-widthborder-top-width  **

**border-width(按顺序，上、右、下、左) 像素值px**

3. **border-style**（上、右、下、左）

**用来设定border的样式，它的值有：\[ none \]、dotted、dashed、\[ solid \]、hidden、double、groove、ridge、outset**

4. **border简写属性**

**顺序：粗细、颜色、样式（没有限制，也可颠倒）**

l **外边距**

一般情况下，页面内容，是不会紧贴浏览器的，而是与浏览器有一定的距离，因为body本身也是一个盒子，也有一个外边距，这也是由于body的外边距产生的。

margin – top / right / bottom / left（设置上/右/下/左外边距）

为了使页面，在不同的浏览器之间显示的效果一样，通常在CSS中通过**并集选择器**，统一设置这些标签的外边距为0px，这样页面中不会因为外边距而产生不必要的空隙，各浏览器的效果也会一样。

使用margin就可以设置页面居中显示 eg: margin:0px auto ;

l **内边距//会改变整个元素的大小**

**用于控制内容与边框之间的距离。**

**padding-top/bottom/left/right（设置上/右/下/左内边距为？px）**

现在使用padding属性，设置列表内边距为0px，设置页面内容居中显示，同时对于页面中能够产生外边距的元素统一使用并集选择器设置其外边距为0px。

内边距的值，不允许为负。

l **盒子模型的尺寸**

l **导致页面元素折行显示，或撑开页面的原因，主要还是由于盒子尺寸问题。**

l width和height指的是内容区域的宽度和高度。增加了边框、内边距和外边距后**不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。**

l **盒子模型总尺寸=border-width \+ padding + margin + 内容宽度**

**熟悉工作流程**

在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“<div>文字块一</div><div>文字块二</div><div>文字块三</div>”，而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>”更合适。

用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：

![04.gif][]  
CSS排版结果图

演示地址：[css2.html][]

用div来定义语义结构

现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图）

![05.gif][]  
典型版面分栏结构

其结构代码如下：

上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:

最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：

body \{  
font-family: Arial, Helvetica, sans-serif;  
font-size: 12px;  
margin: 0px auto;  
height: auto;  
width: 760px;  
border: 1px solid \#006633;  
\}

页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：

\#header \{  
height: 100px;  
width: 760px;  
background-image: url(headPic.gif);  
background-repeat: no-repeat;  
margin:0px 0px 3px 0px;  
\}

导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

\#nav \{

height: 25px;

width: 760px;

font-size: 14px;

list-style-type: none;

\#nav li \{

float:left;

\#nav li a

color:\#000000;

text-decoration:none;

padding-top:4px;

display:block;

width:97px;

height:22px;

text-align:center

background-color: \#009966;

margin-left:2px;

\#nav li a:hover\{

background-color:\#006633;

color:\#FFFFFF;  
\}

内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：

\#content \{

height:auto;  
width: 740px;  
line-height: 1.5em;  
padding: 10px;  
\}  
\#content p \{  
text-indent: 2em;  
\}  
\#content h3 \{  
font-size: 16px;  
margin: 10px;

版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：

\#footer \{

height: 50px;  
width: 740px;  
line-height: 2em;  
text-align: center;  
background-color: \#009966;  
padding: 10px;  
\}

最后回到样式开头大家会看到这样的样式代码：

\* \{

margin: 0px;  
padding: 0px;  
\}

这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

</style>  
<div id="header"></div>  
<ul id="nav">  
<li><a href="\#">首 页</a></li>  
<li><a href="\#">文 章</a></li>  
<li><a href="\#">相册</a></li>  
<li><a href="\#">Blog</a></li>  
<li><a href="\#">论 坛</a></li>  
<li><a href="\#">帮助</a></li>  
</ul>  
<div id="content">  
<h3>前言</h3>  
<p>第一段内容</p>  
<h3>理解CSS盒子模式</h3>  
<p>第二段内容</p>  
</div>  
<div id="footer">  
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright &copy;2006 - 2008 Tang Guohui. All Rights Reserved</p>  
</div>  
</body>

结构代码是这样的：

<body>

(二) **标准文档流**

**简称“文档流”，**是指在不使用其它的排版和定位相关的特殊CSS规则时，**各种元素的排列规则**，即CSS规定的网页元素默认的排列方式。

l **标准文档流组成**

1. 块级元素

从前面学过的列表中可以知道，每个<li>都占据着一个矩形的区域，并且和相邻的<li>依次竖直排列，不会排在同一行。<ul>与<li>一样，也具有同样的性质，故！（block level）。它们总是以一个块集形式表现出来，并且跟同级的兄弟依次**竖直**排列，**左右撑满**，eg: 标题标签、段落标签、<div>标签。

2. 内联元素

**对于文字这类元素，各个字母之间横向排列，到最右端自动折行，故！eg：<span><a><img/><strong>**

**区别**：块集元素独占一行，拥有自己的区域，而内联元素则没有自己的区域。eg : <span>标签可以包含于<div>标签中，成为它的子元素，反过来则不成立。

l **display属性**

Ø **标准文档流有两种元素，一种是以<div>为代表的块级元素，还有一种是以<span>为代表的内联元素。**

Ø **对于以上那些标签，另外还有一个专门的属性来控制元素的显示方式，是像<div>那样块状显示，还是像<span>那样行内显示，这就是display属性。**

Ø **在CSS中，display属性用于指定HTML标签的显示方式，它的值有许多，常用的就只有3个：**

Ø **display属性常用值：**

<table> 
 <tbody> 
  <tr> 
   <td><p><strong>值</strong></p></td> 
   <td><p><strong>块集元素的默认值，元素会被显示为</strong></p></td> 
  </tr> 
  <tr> 
   <td><p><strong><span style="background:rgb(255,255,255);">block</span></strong></p></td> 
   <td><p><strong><span style="color:rgb(255,0,0);background:rgb(255,255,255);">块集元素</span></strong><span style="background:rgb(255,255,255);">的默认值，元素会被显示为块集元素，该元素前后会带有换行符</span></p></td> 
  </tr> 
  <tr> 
   <td><p><strong>inline</strong></p></td> 
   <td><p><strong><span style="color:rgb(0,176,80);">内联元素</span></strong>的默认值，元素会被显示为内联元素，该元素前后没有换行符</p></td> 
  </tr> 
  <tr> 
   <td><p><strong><span style="background:rgb(255,255,255);">none</span></strong></p></td> 
   <td><p><span style="background:rgb(255,255,255);">该元素不会被显示</span></p></td> 
  </tr> 
 </tbody> 
</table>

l 在**DIV+CSS**制作网页的过程中，无时无刻不在应用着【盒子模型】。

[20180606235746939]: /images/20220523/015204c8faf248c9811eddd8d456bfe3.png
[04.gif]: /images/20220523/221aa61332744a9db2ed5942d3ba783c.png
[css2.html]: http://www.blueidea.com/articleimg/2007/03/4545/css2.html
[05.gif]: /images/20220523/07c92d55dfdf4d08baf6c4c6f1d9b839.png