欢迎来到天天文库
浏览记录
ID：57252655
大小：4.65 MB
页数：46页
时间：2020-08-03
《HTML5+CSS3网页设计基础-第六章-CSS盒子模型课件.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、第1页第6章CSS盒子模型本章概述本章的学习目标主要内容第2页本章概述盒模型是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子。一个盒子包括content（实际内容）、padding（内边距）、border（边框）和margin（外边距）。本章将具体介绍盒子的各种外观属性和背景属性及其设置方法。第3页本章的学习目标理解盒子模型的概念。掌握盒子模型宽度和高度属性的意义及其设置方法。掌握盒子模型边框属性的意义及其设置方法。掌握盒子模型边距属性的意义及其设置方法。掌握盒子模型背景颜色和背景图像设置方法。掌握CSS3渐变背景的设置方法。掌握综合应用设置盒子属性制作页
2、面的方法。第4页主要内容6.1盒模型简介6.2盒子外观属性6.3背景属性6.4实训6.5本章小结第5页6.1盒模型简介盒模型是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子。一个盒子包括content（实际内容）、padding（内边距）、border（边框）和margin（外边距）。第6页6.2盒子外观属性本节主要内容：案例分析盒模型的宽和高盒子边框属性盒模型边距属性案例制作第7页6.2.1案例分析【案例展示】首页-企业新闻。使用盒模型的基本知识设计网站首页-企业新闻局部页面。【知识要点】盒模型的宽度、高度、内边距、边框和外边距。【学习目标】掌握设置盒子
3、属性的方法。参考代码：6-2.html第8页6.2.2盒模型的宽和高语法：width:auto
4、length
5、%height:auto
6、length
7、%参数：auto：浏览器计算实际的宽度（高度）。length：自定义元素的宽度（高度），常用取值单位为像素px。%：定义基于父元素宽度（高度）的百分比宽度（高度）。参考示例：6-2-1.html6.2.2盒模型的宽和高1.盒子模型W3C模型中，width/height=content盒子实际宽度/高度=content+border+paddingIE模型中，width/height=content+padding+b
8、order盒子实际宽度/高度=width而盒子所占空间=盒子实际宽度/高度+margin。图6-1所示的盒子模型中，默认采用W3C模型，如图6-4所示。实际宽度=200+10*2+3*2=226px，实际高度=100+10*2+3*2=126px，所占空间宽度=226+20*2=266px，所占空间高度=126+20*2=166px。第9页6.2.2盒模型的宽和高2.box-sizing属性盒子采用何种模型，可以用box-sizing属性设置设置标准的盒模型（默认值）box-sizing：content-box;标准的盒模型的width和height只包括内容（c
9、ontent）的宽度和高度设置IE模型box-sizing：border-box;设置盒子宽度和高度的时候，其包括：content+padding+border第10页6.2.2盒模型的宽和高3.应用范围盒子的宽度和高度适用于块级（block）元素和内联（inline-block）元素，行内元素无效。参考示例6-2-2.htmlspan是行级元素，设置的宽度和高度无效。第11页6.2.2盒模型的宽和高4.元素类型与元素类型转换(1)文档中元素都可以划归为block和inline两种类型块级元素(block)，块级元素的宽度为100%，始终占据一行。
10、>、
、
11、display:inline-block，元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。display:none，元素将被隐藏，该元素及其所有内容不再显示，也不占用文档中的空间。参考示例：6-2-3.html第13页第14页6.2.3盒子的边框属性1.边框宽度（border-width）语法：border-width:1~4medium
12、thin
13、thick
14、length;参数：medium：定义中等的边框（默认）。thin：定义细的边框。thick：定义粗的边框。length：自定义边框的宽度，常用取值单位为像素px。示例：设置段
15、落的边框宽
此文档下载收益归作者所有
