第4章 设计网页页面-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）

第4章 设计网页页面 4.1 引入盒模型 4.2 使用CSS浮动与定位 4.3 设置显示与隐藏 了解盒模型结构与z-index属性 理解CSS定位的区别与应用场景 熟悉控制显示与隐藏的相关属性 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 引言 一个完整美观的静态网页，主要是由HTML标签与具有美化功能的CSS构成，HTML标签创建网页的基本布局，而CSS相当于为网页“换上美丽大方的衣服”。CSS可以提高网页的美观度和速度，能更好地控制页面布局。本章将重点介绍盒模型的应用，显示与隐藏以及定位的使用。这些CSS属性的应用提升了网页的页面效果，使其变得更多样化。 初心至善 匠心育人 4.1 引入盒模型 盒模型内容概述 案例—新闻列表 border属性 padding属性 cursor属性 怪异盒模型 margin属性 目录 Contents 初心至善 匠心育人 4.1 引入盒模型 4.1.1 盒模型内容概述 在CSS中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是使用CSS实现准确布局，处理元素排列的关键。盒模型（Box Model）主要用于CSS设计页面布局，它规定网页元素如何显示以及元素间的相互关系，开发者可用CSS定义元素拥有像盒子一样的外形和平行空间，合理使用盒模型进行网页布局的设计，能很大程度上提升网页的美观度。 初心至善 匠心育人 4.1 引入盒模型 4.1.1 盒模型内容概述 盒模型结构主要由content、padding、border和margin4个部分构成，其结构如图所示。 盒模型结构主要由content、padding、border和margin4个部分构成，其结构如图所示。 盒模型的content内容指块元素（“盒子”）里面的包含的文字、图片、超链接、音频、视频等，由CSS的宽和高两个属性决定。 初心至善 匠心育人 4.1 引入盒模型 4.1.2 padding属性 padding属性也称为填充属性，控制元素所有四条边的内边距区域，一个元素的内边距区域指的是其内容与其边框之间的空间。padding属性可调整内容在容器中的位置关系，它的值是额外加在元素原有大小之上的，会把元素撑大。若想使元素保持原有的大小，则需要删除额外添加的padding。 初心至善 匠心育人 4.1 引入盒模型 4.1.2 padding属性 padding属性是其相关属性padding-top、padding-bottom、padding-left和padding-right的简写，padding的相关属性具体说明如表所示。 相关属性 属性 说明 padding 在一个声明中设置所有内边距的属性，属性值通常为像素值或百分比 padding-top 设置元素的上内边距 padding-bottom 设置元素的下内边距 padding-left 设置元素的左内边距 padding-right 设置元素的右内边距 初心至善 匠心育人 4.1 引入盒模型 4.1.2 padding属性 padding属性的值可以通过复合写法有多种设置方式，其基本语法格式如下。 语法格式 padding:上内边距 右内边距 下内边距 左内边距 padding:上内边距 左右内边距 下内边距 padding:上下内边距 左右内边距 padding:上下左右内边距 初心至善 匠心育人 4.1 引入盒模型 4.1.2 padding属性 padding属性的注意事项 padding属性会出现撑开父元素“盒子”的情况。撑开父元素是指父元素跟随子元素的padding值一起变大。子元素不设置宽度而是继承父元素的宽度，此时为子元素设置padding的值，若子元素整体宽度未超过父元素，则不会撑开父元素；若子元素整体宽度超过父元素，则会撑开父元素。 padding属性的值只对内容产生效果，而不会对背景图有任何效果。 初心至善 匠心育人 4.1 引入盒模型 4.1.3 border属性 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.3 border属性 3个边框属性可连