- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

WEB入门.六盒子模型

tea_year 发表于 2021/12/29 23:18:54 2021/12/29

【摘要】学习内容         CSS盒子模型       盒子之间的关系       页面元素定位能力目标      理解盒子模型      理解内容与表...

学习内容

CSS盒子模型
盒子之间的关系
页面元素定位

能力目标

理解盒子模型
理解内容与表现分离的优点
理解并掌握盒子之间的关系
理解并掌握绝对定位与相对定位的用法

本章简介

上一章节中已经讲解了页面布局的基础知识，了解了设计一个标准的 XHTML页面需要遵循的规范，例如：标签需要关闭、使用 id 属性代替 name 属性、属性值需要使用双引号等。另外，上一章内容讲解了 XHTML 基本标签的用法。

页面是 Web 站点与用户交互的接口，它能够引起用户对 Web 的兴趣并且加入自己电脑的收藏夹。为达到这一目的，页面设计需要注意两点：页面布局设计和页面的内容设计。页面布局的效果将直接影响用户浏览的视觉体验。

本章内容将详细讲解布局设计的基本原理，包括布局设计模型、背景特效、元素定位、导航栏等。其次，本章内容涉及网页布局设计的基础模型——盒子模型。盒子模型的概念来源于生活中的物品装箱原理，可以通过盒子模型划分页面中的板块，重点在于讲解盒子模型中常用的定位方式：绝对定位、相对定位、静态定位、浮动定位。最后，本章将讲解页面中如果存在多个盒子，应该如何理解它们之间的关系。

核心技能部分

2.1 盒子模型概述

传统的网页一般采用table布局，将内容与页面效果混杂在一起，导致页面代码冗余，布局结构不清晰，不易于网站版面修改。基于div + css 布局技术的盒子模型的出现替代了传统的 table表格嵌套，它不但弥补了table布局的缺陷，而且在页面加载速度和搜索引擎的支持方面有显著的改善。

2.1.1 内容与表现的分离

1. 什么是内容与表现

网页设计的一个重要概念是保证页面内容和表现分离。其中内容是页面实际要传达给用户的信息 (包含数据、文档、图片等)，指纯粹的数据信息，不包含任何辅助信息 (如颜色、字体大小、背景等)；表现是指内容的修饰性部分，例如标题字体的大小、背景、颜色等。

2. 如何实现内容与表现分离

假设p是块状标签，现在须使某段落右缩进2个字高的大小，很多人通常在段落前加空格，而后不断重复该动作。如果给p标签指定一个CSS样式：p {text-indent：2em;}，在没有外加任何表现控制标签的情况下，body内容部分显示如下：

<p>忆江南作者唐.白居易江南好，风景旧曾谙。日出江花红胜火，春来江水绿如蓝，能不忆江南。</p>

如果该段落另需修饰字体、字号、背景、行距等，只需要将对应 CSS样式属性加进p样式中。

以上代码将内容和表现混合在一起。DIV + CSS设计布局的思路遵循内容与表现分离的原则。

实现步骤如下：

（1）使用DIV定义语义结构，其中只添加网页的内容，如文字、图片等。

（2）使用 CSS美化网页，如加入背景、线条边框、对齐属性等。

3. 内容与表现分离的优势

（1）网页文件代码量小，可被快速下载。

（2）数据显示多样化，不同的样式表适应不同的设备，其内容与设备无关。

（3）整个站点的视觉效果一致，修改样式表即可轻松实现网站改版。

（4）页面结构简洁，数据的集成、更新和处理更为方便灵活。

（5）便于搜索引擎的搜索。

2.1.2 盒子的结构

在CSS中，所有的网页元素都被看作一个矩形框，或者是元素框。盒子模型描述了元素在网页布局中所占的空间和位置。现实生活中的盒子是一个常见物品，如我们到商场买礼品，售货员会先用一个箱子将礼品装好。为防止礼品在运输过程中损坏，再用一些泡沫型材料隔在礼品与箱子之间。这就是一个最典型的盒子，如图 2.1.1 所示。

图2.1.1 生活中的盒子

网页设计将生活中装箱子的做法抽象成页面设计模型——盒子模型。在CSS 中，一个独立的盒子模型由 content (内容)、border (边框)、padding (内边距)、margin (外边距)四部分构成，如图 2.1.2所示。

图2.1.2 盒子模型

盒子模型是CSS 中一个重要的概念，理解了盒子模型才能更好地排版。盒子模型分为标准W3C盒子模型和IE 盒子模型两种。

1. 标准W3C盒子

标准W3C 盒子模型的范围包括 margin、border、padding、content，且 content部分不包含 border和 padding，如图 2.1.3所示。

图2.1.3 标准W3C盒子

2. IE盒子

IE 盒子模型的范围同样包括margin、border、padding、content，它与标准 W3C 盒子模型的区别在于，IE 盒子模型的 content部分包含了 border 和 padding，如图 2.1.4所示。

2.1

一个盒子的 margin 为20px，border 为1px，padding 为 10px，content 的宽度为200px、高为 50px。

标准W3C 盒子模型，盒子需要占据的位置为：

宽：20*2 + 1*2 +10*2 + 200 = 262px

高：20*2 + 1*2 +10*2 + 50=112px;

盒子的实际大小为：

宽：1*2 + 10*2 + 200= 222px

高：1*2 + 10*2 + 50=72px;

IE盒子模型，盒子占据的位置为：

宽：20*2 + 200 =240px

高：20*2 + 50 =90px;

盒子的实际大小为：宽 200px、高 50px。

设计师设计页面时，如果在页面顶部没有加 DOCTYPE 声明，那么浏览器会根据自己的行为理解网页，即 IE 浏览器会采用 IE 盒子模型解释设计师的盒子。而 Firefox采用标准 W3C 盒子模型解释盒子，所以网页在不同浏览器中的显示效果不一致。反之，如果添加 DOCTYPE 声明，那么所有浏览器都会采用标准W3C 盒子模型去解释盒子，网页在各浏览器中显示效果将变得一致。

2.1.3 盒子之间的关系

在设计网页时，如果只针对一个盒子，可以很轻松地运用上述知识。但实际网页设计中会遇到大量的盒子，所以只有理解盒子之间的关系才能适应各种复杂的布局需求。

1. 水平盒子

当两个盒子同行显示时，其距离为 BOXI 的 margin-right和 BOX2 的 margin-left之和，如图 2.1.5所示。

图2.1.5 水平盒子的距离

2. 垂直盒子

当两个盒子在垂直显示时，其距离为 BOXI 的margin-bottom和 BOX2 的 margin-top 中较大者，而不是两者之和。

2.2


  
   
    
     
    
    
     
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    
   
    
     
    
    
     
      <htmlxmlns="http://www.w3.org/1999/xhtml">
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
     
      <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
     
    
   
    
     
    
    
     
      <title>无标题文档</title>
     
    
   
    
     
    
    
     
      <style type="text/css">
     
    
   
    
     
    
    
     
      div{
     
    
   
    
     
    
    
         height:100px;
     
    
   
    
     
    
    
         width:200px;
     
    
   
    
     
    
    
         font-size:24px;
     
    
   
    
     
    
    
         color:#3C6;
     
    
   
    
     
    
    
         border:1pxsolid #006;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #box1{
     
    
   
    
     
    
    
         margin-bottom:50px;
     
    
   
    
     
    
    
         padding-bottom:30px;
     
    
   
    
     
    
    
         text-align:center;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #box2{
     
    
   
    
     
    
    
         margin-top:30px;
     
    
   
    
     
    
    
         padding-top:30px;
     
    
   
    
     
    
    
         text-align:center;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     
      <div id="box1">上面盒子</div>
     
    
   
    
     
    
    
     
      <div id="box2">下面盒子</div>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
     
      </html>

如图 2.1.6所示。

图 2.1.6 垂直盒子的距离-1 图2.1.6 垂直盒子的距离-2

3. 重叠盒子

盒子重叠时，可以将其中一个盒子的margin属性值设置为负值，下面代码演示负值的用法。

2.3


  
   
    
     
    
    
     
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    
   
    
     
    
    
     
      <htmlxmlns="http://www.w3.org/1999/xhtml">
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
     
      <meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
     
    
   
    
     
    
    
     
      <title>无标题文档</title>
     
    
   
    
     
    
    
     
      <style type="text/css">
     
    
   
    
     
    
    
     
      div{
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         left:100px;
     
    
   
    
     
    
    
         top:50px;
     
    
   
    
     
    
    
         width:300px;
     
    
   
    
     
    
    
         height:100px;
     
    
   
    
     
    
    
         border:1pxsolid red;
     
    
   
    
     
    
    
         font-size:30px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #box1{
     
    
   
    
     
    
    
         background-color:#FF0000;
     
    
   
    
     
    
    
         z-index:2;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #box2{
     
    
   
    
     
    
    
         background-color:#00FF00;
     
    
   
    
     
    
    
         margin-left:-50px;
     
    
   
    
     
    
    
         margin-top:-30px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     
      <div id="box1">BOX1</div>
     
    
   
    
     
    
    
     
      <div id="box2">BOX2</div>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
     
      </html>

2.2 盒子定位

在页面布局设计中，盒子定位是十分重要的内容。定位是将某个元素放到某个指定位置上。在 CSS中控制盒子的位置有多种方式，如盒子的浮动定位、盒子的流动定位等。另外还可以通过 position属性控制盒子的位置。本章将介绍如何通过position属性定位盒子。

position：static/absolute/relative;

2.4


  
   
    
     
    
    
     
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    
   
    
     
    
    
     
      <htmlxmlns="http://www.w3.org/1999/xhtml">
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
     
      <meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
     
    
   
    
     
    
    
     
      <title>无标题文档</title>
     
    
   
    
     
    
    
     
      <style type="text/css">
     
    
   
    
     
    
    
     
      div{
     
    
   
    
     
    
    
         width:100px;
     
    
   
    
     
    
    
         height:100px;
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         left:120px;/*与包含块左侧边框距离为120个像素*/
     
    
   
    
     
    
    
         top:50px;/*与包含块顶部边框距离为50个像素*/
     
    
   
    
     
    
    
         border:1pxsolid gray;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </style>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     
      <div id="box1">BOX1</div>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
     
      </html>

图2.1.8 position 用法

2.2.1 静态定位(static)

静态定位是position属性的默认值，它表示块状元素保持在标准文档流中原有的位置，不做任何移动。

2.5


  
   
    
     
    
    
     
      CSS样式代码：
     
    
   
    
     
    
    
     
      <style type="text/css">
     
    
   
    
     
    
    
     
      body{
     
    
   
    
     
    
    
         margin:20px;
     
    
   
    
     
    
    
         font :Arial 12px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #father{
     
    
   
    
     
    
    
         background-color:#0C3;
     
    
   
    
     
    
    
         border:1pxdashed #000000;
     
    
   
    
     
    
    
         padding:15px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #son{
     
    
   
    
     
    
    
         background-color:#FFFFFF;
     
    
   
    
     
    
    
         border:1pxdashed #FFFFFF;
     
    
   
    
     
    
    
         padding:10px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </style>
     
    
   
    
     
    
    
     
      XHTML代码片段：
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     
          <divid="father">
     
    
   
    
     
    
    
     
              <divid="son">BOX2</div>
     
    
   
    
     
    
    
         </div>
     
    
   
    
     
    
    
     
      </body>

2.2.2 绝对定位(absolute)

绝对定位是指以某一个点为基准进行偏移。最典型的绝对定位是以浏览器窗口的左上角(0.0)点为基准偏移盒子。使用绝对定位时，需要设水平方向和垂直方向的偏移量，分别是 left、top、right、bottom。

2.6


  
   
    
     
    
    
     
      CSS样式代码：
     
    
   
    
     
    
    
     
      <style type="text/css">
     
    
   
    
     
    
    
     
      body{
     
    
   
    
     
    
    
         margin:0px;
     
    
   
    
     
    
    
         font-family:Arial;
     
    
   
    
     
    
    
         font-size:12px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #father{
     
    
   
    
     
    
    
         background-color:#a0c8ff;
     
    
   
    
     
    
    
         border:1pxdashed #000000;
     
    
   
    
     
    
    
         width:300px;
     
    
   
    
     
    
    
         height:100px;
     
    
   
    
     
    
    
         position:absolute;/*绝对定位*/
     
    
   
    
     
    
    
         left:50px;
     
    
   
    
     
    
    
         top:50px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </style>
     
    
   
    
     
    
    
     
      XHTML代码片段：
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     
          <divid="father"></div>
     
    
   
    
     
    
    
     
      </body>

另一种情况是包含元素的定位问题，它是以已经定位的父级元素为基准进行偏移。已经定位的元素是指将元素的 postion属性值设置为除静态定位之外的任意一值。

2.7


  
   
    
     
    
    
     
      CSS样式代码：
     
    
   
    
     
    
    
     
      <style type="text/css">
     
    
   
    
     
    
    
     
      body{
     
    
   
    
     
    
    
         margin:20px;
     
    
   
    
     
    
    
         font-family:Arial;
     
    
   
    
     
    
    
         font-size:12px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #father{
     
    
   
    
     
    
    
         background-color:#a0c8ff;
     
    
   
    
     
    
    
         border:1pxdashed #000000;
     
    
   
    
     
    
    
         padding:15px;
     
    
   
    
     
    
    
         position:relative;/*相对定位*/
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #father div{
     
    
   
    
     
    
    
         background-color:#fff0ac;
     
    
   
    
     
    
    
         border:1pxdashed #000000;
     
    
   
    
     
    
    
         padding:10px;
     
    
   
    
     
    
    
     
          }
     
    
   
    
     
    
    
     
      #father #son2{
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         top:0px;
     
    
   
    
     
    
    
         right:0px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </style>
     
    
   
    
     
    
    
     
      XHTML代码片段：
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     
          <divid="father">
     
    
   
    
     
    
    
             <div>Box-son1</div>
     
    
   
    
     
    
    
     
              <divid="son2">Box-son2</div>
     
    
   
    
     
    
    
             <div>Box-son3</div>
     
    
   
    
     
    
    
         </div>
     
    
   
    
     
    
    
     
      </body>

如果去掉father 中的position：relative；

使用盒子绝对定位时需要注意以下几点：

（1）盒子的绝对定位以最近的一个已定位的父级元素为基准；如果父级元素没有定位或没有父级元素，则以浏览器窗口为基准。

（2）绝对定位的盒子会脱离标准文档流，不影响同一级的盒子元素位置。

2.2.3 相对定位(relative)

相对定位是相对于盒子元素的自身原有位置进行偏移，需要设定垂直方向和水平方向的偏移量，分别是left、top、right、bottom。

2.8

CSS代码：


  
   
    
     
    
    
     
      <style type="text/css">
     
    
   
    
     
    
    
     
      body{
     
    
   
    
     
    
    
         margin:20px;
     
    
   
    
     
    
    
         font :Arial 12px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #father{
     
    
   
    
     
    
    
         background-color:#a0c8ff;
     
    
   
    
     
    
    
         border:1pxdashed #000000;
     
    
   
    
     
    
    
         padding:15px;
     
    
   
    
     
    
    
         width:300px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #son1{
     
    
   
    
     
    
    
         background-color:#fff0ac;
     
    
   
    
     
    
    
         border:1pxdashed #000000;
     
    
   
    
     
    
    
         padding:10px;
     
    
   
    
     
    
    
         position:relative;/*relative相对定位 */
     
    
   
    
     
    
    
         left:50px;
     
    
   
    
     
    
    
         top:30px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #son2{
     
    
   
    
     
    
    
         background-color:#fff0ac;
     
    
   
    
     
    
    
         border:1pxdashed #000000;
     
    
   
    
     
    
    
         padding:10px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </style>
     
    
   
    
     
    
    
     
      XHTML代码片段：
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     
          <divid="father">
     
    
   
    
     
    
    
     
              <divid="son1">SonBox-1</div>
     
    
   
    
     
    
    
     
              <divid="son2">SonBox-2</div>
     
    
   
    
     
    
    
         </div>
     
    
   
    
     
    
    
     
      </body>

在浏览器中浏览的效果如图 2.1.12所示。

图2.1.12 相对定位

修改Son1的样式，去除position:relative;/*relative相对定位 */

#son1{

background-color:#fff0ac;

border:1pxdashed #000000;

padding:10px;

left:50px;

top:30px;

}

由此可以看出，相对定位是相对于盒子元素的自身原有位置进行偏移。

2.2.4 CSS包含块(include)

CSS包含块是标准布局中的一个重要概念，是绝对定位的基础。包含块不同于父级元素，它们之间存在本质的区别。

什么是包含块呢？包含块是指为绝对定位元素提供坐标偏移和显示范围的参照物，是确定绝对定位元素偏移起始位置和百分比长度的参考。默认状态下 body元素是一个大的包含块，所有绝对定位的元素都根据窗口确定自己所处的位置和百分比大小来显示的。但是如果定义了包含元素为包含块后，对于被包含的绝对定位元素来说，会根据最接近的、具有定位功能的上级包含元素来决定其显示位置。

那么怎么定义一个包含块？在 CSS 中可以用 position 属性定义包含块。使用包含块，设计师可以灵活设置绝对定位的坐标原点和参考值。

为了能够更直观地明白什么是包含块，以及以上阐述的内容，下面通过一个XHTML页面来说明。

2.9

CSS代码：

#a,#b {/* 定义包含元素的共同属性 */

width:200px;

height:200px;

float:left;

font-size:24px;

margin-top:50px; /* 拉开与窗口顶部的距离 */

border:solid 1px red; /* 定义红色边框线，便于识别 */

}

#b {

position:relative;/* 定义包含元素b为相对定位，确定它为包含块 */

margin-left:50px; /* 拉开与b包含元素的距离 */

}

#c,#d {/* 定义被包含元素绝对定位，并进行偏移 */

width:50%;

height:50%;

position:absolute;

left:50%; /* 与包含块左侧边框距离为50% */

top:50%;/* 与包含块顶部边框距离为50% */

border:1pxsolid gray;

}

</style>

XHTML代码片段：

<body>

<div id="a">Box_a

<divid="c">Box_c</div>

</div>

Box_b

<divid="d">Box_d</div>

</div>

</body>

在浏览器中浏览的效果如图 2.1.14所示。

图2.1.14 CSS包含块

上述代码中，Box_b 被定义为包含块，Box_d 相对于其包含块进行位置偏移和范围大小的取值，Box_a未设置成包含块，所以 Box_c 相对于body进行位置偏移和范围大小的取值。由此可以看出只有自身是包含块的时候才可以影响其他元素的定位，元素要想成为包含块则要定义 position属性；居无定所怎么包含别人。position 的取值 absolute 绝对定位，譬如：家庭住址大学路158号；relative 则是相对定位，譬如：家庭住址大学路客运总站对面。

2.3 综合应用

在众多的网站上，我们经常可以见到这样一些页面，多张祝福卡片被叠加在同一个页面上通过点击鼠标查看祝福留言，效果如图2.1.15所示。卡片需要被定义为不同的样式，如背景、边框、字体大小，而且还需要灵活控制其位置，可以采用 DIV标签进行定义并使用叠加特性实现卡片的叠加定位排列。定义一个包含块，将所有的卡片放在其中，卡片采用绝对定位。

2.10


  
   
    
     
    
    
     
      <style type="text/css">
     
    
   
    
     
    
    
     
      div{padding:2px;}
     
    
   
    
     
    
    
     
      h1{text-align:center;}
     
    
   
    
     
    
    
     
      #card{
     
    
   
    
     
    
    
         border:2px  solid yellow;
     
    
   
    
     
    
    
         width:60%;
     
    
   
    
     
    
    
         height:600px;
     
    
   
    
     
    
    
         position:relative;
     
    
   
    
     
    
    
         left:5%;
     
    
   
    
     
    
    
         top:5%;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #card1{
     
    
   
    
     
    
    
         border:2px  dashed yellow;
     
    
   
    
     
    
    
         width:150px;
     
    
   
    
     
    
    
         height:200px;
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         left:20px;
     
    
   
    
     
    
    
         top:20px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #card2{
     
    
   
    
     
    
    
         border:2px  dashed yellow;
     
    
   
    
     
    
    
         width:150px;
     
    
   
    
     
    
    
         height:200px;
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         left:40px;
     
    
   
    
     
    
    
         top:40px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #card3{
     
    
   
    
     
    
    
         border:2px  dashed yellow;
     
    
   
    
     
    
    
         width:150px;
     
    
   
    
     
    
    
         height:200px;
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         left:60px;
     
    
   
    
     
    
    
         top:60px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #card4{
     
    
   
    
     
    
    
         border:2px  dashed yellow;
     
    
   
    
     
    
    
         width:150px;
     
    
   
    
     
    
    
         height:200px;
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         right:100px;
     
    
   
    
     
    
    
         top:120px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      #card5{
     
    
   
    
     
    
    
         border:2px  dashed yellow;
     
    
   
    
     
    
    
         width:150px;
     
    
   
    
     
    
    
         height:200px;
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         right:80px;
     
    
   
    
     
    
    
         top:100px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #card1{background-color:#0099FF;}
     
    
   
    
     
    
    
     
      #card2{background-color:#CCFF66;}
     
    
   
    
     
    
    
     
      #card3{background-color:#CCCC99;}
     
    
   
    
     
    
    
     
      #card4{background-color:#FFCCCC;}
     
    
   
    
     
    
    
     
      #card5{background-color:#6699CC;}
     
    
   
    
     
    
    
     
      </style>
     
    
   
    
     
    
    
     
      XHTML代码片段：
     
    
   
    
     
    
    
     
      <div id="card">
     
    
   
    
     
    
    
     
      <h1>祝福墙</h1>
     
    
   
    
     
    
    
     
          <divid="card1">
     
    
   
    
     
    
    
                 <h5>To:maomao</h5>
     
    
   
    
     
    
    
     
                  在我心灵的百花园里，采集金色的鲜花，我把最鲜艳的一朵给你，作为我对你的问候。
     
    
   
    
     
    
    
         </div>
     
    
   
    
     
    
    
     
          <divid="card2">
     
    
   
    
     
    
    
         <h5>To:xiaozhang</h5>
     
    
   
    
     
    
    
     
          一句问安 一声祝福 道不尽怀念的思绪 且祝福… 快乐健康 永远永远
     
    
   
    
     
    
    
         </div>
     
    
   
    
     
    
    
     
          <divid="card3">
     
    
   
    
     
    
    
         <h5>To:anny</h5>
     
    
   
    
     
    
    
     
          愿一个问候带给你一个新的心情，愿一个祝福带给你一个新的起点。 </div>
     
    
   
    
     
    
    
     
          <divid="card4">
     
    
   
    
     
    
    
         <h5>To:jack</h5>
     
    
   
    
     
    
    
     
                  将心底最衷诚的祝福送给你，祝你心想事成，春风得意。
     
    
   
    
     
    
    
         </div>
     
    
   
    
     
    
    
     
          <divid="card5">
     
    
   
    
     
    
    
             <h5>To:anny</h5>
     
    
   
    
     
    
    
     
                  打开心灵，卸下你的包装；指尖飞舞，打破冬的沉默；融融的暖意带着深情的问候，那么快让我们拥抱、拥抱、拥抱彼此的梦想！
     
    
   
    
     
    
    
         </div>
     
    
   
    
     
    
    
         </div>
     
    
   
    
     
    
    
     
      </div>

在浏览器中浏览的效果如图 2.1.15所示。

图2.1.15 祝福墙

任务实训部分

实训任务1：搭建博客网站的页面结构

训练技能点

Ø 内容与表现相分离的实现

Ø 采用DIV+CSS布局搭建页面结构

需求说明

搭建页面布局结构，结构关系如图2.2.1所示。

实现步骤

（1）采用DIV作为盒子，利用DIV的嵌套搭建布局框架。

（2）使用CSS样式表中的ID选择符定义盒子的样式规则。

关键代码

CSS代码：


  
   
    
     
    
    
     
      <style>
     
    
   
    
     
    
    
     
      body{
     
    
   
    
     
    
    
         margin:0px;padding:0px;
     
    
   
    
     
    
    
         font-family:arial;
     
    
   
    
     
    
    
         background-color:#f8e5a9;   /*设置成跟#right块一样 */
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #container{
     
    
   
    
     
    
    
         margin:0px;padding:0px;
     
    
   
    
     
    
    
         background:url(bg2.jpg)repeat-y;/* 用背景图片填补#left的空白，又不影响#right */
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #left{
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         top:0px;
     
    
   
    
     
    
    
         left:0px;
     
    
   
    
     
    
    
         margin:0px;
     
    
   
    
     
    
    
         background:#afdcff;
     
    
   
    
     
    
    
         width:190px;
     
    
   
    
     
    
    
         height:600px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #middle{
     
    
   
    
     
    
    
         position:relative;
     
    
   
    
     
    
    
         padding:1px15px 10px 15px;
     
    
   
    
     
    
    
         margin:-10px 190px 0px 190px;
     
    
   
    
     
    
    
         font-size:13px;
     
    
   
    
     
    
    
         background:#e9fbff url(bg1.jpg) no-repeatbottom right;
     
    
   
    
     
    
    
         height:600px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #right{
     
    
   
    
     
    
    
         position:absolute;
     
    
   
    
     
    
    
         top:0px;
     
    
   
    
     
    
    
         right:0px;
     
    
   
    
     
    
    
         margin:0px;
     
    
   
    
     
    
    
         background:#f8e5a9;
     
    
   
    
     
    
    
         width:190px;
     
    
   
    
     
    
    
         padding:20px0px 20px 0px;
     
    
   
    
     
    
    
         font-size:12px;
     
    
   
    
     
    
    
         height:600px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #footer
     
    
   
    
     
    
    
     
      {
     
    
   
    
     
    
    
         text-align:center;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      </style>
     
    
   
    
     
    
    
     
      XHTML代码片段：
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     
      <div id="container">
     
    
   
    
     
    
    
     
          <divid="mainbox">
     
    
   
    
     
    
    
     
              <divid="left"></div>
     
    
   
    
     
    
    
     
              <divid="middle"></div>
     
    
   
    
     
    
    
     
              <divid="right"></div>
     
    
   
    
     
    
    
         </div>
     
    
   
    
     
    
    
     
          <divid="footer">版权所有2011.2.7 </div>
     
    
   
    
     
    
    
     
      </div>
     
    
   
    
     
    
    
     
      </body>

实训任务2：制作博客网站页面的左栏内容

训练技能点

Ø 使用position:absolute;设置左侧盒子为绝对定位，并通过top、left属性指定坐标

Ø 使用width、height设置左侧盒子宽度和高度

Ø 使用border属性设置盒子的边框

Ø CSS样式规则的编写

需求说明

将盒子定位布局容器的最左侧，并添加内容，效果如图2.2.2所示。

实现思路

（1）在上一阶段的基础上添加左侧盒子的内容，包括标题、链接、列表：


  
   
    
     
    
    
     
      <div id="left">
     
    
   
    
     
    
    
         <ul>
     
    
   
    
     
    
    
             <li><ahref="#">首页</a></li>
     
    
   
    
     
    
    
             <li><ahref="#">精华区</a></li>
     
    
   
    
     
    
    
             <li><ahref="#">收藏夹</a></li>
     
    
   
    
     
    
    
             <li><ahref="#">讨论区</a></li>
     
    
   
    
     
    
    
             <li><ahref="#">心情日志</a></li>
     
    
   
    
     
    
    
         </ul>
     
    
   
    
     
    
    
         <h2>经典推荐</h2>
     
    
   
    
     
    
    
         <ul>
     
    
   
    
     
    
    
             <li><ahref="#">拉萨旅行记</a></li>
     
    
   
    
     
    
    
             <li><ahref="#">回到昨天</a></li>
     
    
   
    
     
    
    
             <li><ahref="#">情为何物</a></li>
     
    
   
    
     
    
    
             <li><ahref="#">读书笔记</a></li>
     
    
   
    
     
    
    
         </ul>
     
    
   
    
     
    
    
     
      </div>
     
    
   
    
     
    
    
     
      （2）       编写样式规则控制盒子的位置及其内容的外观：
     
    
   
    
     
    
    
     
      #left ul{
     
    
   
    
     
    
    
     
          list-style:none;/*去除列表样式*/
     
    
   
    
     
    
    
     
          margin:1em20px 0px 0px;
     
    
   
    
     
    
    
     
          padding:0px0px 15px 22px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #left li{
     
    
   
    
     
    
    
     
          font-size:80%;
     
    
   
    
     
    
    
     
          border-bottom:1pxdotted #B2BCC6;/*li底部带边框*/
     
    
   
    
     
    
    
     
          margin-bottom:0.3em;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #left a:link, #nav a:visited{
     
    
   
    
     
    
    
     
          text-decoration:none;/*无下划线的超链接*/
     
    
   
    
     
    
    
     
          color:#2A4F6F;
     
    
   
    
     
    
    
     
          background-color:transparent;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #left a:hover{
     
    
   
    
     
    
    
     
          color:#778899;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #left h2{
     
    
   
    
     
    
    
     
          font:110%Georgia,"Times New Roman", Times, serif;
     
    
   
    
     
    
    
     
          font-weight:bold;
     
    
   
    
     
    
    
     
          color:#2A4F6F;
     
    
   
    
     
    
    
     
          padding:0px5px 0px 12px;
     
    
   
    
     
    
    
     
          text-decoration:underline;
     
    
   
    
     
    
    
     
      }

实训任务3：制作博客网站网页的中间内容

训练技能点

Ø 相对定位的用法

Ø margin属性与padding属性的用法

Ø border属性的用法

需求说明

参考上一阶段，完成博客网站页面中间内容的设计，效果如图2.2.3所示。

图2.2.3 中间内容

实现思路

（1）使用position:relative 将盒子设置成相对定位

（2）左侧盒子的定位方式是绝对定位，脱离了文档流，不会挤压其他盒子。所以通过margin来设置中间盒子与布局容器的左侧补丁，左侧补丁的大小大于或等于左侧盒子的宽度，这样才可以保证中间盒子处于左侧盒子的右边。


  
   
    
     
    
    
     
      #middle{
     
    
   
    
     
    
    
     
          position:relative;
     
    
   
    
     
    
    
     
          padding:1px15px 10px 15px;
     
    
   
    
     
    
    
     
          margin:-10px 190px 0px 190px;
     
    
   
    
     
    
    
     
          font-size:13px;
     
    
   
    
     
    
    
     
          background:#e9fbff url(bg1.jpg) no-repeatbottom right;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      #middle h4{
     
    
   
    
     
    
    
     
          text-decoration:underline;
     
    
   
    
     
    
    
     
          color:#0078aa;
     
    
   
    
     
    
    
     
          padding-top:15px;
     
    
   
    
     
    
    
     
          font-size:16px;
     
    
   
    
     
    
    
     
      }

（3）盒子中的每一段内容可以继续采用盒子进行组织，并设置盒子的下边框为虚线

border-bottom:1px dashed #5b97b1;

（4）添加内容包括标题、段落、链接等

（5）设置内容的样式规则，标题大小为16px，带下划线，段落文本补丁：左右15px，上下0px。

代码


  
   
    
     
    
    
     
      <div id="middle">
     
    
   
    
     
    
    
         <h4>团购</h4>
     
    
   
    
     
    
    
         <p>团购就是团体购物，指的是认识的或者不认识的消费者联合起来，来加大与商家的谈判能力，以求得最优价格的一种购物方式。根据薄利多销、量大价优的原理，商家可以给出低于零售价格的团购折扣和单独购买得不到的优质服务。团购作为一种新兴的电子商务模式，通过消费者自行组团、专业团购网站、商家组织团购等形式，提升用户与商家的议价能力，并极大程度地获得商品让利，引起消费者及业内厂商、甚至是资本市场关注。……
     
    
   
    
     
    
    
         </p>
     
    
   
    
     
    
    
         <h4>旅程</h4>
     
    
   
    
     
    
    
         <p>夕阳 染红蓝天<br>带走 美好的一天<br>风 吹过大地<br>炫美的世界<br>
     
    
   
    
     
    
    
         <br>
     
    
   
    
     
    
    
     
          霞光 点亮星辰<br>燃起 辽远的梦幻<br>流星 划过夜空<br>忆起 逝夜的歌声<br>
     
    
   
    
     
    
    
         <br>
     
    
   
    
     
    
    
     
          是谁昨夜背上行囊<br>唱一首满载风尘的歌<br>今夜才又想起拥抱的时刻<br>
     
    
   
    
     
    
    
         <br>
     
    
   
    
     
    
    
     
          独自走的一段旅程<br>是否还装满苦涩<br>一路风雨飘摇 那坎坷对谁说<br>
     
    
   
    
     
    
    
         <br>
     
    
   
    
     
    
    
     
          来吧看这远处亮起的点点星火<br>伸手触摸那写在匆匆旅程的歌<br>
     
    
   
    
     
    
    
     
          谁在转过的街口从容挥手<br>谁用欢笑和拥抱<br>记住这一刻
     
    
   
    
     
    
    
         </p>
     
    
   
    
     
    
    
     
      </div>

实训任务4：制作博客网站网页的右栏内容

需求说明

参考上一阶段，完成博客网站页面右栏内容的设计，效果如图2.2.4所示。

提示：

Ø 使用position:absolute;设置左侧盒子为绝对定位，并通过top、right属性指定坐标

Ø 添加内容包括标题、段落、链接等

Ø 设置内容的样式规则，标题大小为16px，带下划线，段落字体大小为12px

本章总结

（1）本章主要讲解盒子模型padding和margin属性，盒子之间关系，（1）水平盒子（2）垂直盒子（3）重叠盒子

（2）盒子定位position，绝对定位，静态定位，相对定位。

（3）盒子模型的CSS控制页面的基础。学习本章之后，读者应该能够清楚在这里“盒子”的含义是什么，以及盒子的组成。

(4)本章的重点和难点是深刻地理解“浮动”和“定位”这两个重要属性，它们对于复杂页面的排版至关重要。
巩固练习

一、选择题

1．在网页设计中，盒子关系共有（）种。

A.1

B.2

C.3

D.4

2. 以下盒子模型中，可以被所有浏览器兼容的是（）。

A. IE盒子

B. WEB盒子

C. 文档盒子

D. 标准W3C盒子

3. 以下属于position定位盒子方式的是（）。

A. 绝对定位

B. 相对定位

C. 直接定位

D. 静态定位

4. 以下说法中正确的有（）。

A. 内容与表现分离，加重了浏览器的负载

B. 内容与表现分离，导致页面结构不完整

C. 内容与表现分离，使得页面设计更加的简洁

D. 内容与表现分离是现代页面设计的标准

5. 以下CSS样式代码片断中，属于绝对定位的是（）。

A. #content {width: 200px; height: 150px ;}

B. #content {width: 200px; height: 150px;position: absolute ;}

C. #content {width: 200px; height: 150px;position: static ;}

D. #content {width: 200px; height: 150px;position: relative ;}

二、上机练习

完善理论课祝福墙制作，在其基础上实现如图 2.3.1所示的效果。

图2.3.1 页面元素定位

当鼠标移至某一张卡片上时，卡片显示在最顶层，鼠标移走后卡片复位。

提示：定义卡片的悬停状态并设置叠加次序，以突出显示。

#card：hover{z-index：10;}

文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。

原文链接：aaaedu.blog.csdn.net/article/details/55251470

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

WEB入门.六盒子模型

2.1 盒子模型概述

2.1.1 内容与表现的分离

2.1.2 盒子的结构

2.1.3 盒子之间的关系

2.2 盒子定位

2.2.1 静态定位(static)

2.2.2 绝对定位(absolute)

2.2.3 相对定位(relative)

2.2.4 CSS包含块(include)

2.3 综合应用

实训任务1：搭建博客网站的页面结构

实训任务2：制作博客网站页面的左栏内容

实训任务3：制作博客网站网页的中间内容

实训任务4：制作博客网站网页的右栏内容

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

WEB入门.六 盒子模型

2.2.4 CSS包含块(include)

实训任务1：搭建博客网站的页面结构

实训任务2：制作博客网站页面的左栏内容

实训任务3：制作博客网站网页的中间内容

实训任务4：制作博客网站网页的右栏内容

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品

WEB入门.六盒子模型