第1页第6章CSS盒子模型本章概述本章的学习目标主要内容

第2页本章概述盒模型是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子。一个盒子包括content（实际内容）、padding（内边距）、border（边框）和margin（外边距）。本章将具体介绍盒子的各种外观属性和背景属性及其设置方法。

第3页本章的学习目标理解盒子模型的概念。掌握盒子模型宽度和高度属性的意义及其设置方法。掌握盒子模型边框属性的意义及其设置方法。掌握盒子模型边距属性的意义及其设置方法。掌握盒子模型背景颜色和背景图像设置方法。掌握CSS3渐变背景的设置方法。掌握综合应用设置盒子属性制作页面的方法。

第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案例分析【案例展示】首页-企业新闻。使用盒模型的基本知识设计网站首页-企业新闻局部页面。【知识要点】盒模型的宽度、高度、内边距、边框和外边距。【学习目标】掌握设置盒子属性的方法。参考代码：6-2.html

第8页6.2.2盒模型的宽和高语法：width:auto|length|%height:auto|length|%参数：auto：浏览器计算实际的宽度（高度）。length：自定义元素的宽度（高度），常用取值单位为像素px。%：定义基于父元素宽度（高度）的百分比宽度（高度）。参考示例：6-2-1.html

6.2.2盒模型的宽和高1.盒子模型W3C模型中，width/height=content盒子实际宽度/高度=content+border+paddingIE模型中，width/height=content+padding+border盒子实际宽度/高度=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只包括内容（content）的宽度和高度设置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%，始终占据一行。h1~h6、p、ul、ol、li、table、div和body等元素都是块级元素。行级元素(inline)，行级元素没有高度和宽度，行级元素前后没有换行符，没有固定的形状，显示时只占据其内容的大小。a、img、strong、b、em、i、span和表单元素等都是行级元素。第12页

6.2.2盒模型的宽和高(2)使用display属性对元素的类型进行转换display:inline，元素将显示为行内元素(行内元素默认的display属性值)display:block，元素将显示为块元素(块元素默认的display属性值)display:inline-block，元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。display:none，元素将被隐藏，该元素及其所有内容不再显示，也不占用文档中的空间。参考示例：6-2-3.html第13页

第14页6.2.3盒子的边框属性1.边框宽度（border-width）语法：border-width:1~4medium|th