第15章 CSS3的盒模型及网页布局(HTML5与CSS3 Web前端开发技术)

第15章 CSS3的盒模型及网页布局 (HTML5与CSS3 Web前端开发技术)
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
盒模型是CSS控制页面布局的一个非常重要的概念，页 面上的所有元素，包括文本、图像、超级链接、div块等， 都可以被看作盒子。由盒子将页面中的元素包含在一个矩形 区域内，这个矩形区域则称为“盒模型”。
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
15.1.3 CSS3新增的与盒相关的属性 1.overflow-x与overflow-y属性
当指定了盒的宽度与高度后，可能出现盒子无法承载其中 内容的情况，为了避免内容溢出，这时可使用overflow属 性来指定如何显示盒中容纳不下的内容。
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
示例15-1对2个含有文字信息的盒模型进行了内容设置
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
2. 边界 边界（margin）是盒模型与其他盒模型之间的距离，使
用margin属性定义。示例15-2演示了边界设置. margin: auto | length;
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
示例15-10使用了box-sizing属性，每个盒子的总宽度为 浏览器宽度的50%，实现了一个精确的布局。
HTML5+CSS3 Web前端开发技术
15.2 CSS布局常用属性
常用的布局方式主要有定位式和浮动式两种，相应布局 属性为定位属性（position）和浮动属性（float）。 15.2.1 定位属性（position）
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
网页页面布局的过程可以看作在页面空间中摆放盒子的 过程。通过调整盒子的边框、边界等参数控制各个盒子，实 现对整个网页的布局。
盒模型由内到外依次分为内容 （content）、填充 （padding）、边框（border） 和边界（margin）4部分。盒子 的实际大小为这几部分之和，图 15-1所示的盒子宽度为：左边界+ 左边框+左填充+内容宽度+右填 充+右边框+右边界。
使用position属性可以精确控制盒子的位置，其语法格 式如下。
position: static |relative | absolute | fixed
HTML5+CSS3 Web前端开发技术
15.2 CSS布局常用属性
1．静态定位 设置position属性的值为static，或不做设置即缺省时默 认为static，元素按照HTML规则定位。
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
2. text-overflow属性 text-overflow属性用于指定盒子中文本溢出的显示方
式，可以在盒的末尾显示一个代表省略的符号"…"。
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
3. box-shadow属性 box-shadow属性让盒在显示时产生阴影效果。box-
HTML5+CSS3 Web前端开发技术
15.2 CSS布局常用属性
2．相对定位 设置position属性的值为relative时即为相对定位，设
置盒子相对其原本位置的定位。相对定位的盒子占用原页面 空间。
HTML5+CSS3 Web前端开发技术
15.2 CSS布局常用属性
3．绝对定位 设置position属性的值为absolute时即为绝对定位，设
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
3.填充
填充（padding）用来设置内容和盒子边框之间的距离，可用 padding属性设置。
padding: length;
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
4. 边框 边框（border）是盒模型中介于填充（padding）和边
界（margin）之间的分界线。
（1）边框样式 （2）边框宽度 （3）边框颜色
HTML5+CSS3wenku.baidu.comWeb前端开发技术
15.1 CSS盒模型
示例15-4对边框进行了设置.
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
15.1.2 盒的类型 CSS中的盒子可分为
block类型与inline类型 ，使用display属性来定 义。
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
15.1.1 盒模型的组成 1.内容 内容（content）是盒子里的“物品”，是盒模型中必
须有的部分，可以是网页上的任何元素，如文本、图片、视 频等各种信息。
定义盒模型语法格式如下：
width: auto | length; height: auto | length; overflow: auto | visible | hidden | scroll;
position: relative; left:0px; top:0px;
HTML5+CSS3 Web前端开发技术
15.2 CSS布局常用属性
4．层叠定位属性（z-index） 被定位的元素会挡住部分其他元素，可以通过层叠定位属性 （z-index）定义页面元素的层叠次序。z-index的取值 可以为负数，表示各元素间层次关系，值大者在上，当为负 数时表示该元素位于页面之下。
置盒子相对其具有position设置的父对象进行定位。 （1）父对象有position属性设置
HTML5+CSS3 Web前端开发技术
15.2 CSS布局常用属性
（2）父对象无position属性设置 绝对定位元素的所有层次父对象均无position属性设置
时，该元素以body即浏览窗口为参照绝对定位。如示例 15-13中，删除A图片父对象position属性设置，即删除 如下代码行：
shadow属性的指定方式如下。 box-shadow: xlength ylength r color
HTML5+CSS3 Web前端开发技术
15.1 CSS盒模型
4. box-sizing属性 使用box-sizing属性，可以指定用width属性与height
属性指定的宽度值与高度值是否包含元素的填充区域（ padding）与边框（border）的宽度与高度，从而实现更 为精确的定位。