HTML5+CSS3网页设计基础 第六章 CSS盒子模型
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第21页
6.2.5 案例制作
制作完成演示案例:首页企业新闻局部页面。 参考代码 6-2.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第22页
6.3 背景属性
本节主要内容：
案例分析
background 属性
第19页
6.2.4 盒模型边距属性
1. 内边距
语法：padding-top:auto | length padding-right:auto | length padding-bottom:auto | length padding-left:auto | length padding:1~4 auto | length 参数： auto：浏览器计算内边距。 length：内边距值，常用取值单位为像素px，默认值是 0px，不能为负数。
RGB代码rgb(r,g,b)。
示例：p{borer-color: #CCC #FF0000; }
/*上下边框灰色，左右边框红色*/
边框样式设置参考示例：6-2-4.html
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第16页
6.2.3Leabharlann Baidu盒子的边框属性
4. 边框综合属性设置（border）
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第12页
6.2.2 盒模型的宽和高
(2) 使用 display属性对元素的类型进行转换
display:inline，元素将显示为行内元素(行内元素默认的 display属性值) display:block，元素将显示为块元素(块元素默认的 display属性值) display:inline-block，元素将显示为行内块元素，可以 对其设置宽高和对齐等属性，但是该元素不会独占一行。 display:none，元素将被隐藏，该元素及其所有内容不再 显示，也不占用文档中的空间。 参考示例：6-2-3.html
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第18页
6.2.3 盒子的边框属性
6. 盒子阴影（box-shadow）
语法：box-shadow: h-shadow v-shadow blur spread color inset 参数：
h-shadow：水平阴影的位置，允许负值，必需。
2.边框样式（border-style）
语法：border-style: 1~4 none| solid | dashed | dotted | double | groove | ridge | inset | outset; 参数： none：无边框。 solid：边框为单实线。 dashed：边框为虚线。 dotted：边框为点线。 double：边框为双实线。 groove：根据border-color的值画3D凹槽。 ridge：根据border-color的值画棱形边框。 inset：根据border-color的值画3D凹边。 outset：根据border-color的值画3D凸边。 示例：p{borer-style: dashed solid; } /*上下边虚线，左右边实线*/
v-shadow：垂直阴影的位置，允许负值，必需。 blur：模糊距离，可选。
spread：阴影的尺寸，可选。
color：阴影的颜色，可选。 inset：将外部阴影 (outset) 改为内部阴影，可选。
参考示例：6-2-8.html ， 6-2-9.html
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
语法：border-top: border-width border-style border-color 其他各边的设置方法相同。
示例：
border-bottom:2px solid #999; /*上边框样式2px的灰色实线*/ 用border属性设置四条边框共同的样式。
语法：border:border-width border-style border-color
设置盒子宽度和高度的时候，其包括：content+padding+border
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第10页
6.2.2 盒模型的宽和高
3. 应用范围
盒子的宽度和高度适用于块级（block）元素和内联（ inline-block）元素，行内元素无效。 参考示例6-2-2.html span是行级元素，设置的宽度和高度无效。
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第5页
6.2 盒子外观属性
本节主要内容：
案例分析
盒模型的宽和高
盒子边框属性 盒模型边距属性 案例制作
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第6页
6.2.1 案例分析
【案例展示】首页-企业新闻。使用盒模型的基本知识设 计网站首页-企业新闻局部页面。 【知识要点】盒模型的宽度、高度、内边距、边框和外边 距。 【学习目标】掌握设置盒子属性的方法。 参考代码：6-2.html
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第20页
6.2.4 盒模型边距属性
2. 外边距
语法：margin-top:auto | length margin -right:auto | length margin-bottom:auto | length margin -left:auto | length margin:1~4 auto | length 参数： auto：浏览器计算外边距，设置为对边的值。 length：外边距值，常用取值单位为像素px，默认值是 0px。可以为负数。 参考示例6-2-10.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第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>和表单元素等都是行级元素。
示例： border:1px solid green; /*四条边框都是1px的绿色实线*/ 参考示例：6-2-5.html
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第17页
6.2.3 盒子的边框属性
5. 圆角边框（border-radius）
语法：border- radius:1~4 length |% / 1~4 length |% 参数： length：自定义圆角半径的大小，常用取值单位为像素px %：以百分比定义圆角半径的大小。 第一个参数表示圆角的水平半径，第二个参数表示圆角的 垂直半径，两个参数之间用“/”隔开，如果第二个参数省 略，则默认等于第1个参数。 属性值遵循值复制的原则，可以设置1~4个值。 参考示例：6-2-6.html，6-2-7.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第2页
本章的学习目标
理解盒子模型的概念。 掌握盒子模型宽度和高度属性的意义及其设置方 法。 掌握盒子模型边框属性的意义及其设置方法。 掌握盒子模型边距属性的意义及其设置方法。 掌握盒子模型背景颜色和背景图像设置方法。 掌握CSS3渐变背景的设置方法。 掌握综合应用设置盒子属性制作页面的方法。
参考示例：6-2-1.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第8页
6.2.2 盒模型的宽和高
1. 盒子模型
W3C模型中，width/height=content 盒子实际宽度/高度= content + border + padding IE模型中，width/height=content+padding+border 盒子实际宽度/高度= width 而盒子所占空间=盒子实际宽度/高度+margin。
length：自定义边框的宽度，常用取值单位为像素px。 示例：设置段落的边框宽度。 p{borer-width: thin; } /*四边都是细的边框*/ p{borer-width: 2px thick; }
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第14页
6.2.3 盒子的边框属性
图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。
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第1页
本章概述
盒模型是CSS中一个重要概念，文档中的每个元 素被描绘为矩形盒子。一个盒子包括content （实际内容）、padding（内边距）、border （边框）和margin（外边距）。 本章将具体介绍盒子的各种外观属性和背景属性 及其设置方法。
CSS渐变背景 背景和图像的透明度 案例著作
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第23页
6.3.1 案例分析
【案例展示】使用CSS文本、图片和背景的知识，设计网 页头部局部页面，显示效果如图所示。 【知识要点】盒子背景颜色、背景图片、渐变背景的设置。 【学习目标】掌握设置盒子背景属性的方法。
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第3页
主要内容
6.1 盒模型简介 6.2 盒子外观属性
6.3 背景属性
6.4 实训 6.5 本章小结
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第4页
6.1 盒模型简介
盒模型是CSS中一个重要概念，文档中的每个元素被描绘 为矩形盒子。一个盒子包括content（实际内容）、 padding（内边距）、border（边框）和margin（外边 距）。
第9页
6.2.2 盒模型的宽和高
2. box-sizing属性
盒子采用何种模型，可以用box-sizing属性设置 设置标准的盒模型（默认值）
box-sizing：content-box;
标准的盒模型的width和height只包括内容（content）的宽度和高度
设置IE模型
box-sizing：border-box;
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第15页
6.2.3 盒子的边框属性
3. 边框颜色（border-color）
语法：border-color:1~4 color; 参数： color的取值有如下几种。 预定义的颜色值，如blue、gray、red、yellow等。 十六进制#RRGGBB。
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第7页
6.2.2 盒模型的宽和高
语法：width:auto | length | % height:auto | length | % 参数： auto：浏览器计算实际的宽度（高度）。 length：自定义元素的宽度（高度），常用取值单位为像 素px。 %：定义基于父元素宽度（高度）的百分比宽度（高度）。
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第13页
6.2.3 盒子的边框属性
1. 边框宽度（border-width）
语法：border-width:1~4 medium | thin | thick |length; 参数： medium：定义中等的边框（默认）。 thin：定义细的边框。 thick：定义粗的边框。
HTML5+CSS3网页设计基础
第21页
6.2.5 案例制作
制作完成演示案例:首页企业新闻局部页面。 参考代码 6-2.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第22页
6.3 背景属性
本节主要内容：
案例分析
background 属性
第19页
6.2.4 盒模型边距属性
1. 内边距
语法：padding-top:auto | length padding-right:auto | length padding-bottom:auto | length padding-left:auto | length padding:1~4 auto | length 参数： auto：浏览器计算内边距。 length：内边距值，常用取值单位为像素px，默认值是 0px，不能为负数。
RGB代码rgb(r,g,b)。
示例：p{borer-color: #CCC #FF0000; }
/*上下边框灰色，左右边框红色*/
边框样式设置参考示例：6-2-4.html
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第16页
6.2.3Leabharlann Baidu盒子的边框属性
4. 边框综合属性设置（border）
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第12页
6.2.2 盒模型的宽和高
(2) 使用 display属性对元素的类型进行转换
display:inline，元素将显示为行内元素(行内元素默认的 display属性值) display:block，元素将显示为块元素(块元素默认的 display属性值) display:inline-block，元素将显示为行内块元素，可以 对其设置宽高和对齐等属性，但是该元素不会独占一行。 display:none，元素将被隐藏，该元素及其所有内容不再 显示，也不占用文档中的空间。 参考示例：6-2-3.html
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第18页
6.2.3 盒子的边框属性
6. 盒子阴影（box-shadow）
语法：box-shadow: h-shadow v-shadow blur spread color inset 参数：
h-shadow：水平阴影的位置，允许负值，必需。
2.边框样式（border-style）
语法：border-style: 1~4 none| solid | dashed | dotted | double | groove | ridge | inset | outset; 参数： none：无边框。 solid：边框为单实线。 dashed：边框为虚线。 dotted：边框为点线。 double：边框为双实线。 groove：根据border-color的值画3D凹槽。 ridge：根据border-color的值画棱形边框。 inset：根据border-color的值画3D凹边。 outset：根据border-color的值画3D凸边。 示例：p{borer-style: dashed solid; } /*上下边虚线，左右边实线*/
v-shadow：垂直阴影的位置，允许负值，必需。 blur：模糊距离，可选。
spread：阴影的尺寸，可选。
color：阴影的颜色，可选。 inset：将外部阴影 (outset) 改为内部阴影，可选。
参考示例：6-2-8.html ， 6-2-9.html
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
语法：border-top: border-width border-style border-color 其他各边的设置方法相同。
示例：
border-bottom:2px solid #999; /*上边框样式2px的灰色实线*/ 用border属性设置四条边框共同的样式。
语法：border:border-width border-style border-color
设置盒子宽度和高度的时候，其包括：content+padding+border
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第10页
6.2.2 盒模型的宽和高
3. 应用范围
盒子的宽度和高度适用于块级（block）元素和内联（ inline-block）元素，行内元素无效。 参考示例6-2-2.html span是行级元素，设置的宽度和高度无效。
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第5页
6.2 盒子外观属性
本节主要内容：
案例分析
盒模型的宽和高
盒子边框属性 盒模型边距属性 案例制作
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第6页
6.2.1 案例分析
【案例展示】首页-企业新闻。使用盒模型的基本知识设 计网站首页-企业新闻局部页面。 【知识要点】盒模型的宽度、高度、内边距、边框和外边 距。 【学习目标】掌握设置盒子属性的方法。 参考代码：6-2.html
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第20页
6.2.4 盒模型边距属性
2. 外边距
语法：margin-top:auto | length margin -right:auto | length margin-bottom:auto | length margin -left:auto | length margin:1~4 auto | length 参数： auto：浏览器计算外边距，设置为对边的值。 length：外边距值，常用取值单位为像素px，默认值是 0px。可以为负数。 参考示例6-2-10.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第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>和表单元素等都是行级元素。
示例： border:1px solid green; /*四条边框都是1px的绿色实线*/ 参考示例：6-2-5.html
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第17页
6.2.3 盒子的边框属性
5. 圆角边框（border-radius）
语法：border- radius:1~4 length |% / 1~4 length |% 参数： length：自定义圆角半径的大小，常用取值单位为像素px %：以百分比定义圆角半径的大小。 第一个参数表示圆角的水平半径，第二个参数表示圆角的 垂直半径，两个参数之间用“/”隔开，如果第二个参数省 略，则默认等于第1个参数。 属性值遵循值复制的原则，可以设置1~4个值。 参考示例：6-2-6.html，6-2-7.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第2页
本章的学习目标
理解盒子模型的概念。 掌握盒子模型宽度和高度属性的意义及其设置方 法。 掌握盒子模型边框属性的意义及其设置方法。 掌握盒子模型边距属性的意义及其设置方法。 掌握盒子模型背景颜色和背景图像设置方法。 掌握CSS3渐变背景的设置方法。 掌握综合应用设置盒子属性制作页面的方法。
参考示例：6-2-1.html
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第8页
6.2.2 盒模型的宽和高
1. 盒子模型
W3C模型中，width/height=content 盒子实际宽度/高度= content + border + padding IE模型中，width/height=content+padding+border 盒子实际宽度/高度= width 而盒子所占空间=盒子实际宽度/高度+margin。
length：自定义边框的宽度，常用取值单位为像素px。 示例：设置段落的边框宽度。 p{borer-width: thin; } /*四边都是细的边框*/ p{borer-width: 2px thick; }
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第14页
6.2.3 盒子的边框属性
图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。
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第1页
本章概述
盒模型是CSS中一个重要概念，文档中的每个元 素被描绘为矩形盒子。一个盒子包括content （实际内容）、padding（内边距）、border （边框）和margin（外边距）。 本章将具体介绍盒子的各种外观属性和背景属性 及其设置方法。
CSS渐变背景 背景和图像的透明度 案例著作
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第23页
6.3.1 案例分析
【案例展示】使用CSS文本、图片和背景的知识，设计网 页头部局部页面，显示效果如图所示。 【知识要点】盒子背景颜色、背景图片、渐变背景的设置。 【学习目标】掌握设置盒子背景属性的方法。
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第3页
主要内容
6.1 盒模型简介 6.2 盒子外观属性
6.3 背景属性
6.4 实训 6.5 本章小结
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第4页
6.1 盒模型简介
盒模型是CSS中一个重要概念，文档中的每个元素被描绘 为矩形盒子。一个盒子包括content（实际内容）、 padding（内边距）、border（边框）和margin（外边 距）。
第9页
6.2.2 盒模型的宽和高
2. box-sizing属性
盒子采用何种模型，可以用box-sizing属性设置 设置标准的盒模型（默认值）
box-sizing：content-box;
标准的盒模型的width和height只包括内容（content）的宽度和高度
设置IE模型
box-sizing：border-box;
HTML5+CSS3网页设计基础 第6章 CSS盒子模型
第15页
6.2.3 盒子的边框属性
3. 边框颜色（border-color）
语法：border-color:1~4 color; 参数： color的取值有如下几种。 预定义的颜色值，如blue、gray、red、yellow等。 十六进制#RRGGBB。
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第7页
6.2.2 盒模型的宽和高
语法：width:auto | length | % height:auto | length | % 参数： auto：浏览器计算实际的宽度（高度）。 length：自定义元素的宽度（高度），常用取值单位为像 素px。 %：定义基于父元素宽度（高度）的百分比宽度（高度）。
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第13页
6.2.3 盒子的边框属性
1. 边框宽度（border-width）
语法：border-width:1~4 medium | thin | thick |length; 参数： medium：定义中等的边框（默认）。 thin：定义细的边框。 thick：定义粗的边框。