(X)HTML与CSS

CSS核心：包含块（Containing Block）2010年07月16日包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

在阅读本文前，请先理解一下：文档结构元素类型CSS的direction属性1视口（viewport）浏览器的窗口一般由3个部分组成，如图5所示。

图5 浏览器的视口连续媒介的用户端（例如电脑的浏览器）通常提供给用户一个视口（屏幕上的一个窗口或浏览区域），用户通过它来浏览文档。

当视口尺寸改变时（例如调整浏览器的窗口大小），用户端可能会改变文档的布局。

如果视口比文档设定的大小要小，用户端往往会提供滚动机制（例如浏览器的滚动条）。

对于一个渲染区域而言，最多只能有一个视口，不过用户端可以对多个渲染区域加以渲染（即对同一文档提供不同的视口）。

2 包含块在浏览器生成显示的页面的时候，每一个框都有一个定位，这个定位受其包含块的影响，不过它不被包含块所限制，而且可能会溢出到包含块之外。

CSS手册中，对于一个元素的包含块的定义如下：1根元素存在的包含块称为初始包含块。

在(X)HTML中，根元素是html元素（尽管有的浏览器会不正确地使用body元素）。

而初始包含块的direction属性与根元素相同。

(direction属性指定了块的基本书写方向，它还规定了表格列布局的方向、水平溢出的方向等。

)初始包含块的宽度可以由根元素的width属性指定。

如果该属性取值为“auto”，用户端提供初始宽度（如，视口的当前宽度）。

初始包含块的高度可以由根元素的height属性指定。

如果该属性取值为“auto”，包含块的高度将调整以适应文档内容（即由其内容决定其高度）。

初始包含块不可以被定位或浮动（即，用户端忽略根元素的position和float属性）。

HTML5+CSS3 内容溢出
overflow属性检索或设置当对象的内容溢出其指定高度及宽度时如何管理内容。

这个属性定义溢出元素内容区的内容会如何处理。

如果值为scroll，不论是否需要，用户代理都会提供一种滚动机制。

因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

语法：
上述语法中，参数含义：
●visible 不剪切内容也不添加滚动条。

假如显式声明此默认值，对象将被剪切为包含对
象的window或frame的大小。

并且clip属性设置将失效。

●auto 此为body对象和textarea的默认值。

在需要时剪切内容并添加滚动条。

●hidden 不显示超过对象尺寸的内容。

●scroll 总是显示滚动条。

除此之外，还包含有overflow-x和overflow-y属性，其参数与overflow属性近似相同。

示例：15-2 overflow.html
执行上述代码可以了解到scroll值与auto值的区别。

内容溢出时
显示滚动条。

规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。

信息通信INFORMATION & COMMUNICATIONS 2020年第7期(总第211期)2020(Sum. No 211)基于HTML5+CSS3的网页设计实现与优化宫道(青岛科技大学，山东青岛266000)摘要:HTML 和CSS 作为网页前端开发所运用的主要技术,如何灵活运用，使得web 开发出来的页面布局和效果满足用户的需要是技术人员和项目组负责人的核心工作之一。

HTML5包含的新元素、标签和属性能够使得技术人员在开发的 过程中将网页的布局和效果清晰地展示出来。

文章以蛋糕店网站首页页面为对象，实现基于HTML5+CSS3的网页页面 设计与优化。

关键词:HTML5; CSS3;网页布局；网页优化中图分类号:TP393.092 文献标识码:B文章编号：1673-1131(2019)07-0291-02随着互联网技术的不断深入与发展，超文本标记语言HTML 本身作为实现网页设计的基本语言与技术，也在不断 地进步与更新。

至2014年,HTML5的规范与标准正式形成,当下的网页前端开发语言与技术HTML5+CSS3在先前的版本上增加了许多新的元素，使得网页页面的结构和呈现的效果更好，页面更加清晰,具体实现与优化过程如下。

1 HTML5与CSS3在网页设计中的重要性HTML 是网页设计与实现的一种语言，通过计算机网络来实现网页的功能与效果。

CSS3在网页设计的基础之上，对 其展示的效果进行控制以满足企业与用户的需要叫不仅如此,由于网页设计控制语言的内容繁多,如果逐一进行描述,难免复杂，所以，需要通过设计技术来对重复的内容进行集成，而CSS3能够满足这样的需求，将集成的各种语言清晰而简洁地 展示出来。

HTML5+CSS3的网页设计缩减了网页大量重复的代码，也增强了网页的拓展性，使得网页设计美观而形式多样。

2 HTML5的特点HTML5在HTML4的基础之上，提供了更丰富而强大的 程序接口，能够为复杂的网页设计提供更多接口的支持，并且 不同的需求可以通过不同的接口来实现。