HTML5+CSS3+JavaScript网页设计基础与实战（微课版）（中篇，共上中下3篇）.pptxVIP

第4章设计网页页面4.1引入盒模型4.2使用CSS浮动与定位4.3设置显示与隐藏

了解盒模型结构与z-index属性理解CSS定位的区别与应用场景熟悉控制显示与隐藏的相关属性

引言一个完整美观的静态网页，主要是由HTML标签与具有美化功能的CSS构成，HTML标签创建网页的基本布局，而CSS相当于为网页“换上美丽大方的衣服”。CSS可以提高网页的美观度和速度，能更好地控制页面布局。本章将重点介绍盒模型的应用，显示与隐藏以及定位的使用。这些CSS属性的应用提升了网页的页面效果，使其变得更多样化。

4.1引入盒模型盒模型内容概述案例—新闻列表border属性padding属性cursor属性怪异盒模型margin属性

4.1引入盒模型4.1.1盒模型内容概述在CSS中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是使用CSS实现准确布局，处理元素排列的关键。盒模型（BoxModel）主要用于CSS设计页面布局，它规定网页元素如何显示以及元素间的相互关系，开发者可用CSS定义元素拥有像盒子一样的外形和平行空间，合理使用盒模型进行网页布局的设计，能很大程度上提升网页的美观度。

4.1引入盒模型4.1.1盒模型内容概述盒模型结构主要由content、padding、border和margin4个部分构成，其结构如图所示。盒模型结构主要由content、padding、border和margin4个部分构成，其结构如图所示。盒模型的content内容指块元素（“盒子”）里面的包含的文字、图片、超链接、音频、视频等，由CSS的宽和高两个属性决定。

4.1引入盒模型4.1.2padding属性padding属性也称为填充属性，控制元素所有四条边的内边距区域，一个元素的内边距区域指的是其内容与其边框之间的空间。padding属性可调整内容在容器中的位置关系，它的值是额外加在元素原有大小之上的，会把元素撑大。若想使元素保持原有的大小，则需要删除额外添加的padding。

4.1引入盒模型4.1.2padding属性padding属性是其相关属性padding-top、padding-bottom、padding-left和padding-right的简写，padding的相关属性具体说明如表所示。相关属性属性说明padding在一个声明中设置所有内边距的属性，属性值通常为像素值或百分比padding-top设置元素的上内边距padding-bottom设置元素的下内边距padding-left设置元素的左内边距padding-right设置元素的右内边距

4.1引入盒模型4.1.2padding属性padding属性的值可以通过复合写法有多种设置方式，其基本语法格式如下。语法格式padding:上内边距右内边距下内边距左内边距padding:上内边距左右内边距下内边距padding:上下内边距左右内边距padding:上下左右内边距

4.1引入盒模型4.1.2padding属性padding属性的注意事项padding属性会出现撑开父元素“盒子”的情况。撑开父元素是指父元素跟随子元素的padding值一起变大。子元素不设置宽度而是继承父元素的宽度，此时为子元素设置padding的值，若子元素整体宽度未超过父元素，则不会撑开父元素；若子元素整体宽度超过父元素，则会撑开父元素。padding属性的值只对内容产生效果，而不会对背景图有任何效果。

4.1引入盒模型4.1.3border属性border属性可定义一个元素的边框宽度、样式和颜色。在CSS样式中，border属性是其3个相关属性border-width、border-style和border-color的简写。相关属性属性说明border-width设置边框宽度，属性值为数值，常用单位为像素（px）border-style设置边框线样式，属性值有none（无边框）、solid（实线）、dashed（虚线）、dotted（点状）和double（双线）border-color设置边框颜色，属性值可以是颜色的英文单词或十六进制值或RGB值

4.1引入盒模型4.1.3border属性3个边框属性可连写，连写顺序为边框宽度（border-width）、边框线样式（border-style）和边框颜色（border-color），在进行边框样式的设置时，使用连写格式可使开发者编写代码更快捷，代码可读性也更好。border属性的语法格式如下。语法格式border:border-widthborder-styleborder-color;例：border:1pxsolid#aaa;

4.1引入盒模型4.1.4