把页面中可放置内容的窗口元素称为盒子，即Box，盒子就是一个矩形区域。每个盒子都有内容Content、内边距Padding、边框Border、外边距Margin，盒状模型用于描述它们之间的层次、关系与相互的影响。
描述了一个盒子的构成，如图7.1 所示。
图7.1 盒子的构成
盒子由外向内依次是：
➢margin：外边距。
➢border：边框。
➢padding：内边距，又称内补丁或间隙。
➢content：内容。
其中：
➢CSS 外边距属性 （margin） 用来设置一个元素所占空间的边缘到相邻元素之间的距离。
➢CSS 边框属性 （border） 用来设定一个元素的边线。
➢CSS 内边距属性 （padding） 用来设置元素内容到元素边框的距离。
➢CSS 背景属性指的是 content 和 padding 区域。
➢CSS 属性中的 width 和 height 指的是 content 区域的宽和高。
以3D 的方式更清晰地描述它们的关系，如图7.2 所示。
图7.2 CSS2.0 盒模型层次3D 示意图
此外，盒子还有块级盒子（block box）和内联盒子（inline box）之分。这两种盒子分别是块级元素与内联元素的默认盒状模型。
常见的块级元素有div、table、form、fieldset、h1～h6、p、ol、ul、li、hr 等。
常见的内联元素有span、a、label、input、select、textarea、img、embed、br 等。
在显示时，块级元素显示为独立的一块（矩形区域），它的前后都会换行；内联元素不会导致换行，它会和其他内联元素一起在一行内显示。
一般来说，内联元素只能包含文本和其他内联元素；而块级元素则能包含内联元素和其他块级元素。(www.chuimin.cn)
所有被body 包含的元素，要么是块级的，要么是内联的，要么既是块级的又是内联的；不存在一个能被body 包含但既非块级也非内联的元素。
注意
浏览器在呈现网页时，默认按源代码的顺序，从上到下（块级元素），从左到右（内联元素），网页中的各个元素依次向浏览器窗口中的文档显示区域的顶部流动并排列，这称为文档流。每个元素在文档流中都有它自己特定的位置和面积，改变某个元素的布局将直接影响其他元素的布局。
使用CSS 属性display 可以设置网页元素使用的盒状模型。如为块级元素的display属性赋值为inline，那么这个块级元素转变为内联元素；为内联元素的display 属性赋值为block，则这个内联元素转变为块级元素。
以下示例演示了块级元素转变为内联元素后不同的显示方式。
例7.1：
注意
CSS 代码中有部分样式规则被注释掉了，暂未使用。
代码运行结果如图7.3 所示。
图7.3 块级元素转变为内联元素
说明
以上代码中的div、p、ul、li 等元素都是块级元素，默认使用块级盒状模型。所以它们在各自的容器内都独占一行，它们的前后各有一次换行。
将范例中被注释掉的样式规则启用，再次运行。
结果如图7.4 所示。
图7.4 块级元素转变为内联元素
说明
将两个段落、三个列表项目、后两个div 块的display 属性为inline 后，它们将使用内联盒状模型，不再换行，而是从左往右依次排列，与其他内联元素共用一行。
以下分别介绍其他和盒状模型相关的CSS 属性。其中border 边框属性和background背景属性已在前一章介绍过，本章省略。
有关基于HTML与CSS网页设计的文章
视频教学资源学校目标了解WEB 和HTML 的关系理解HTML 标签在WEB 网页中的作用掌握HTML 文档的结构掌握常用的HTML 标签本章单词请在预习前完成下列单词的学习，将其写在横线上。嵌入）_______________________________________预习任务1.网页的标题标签应放置在（）标签内部。A.srcB.nameC.urlD.href3.用于描述网页大纲级别的标题标签共有（）种。A.url textB.link alterC.href textD.src alt5.HTML 语言中，某些标签只需要开始部分，可以不要结束部分，以下（）组属于这种情况。超链接10.在网页中使用锚标记显示各种不同的水果。水果列表水果描述......
2023-10-19
清除浮动可以理解为打破横向排列。图8.10例8.6 的运行结果_未清除浮动前说明按照之前所述的浮动的规则，secondDiv 上浮到firstDiv 右侧。假设出于某种需要，我们希望secondDiv 仍然出现在firstDiv 的下方，就像firstDiv没有设置浮动，仅为secondDiv 设置向左浮动那样。图8.11例8.7 的运行结果_清除左侧浮动说明在secondDiv 上设置了清除左侧浮动，也就是说它的左侧不能有浮动元素，这样导致它自己换行显示以满足这一规则。以下代码演示了清除右侧浮动的场景。......
2023-10-19
A.ID 选择器B.伪类选择器C.类选择器D.HTML 标签选择器3.假设有多条样式规则由一个独立的样式文件包含，现在有一个网页要使用这个样式文件中的样式规则，应在此网页中使用（ ）标签链接这个样式文件，并设置此标签的（ ）属性的值为这个样式文件的地址。登录页面CSS 的英文全称为Cascading Style Sheet，中文译名通常是层叠样式表或级联样式表。......
2023-10-19
如前所述，XHTML 是HTML 的替代者，它是从HTML 继承而来，但使用了XML 的规则进行严格规范。XHTML 与传统的HTML 的不同之处，主要来自于XML 语法规范的格式要求，即要求“格式良好”。这些要求统称为XHTML 文档的有效性。万维网联盟为XHTML 制定了3种DTD，分别适用于不同场景。过渡的：要求非常宽松的DTD，允许继续使用HTML4.01 的标签和属性，但要求格式良好。为确保XHTML 文档是有效的，应在文档第一行添加DOCTYPE即文档类型声明。DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">严格的：
2023-10-19
完成本任务所用到的主要知识点：标签标签标签问题已经制作了一个FLASH 动画，就像电视里的音乐MV 那样精致。这个动画的文件名为“gaoxyjni.swf”。分析FLASH 动画是网页中常见的多媒体类型。解决方案 新建网页文档3.html。 使用EditPlus 打开3.html 网页，在其中编写以下代码。图上机1.4弹出警告对话框单击按钮，浏览器将显示FLASH 动画，如图上机1.5 所示。图上机1.5FLASH 动画 使用chrome 浏览器测试这个网页，发现不能正常显示这个FLASH 动画。......
2023-10-19
图8.1例8.1 的运行结果_未使用浮动说明目前并没有使用浮动，4 个div 块作为块级元素在文档流中从上到下一次排列。图8.3例8.3 的运行结果_向右浮动说明secondDiv 因为浮动而脱离了正常的文档流之后，在它之后的thirdDiv 和forthDiv依次向上流动，填补了secondDiv 让出的空间，与之前的firstDiv 形成新的文档流。图8.6运行结果将secondDiv，thirdDic，forthDiv 都设置为向右浮动后的结果如图8.7 所示。......
2023-10-19
HTML是为“网页创建和其他可在网页浏览器中看到的信息”设计的一种标记语言。HTML 语言由蒂姆·伯纳斯·李给出原始定义，IETF用简化的SGML语法进行进一步发展，后来成为国际标准，目前由万维网联盟维护。使用XML 的严格规则的XHTML是W3C 计划中的HTML 的接替者。注意W3C 目前的建议是使用XHTML 1.1、XHTML 1.0 或HTML 4.01 进行网络出版。HTML 语法的核心是由W3C 定义的一些标记。图1.1例1.1 的运行结果说明HTML 文件中的第一个标签是 。这个标签告诉浏览器，这是 HTML 文件的结束点。......
2023-10-19
要想在网页中生成一条水平分割线，将不同的内容信息分开，使文字看起来更加清晰明确，那么就要使用到
2023-10-19
相关推荐