CSS盒子模型.ppt
合集下载
CSS框模型、显示和隐藏PPT教学课件
如果提供两个，第一个用于上－下，第二个用 于左－右。
如果提供三个，第一个用于上，第二个用于左 －右，第三个用于下
不允许负值
2020/12/11
16
margin属性
2020/12/11
17
设置对象四边的外边距
检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－ 左的顺序作用于四边。
2020/12/11
4
重点难点：
CSS框模型 框模型的样式属性
2020/12/11
5
块元素和行内元素
网页中的元素分为块元素和行内元素。 块元素成块状显示，独占行；行内元素 不占满行，多个行内元素可在一行上显 示
块元素内能容纳其他的块元素和行内元 素，行内元素内只能容纳行内元素
2020/12/11
第四章 CSS框模型（盒模型）、 显示和隐藏
2020/12/11
1
本节课的内容:
块元素和行内元素 块元素和行内元素的转换 HTML常见的块元素和行内元素
框模型 网页中的框 框的特点 框的样式属性
2020/12/11
2
显示和隐藏
2020/12/11
3
本节课目标：
理解CSS框模型 掌握框模型的样式属性
Margin,padding只有宽度,透明 要求:完成时间20分钟
2020/12/11
25
隐藏和显示
2020/12/11
26
PPT教学课件
谢谢观看
Thank You For Watching
27
度，而不是整个框的宽度和高度
2020/12/11
13
内容的属性
width height
2020/12/11
如果提供三个，第一个用于上，第二个用于左 －右，第三个用于下
不允许负值
2020/12/11
16
margin属性
2020/12/11
17
设置对象四边的外边距
检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－ 左的顺序作用于四边。
2020/12/11
4
重点难点：
CSS框模型 框模型的样式属性
2020/12/11
5
块元素和行内元素
网页中的元素分为块元素和行内元素。 块元素成块状显示，独占行；行内元素 不占满行，多个行内元素可在一行上显 示
块元素内能容纳其他的块元素和行内元 素，行内元素内只能容纳行内元素
2020/12/11
第四章 CSS框模型（盒模型）、 显示和隐藏
2020/12/11
1
本节课的内容:
块元素和行内元素 块元素和行内元素的转换 HTML常见的块元素和行内元素
框模型 网页中的框 框的特点 框的样式属性
2020/12/11
2
显示和隐藏
2020/12/11
3
本节课目标：
理解CSS框模型 掌握框模型的样式属性
Margin,padding只有宽度,透明 要求:完成时间20分钟
2020/12/11
25
隐藏和显示
2020/12/11
26
PPT教学课件
谢谢观看
Thank You For Watching
27
度，而不是整个框的宽度和高度
2020/12/11
13
内容的属性
width height
2020/12/11
第12讲 盒子模型
21
• 内边距属性及其属性值
属性
属性值
描述
padding padding-top
length|%|inherit
简写属性，用于在一个声明 中设置四个方向的内边距
length|%|inherit 用于设置上内边距
padding-right length|%|inherit 用于设置右内边距
padding-left
– 取3个属性值时，第一个参数设置上边框的颜色，第二个 参数设置左、右边框的颜色，第三个参数设置下边框的 颜色，例如：
border-color: red blue green;
– 边框风格属性取4个属性值时，按顺时针方向依次设置上、 右、下、左边框的颜色，例如：
border-color: red blue green pink;
margin:7px 6px 8px 9px;
12.5 盒子内容的大小
• 盒子内容的大小分别使用width（宽度）和 height（高度）两个属性来设置。
• 盒子的实际大小等于：内容+内边距+外边距+ 边框，所以盒子的大小会随内容的大小增大而增 大。
33
12.6 盒子外边距合并
• 盒子外边距合并指的是默认情况下，两个或更 多个相邻块级元素在垂直外边距相遇时，会将 垂直方向上的两个外边距合并成一个外边距。
义也不一样：
– 取1个属性值时，表示四个方向的内边距一样，例如：
padding: 10px;
– 取2个属性值时，第一个参数设置上、下内边距，第二个 参数设置左、右内边距，例如：
padding:10px 6px;
– 取3个属性值时，第一个参数设置上内边距，第二个参数 设置左、右内边距，第三个参数设置内边距，例如：
• 内边距属性及其属性值
属性
属性值
描述
padding padding-top
length|%|inherit
简写属性，用于在一个声明 中设置四个方向的内边距
length|%|inherit 用于设置上内边距
padding-right length|%|inherit 用于设置右内边距
padding-left
– 取3个属性值时，第一个参数设置上边框的颜色，第二个 参数设置左、右边框的颜色，第三个参数设置下边框的 颜色，例如：
border-color: red blue green;
– 边框风格属性取4个属性值时，按顺时针方向依次设置上、 右、下、左边框的颜色，例如：
border-color: red blue green pink;
margin:7px 6px 8px 9px;
12.5 盒子内容的大小
• 盒子内容的大小分别使用width（宽度）和 height（高度）两个属性来设置。
• 盒子的实际大小等于：内容+内边距+外边距+ 边框，所以盒子的大小会随内容的大小增大而增 大。
33
12.6 盒子外边距合并
• 盒子外边距合并指的是默认情况下，两个或更 多个相邻块级元素在垂直外边距相遇时，会将 垂直方向上的两个外边距合并成一个外边距。
义也不一样：
– 取1个属性值时，表示四个方向的内边距一样，例如：
padding: 10px;
– 取2个属性值时，第一个参数设置上、下内边距，第二个 参数设置左、右内边距，例如：
padding:10px 6px;
– 取3个属性值时，第一个参数设置上内边距，第二个参数 设置左、右内边距，第三个参数设置内边距，例如：
项目六DIVCSS布局网课件.ppt
创建一个ID为top的CSS规则，打开“#top的CSS规则定义”对话框，DIV标签 的常见属性主要是在“方框”、“边框”与“定位”分类里设定的。
6.2 任务2： 认识DIV标签
方框分类属性 点击“方框”分类，如图所示。
1）width：设置DIV的宽度。 2）height：设置DIV的高度。 在此处width与height分别设为200，点击“确定”按钮，设计视图中的DIV。 3）padding：设置DIV的内边距，也就是内容到边框的距离。 4）margin：设置DIV的外边距，也就是边框到父容器或与其他容器之间的距 离。 设置所有padding为20，所有margin为20，点击“确定”按钮后效果如图所示。
有strong、a、span...</p> </body> 在浏览器中预览效果如图所示。
3、块元素与行内元素转换
块元素与行内元素可以通过 “区块”分类中display属性 的block（块）与inline（行内） 进行互相转换。
6.2 任务2： 认识DIV标签
<DIV>（division）是一个区块容器标记，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。<DIV>与</DIV>之间可以放 置任何内容，包括其他的DIV标签。也就是说DIV是一个没有特性的容器 而已。
正常DIV显示
6.2 任务2： 认识DIV标签
给DIV设置float属性，让div1右浮动，div2左浮动，在style内添加如下代码： #div2 {
float: left; } #div1 {
float: right; } 添V标签
6）clear：清除浮动。其值有left、right、both、none。 如上例，要想让div3不受div2浮动的影响，恢复其原始文档流位置显示，则在
6.2 任务2： 认识DIV标签
方框分类属性 点击“方框”分类，如图所示。
1）width：设置DIV的宽度。 2）height：设置DIV的高度。 在此处width与height分别设为200，点击“确定”按钮，设计视图中的DIV。 3）padding：设置DIV的内边距，也就是内容到边框的距离。 4）margin：设置DIV的外边距，也就是边框到父容器或与其他容器之间的距 离。 设置所有padding为20，所有margin为20，点击“确定”按钮后效果如图所示。
有strong、a、span...</p> </body> 在浏览器中预览效果如图所示。
3、块元素与行内元素转换
块元素与行内元素可以通过 “区块”分类中display属性 的block（块）与inline（行内） 进行互相转换。
6.2 任务2： 认识DIV标签
<DIV>（division）是一个区块容器标记，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。<DIV>与</DIV>之间可以放 置任何内容，包括其他的DIV标签。也就是说DIV是一个没有特性的容器 而已。
正常DIV显示
6.2 任务2： 认识DIV标签
给DIV设置float属性，让div1右浮动，div2左浮动，在style内添加如下代码： #div2 {
float: left; } #div1 {
float: right; } 添V标签
6）clear：清除浮动。其值有left、right、both、none。 如上例，要想让div3不受div2浮动的影响，恢复其原始文档流位置显示，则在
第5章 CSS盒子模型[109页]
![第5章 CSS盒子模型[109页]](https://img.taocdn.com/s3/m/60e5fcb4b1717fd5360cba1aa8114431b90d8e60.png)
第5章 CSS盒子模型
基于HTML5的网页设计及应用（第2版）
章节概述/ Summary
本章主要介绍CSS盒子模型的概念和相关属性，利用这些属性更好 地控制页面中各个元素的位置，使得页面的整体布局更加合理，效果更 加吸引人。
目录/Contents
01 盒子模型的概念
02 盒子模型的相关属性
03 盒子模型之间的关系
5.2 盒子模型的相关属性
5.2 盒子模型的相关属性
在CSS中，通过width和height属性设定盒子内容的宽度与高度大小，通 过border、padding和margin分别设置盒子的边框、内边距、外边距大小。 border、padding和margin在上下左右四个方向上都有对应的属性，可单独 设定样式。
border-radius:30px/10px;
/*4个角的横轴半径为30px，纵轴半径为10px*/
border-radius:10px;
/*4个角的横/纵轴半径均为10px*/
border-radius:10px 20px;
/*1和3角的横/纵轴半径为10px，2和4角的横/纵轴半径为20px */
5.2.1 er属性
注意:
利用border-radius属性还可以将图像设置为圆角。例如：
img{ border-radius:50%;
}
上述代码表示4个角的横/纵轴半径是图像的宽度和高度的50%，如果图像的 宽度和高度一样则显示为圆形图像，如果不一样则显示为椭圆形图像。
5.2.1 border属性
5.2.1 border属性
案例演示 创建一个网页，设置图像边框。
5.2.2 内容属性
内容是盒子模型的核心，它呈现了盒子模型中显示的信息，这些信息可以 是文本、图像等多种类型。
基于HTML5的网页设计及应用（第2版）
章节概述/ Summary
本章主要介绍CSS盒子模型的概念和相关属性，利用这些属性更好 地控制页面中各个元素的位置，使得页面的整体布局更加合理，效果更 加吸引人。
目录/Contents
01 盒子模型的概念
02 盒子模型的相关属性
03 盒子模型之间的关系
5.2 盒子模型的相关属性
5.2 盒子模型的相关属性
在CSS中，通过width和height属性设定盒子内容的宽度与高度大小，通 过border、padding和margin分别设置盒子的边框、内边距、外边距大小。 border、padding和margin在上下左右四个方向上都有对应的属性，可单独 设定样式。
border-radius:30px/10px;
/*4个角的横轴半径为30px，纵轴半径为10px*/
border-radius:10px;
/*4个角的横/纵轴半径均为10px*/
border-radius:10px 20px;
/*1和3角的横/纵轴半径为10px，2和4角的横/纵轴半径为20px */
5.2.1 er属性
注意:
利用border-radius属性还可以将图像设置为圆角。例如：
img{ border-radius:50%;
}
上述代码表示4个角的横/纵轴半径是图像的宽度和高度的50%，如果图像的 宽度和高度一样则显示为圆形图像，如果不一样则显示为椭圆形图像。
5.2.1 border属性
5.2.1 border属性
案例演示 创建一个网页，设置图像边框。
5.2.2 内容属性
内容是盒子模型的核心，它呈现了盒子模型中显示的信息，这些信息可以 是文本、图像等多种类型。
08-CSS盒子模型
在浏览器中的浏览效果如图：
2022/7/23
8.4 外边距margin
设置外边距的最简单的方法就是使用 margin 属性， margin 属性接受任何长度单位，可以是像素、英寸 、毫米或 em。margin 可以设置为 auto，更常见的 做法是为外边距设置长度值。
下面的代码演示为标签定义外边距：
在浏览器中的浏览效果如图所示：
可以看到，虽然两个段落的宽度定义相同，但由于第 一个段落没有内边距，第二个段落设置了内边距，导 致两个段落在页面上占据的水平宽度不相同。第二个 段落在页面上占据的宽度为 100px(width)+50px(margin)*2+1px(border)*2=202p x。
2022年7月23日
第8章 CSS盒子模型
第1 页
2022/7/23
学习目标
掌握盒子模型的结构 掌握边框的相关属性设置与简写属性定义 掌握内外边距的定义，用开发者工具查看元素样式
2022/7/23
8.1 CSS盒子模型概念
下图描绘了盒子模型的结构，可以看到一个HTML元素 对应的盒子包括元素的内容、内边距、边框线和外边 距。
2022/7/23
2022/7/23
8.2 边框border
下面的代码为p定义了实线，为div定义点线：
由于边框线有四条，可以分别为不同的边框线设置不 同的样式：
2022/7/23
8.2 边框border
从最上的边框线开始，按照顺时针方向给四条边框线 的样式赋值，因此段落的上边框线为点线；右边框线 为实线；下边框线为双线；左边框线为虚线。如果有 HTML代码：
8.6 利用开发者工具查看元素盒子模型
开发者工具整体分为两块，上面为功能模块面板，可 以在其中选择需要的功能，如“Elements”、 “Network”、“Sources”等，在功能模块面板中有 两个按钮需要注意，一个是“元素检查按钮”，另外 一个为“设备模式切换按钮”。下面为功能区，用户 在功能模块面板中选择的功能不同，功能区结构和内 容也不同。下面以查看元素样式为例介绍怎样使用开 发者工具。单击功能模块面板中的“元素”，下面的 功能区分为两列，左边显示的是网页的文档（源代码 ）结构，右边显示被用户选择的网页元素的样式。
2022/7/23
8.4 外边距margin
设置外边距的最简单的方法就是使用 margin 属性， margin 属性接受任何长度单位，可以是像素、英寸 、毫米或 em。margin 可以设置为 auto，更常见的 做法是为外边距设置长度值。
下面的代码演示为标签定义外边距：
在浏览器中的浏览效果如图所示：
可以看到，虽然两个段落的宽度定义相同，但由于第 一个段落没有内边距，第二个段落设置了内边距，导 致两个段落在页面上占据的水平宽度不相同。第二个 段落在页面上占据的宽度为 100px(width)+50px(margin)*2+1px(border)*2=202p x。
2022年7月23日
第8章 CSS盒子模型
第1 页
2022/7/23
学习目标
掌握盒子模型的结构 掌握边框的相关属性设置与简写属性定义 掌握内外边距的定义，用开发者工具查看元素样式
2022/7/23
8.1 CSS盒子模型概念
下图描绘了盒子模型的结构，可以看到一个HTML元素 对应的盒子包括元素的内容、内边距、边框线和外边 距。
2022/7/23
2022/7/23
8.2 边框border
下面的代码为p定义了实线，为div定义点线：
由于边框线有四条，可以分别为不同的边框线设置不 同的样式：
2022/7/23
8.2 边框border
从最上的边框线开始，按照顺时针方向给四条边框线 的样式赋值，因此段落的上边框线为点线；右边框线 为实线；下边框线为双线；左边框线为虚线。如果有 HTML代码：
8.6 利用开发者工具查看元素盒子模型
开发者工具整体分为两块，上面为功能模块面板，可 以在其中选择需要的功能，如“Elements”、 “Network”、“Sources”等，在功能模块面板中有 两个按钮需要注意，一个是“元素检查按钮”，另外 一个为“设备模式切换按钮”。下面为功能区，用户 在功能模块面板中选择的功能不同，功能区结构和内 容也不同。下面以查看元素样式为例介绍怎样使用开 发者工具。单击功能模块面板中的“元素”，下面的 功能区分为两列，左边显示的是网页的文档（源代码 ）结构，右边显示被用户选择的网页元素的样式。
CSS盒子模型-PPT课件
4.1 【案例7】知识点讲解
让IT教学更简单，让IT学习更有效
3、边框属性
（2）设置边框宽度（border-width）
border-width属性用于设置边框的宽度，其常用取值单位为像素px。同边框
样式一样，边框宽度也可以针对四条边分别设置，或综合设置四条边的宽度，具 体如下： • border-top-width：上边框宽度; • border-right-width：右边框宽度; • border-bottom-width：下边框宽度; • border-left-width：左边框宽度; • border-width：上边框宽度 [右边框宽度 下边框宽度 左边框宽度];
4.1 【案例7】知识点讲解
让IT教学更简单，让IT学习更有效
3、边框属性
（1）设置边框样式（border-style）
在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边
的样式，具体如下： • border-top-style:上边框样式; • border-right-style:右边框样式; • border-bottom-style:下边框样式; • border-left-style:左边框样式; • border-style:上边框样式 右边框样式 下边框样式 左边框样式; • border-style:上边框样式 左右边框样式 下边框样式; • border-style:上下边框样式 左右边框样式; • border-style:上下左右边框样式;
2、外边距属性
网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布 局网页，就需要为盒子设置外边距，所谓外边距指的是元素边框与相邻元素之间 的距离。 在CSS中margin属性用于设置外边距，它是一个复合属性，与内边距 padding的用法类似，设置外边距的方法如下： • margin-top:上外边距; • margin-right:右外边距; • margin-bottom:下外边距; • margin-left:左外边距; • margin:上外边距 [右外边距 下外边距 左外边距];
网页设计与制作说课稿（盒子模型） -完整课件PPT
教学重难点
教学重点
掌握DIV+CSS布局应用与技巧，熟练CSS语法规则。
教学难点
深入理解布局的精髓——盒子模型以及如何灵活、简练的应用。
提纲
教法与学法
◇课前分析
◇教学目标及重难点
1
◇教法与学法 ◇教学时间安排 ◇教学设计
小组讨论法
宏观： 项目教学法
◇教学反思
直观演示法
微观
任务驱动法
活动探究法
提纲 ◇课前分析 ◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
教材分析
上海交通大学出版社 《网页制作三合一案例教程》
第9章“CSS标准流布局”。 对页面进行整体布局——盒子 模型
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
学情分析
对文本、图形、动画等多媒体信息的处理技术 有了一定的使用经验，但基础差异大 计算机实际操作能力较弱 对理论讲解不感兴趣。 对网页内容、结构、效果等设计的优劣有一定 的感性认识，但自主创作设计能力不足
提纲 ◇课前分析 ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
展
示 与
自信感、成就感、责任心
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、 学、做、评”为一体。
提纲
布置作业
◇课前分析
◇教学目标及重难点
◇教法与学法
《网页设计》课件——第四章 盒子模型
边框成脊形
dashed 虚线
inset
使整个方框凹陷，即在外框内嵌入一个立体边框
solid
实线
outset 使整个方框凸起，即在外框内嵌外一个立体边框
double 双实线
➢ border-style属性为综合属性设置四边样式，必须按上右下左的顺时针顺序，省略时同样采用值复制的 原则，即1个值为4边，2个值为上下/左右，3个值为上/左右/下。
在复合属性中，边框属性border能同时设置4种边框。若果只需要给出一组边框的宽度、样式与颜色，可以通 过border-top、border-right、border-bottom、border-left分别设置。
举例 演示
【实例6-2】border边框属性的设置。
2 边距属性
边距属性分为：内边距padding和外边距marign两种。
比，使用百分比时，内边距的宽度值随着父元素宽度width的变化而变化而变化，与height无关。 ➢ padding也遵循值复制的原则，与border属性类似。 ➢ 当只对某个方向的内边距进行设置时，可以通过padding-top（上内边距）、padding-right
（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）分别设置。
表示4个边框的宽度都为3像素。 表示上下边框的宽度都为3像素，左右边框的宽度都为6像素。 表示上边框的宽度都为3像素，左右边框的宽度都为6像素 下边框的宽度都为9像素。
也可以按照border-top-width:宽度值、border-right-width:宽度值、border-bottomwidth:宽度值、border-left-width:宽度值逐个定义。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《网站设计》
CSS的盒子模型
CSS的盒子模型
❖ 盒子模型是CSS的基石之一，它指定元素如何显 示以及（在某种程度上）如何相互交互
❖ 页面上的每个元素都被浏览器看成是一个矩形的 盒子，这个盒子由元素的内容、填充、边框和边 界组成。
❖ 网页就是由许多个盒子通过不同的排列方式（上 下排列，并列排列，嵌套排列）堆积而成。
电子信息学院
吴克文
CSS的盒子模型
电子信息学院
吴克文
CSS的盒子模型
❖ 每个HTML元素都可以看作是一个装了东西的盒 子
❖ 盒子里面的内容到盒子的边框之间的距离即填充 (padding),盒子本身有边框(border),而盒子 边框外和其它盒子之间，还有边界(magin),如 图所示
❖ 默认情况下盒子的边框是无，背景色是透明，所 以我们在默认情况下看不到盒子
电子信息学院
吴克文
标准流
❖ HTML元素在标准状况下的定位方式 ❖ 行内元素在同一行内横向排列 ❖ 块级元素占满整个一行，在页面中竖向排列 ❖ 元素不会移动到其它地方去，各元素的盒子之间
不会发生重叠，对于嵌套的元素盒子也是嵌套的 关系
电子信息学院
吴克文
标准流下的盒子排列分析
<style type="text/css"> *{ border: 2px dashed #FF0066; padding: 10px; margin: 2px; } </style> <body> <div>网页的banner（块级元素）</div> <a href="#">行内元素1</a> <a href="#">行内2</a> <a href="#">行内3</a> <div>这是无名块<p>这是盒子中的盒子</p></div>
<body>
<div id="box1"><div id="box2">这是里面 的盒子</div>
padding: 10px 0px 10px 10px;
</body>
width:100px;}
电子信息学院
box_in_box.html
吴克文
盒子模型的特性
❖ 边界值margin可为负，填充padding不可为负 ❖ 边框border默认值为0，即不显示 ❖ 行内元素，如a，定义上下边界不影响行高(由
❖ 因此，不推荐对行内元素直接设置盒子属性，一 般先设置行内元素以块级元素显示，再设置它的 盒子属性。
电子信息学院
吴克文
改变行内元素的高度
❖ 如图所示，当增加行内元素的边界和填充时，行内元素 a占据浏览器的高度并没有增加，下面这个div块仍然在 原来的位置，导致行内元素盒子的上下部分重叠，而左 右部分不会受影响
line-height属性决模型的思考
❖ 边框是实的，我们可以看到实实在在的边框，而 填充和边界都是虚的，我们只能看到他们对元素 的影响
❖ 盒子模型中只能设置两类颜色，即边框颜色和背 景颜色
❖ 盒子模型可设置三类距离，即边界距离margin， 填充距离padding和边框值border
吴克文
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内 容宽度＋右填充＋右边框＋右边界
电子信息学院
吴克文
由“盒子”堆出来的网页版面
电子信息学院
吴克文
IE quirk模式下盒子的宽度
❖ 当将文档声明DOCTYPE删除后，IE对网页的解 释会进入quirk（怪异）模式，此时盒子的宽度 等于左边界＋宽度＋右边界
吴克文
盒子模型的应用
❖ 2.用盒子美化表格 ❖ 用css为table元素加一个1象素宽的border ❖ 制作1象素虚线边框（td）
Eg:美化表格.html 电子信息学院
吴克文
《网站设计》
盒子的定位
王斌
盒子的三种定位形式
❖ 在标准流下的定位（默认） ❖ 在浮动属性下的定位 ❖ 在定位属性下的定位
电子信息学院
吴克文
行内元素的盒子
❖ 行内元素的盒子永远只能在浏览器中得到一行高 度的空间（行高由line-height属性决定，如果 没设置该属性，则是内容的默认高度），如果给 它设置上下border，margin，padding等值， 导致其盒子的高度超过行高，那么它的盒子上下 部分将和其他元素的盒子重叠。
电子信息学院
吴克文
属性值的简写形式
❖ 方法是按照规定的顺序，给出2个、3个或者4个属性值， 它们的含义将有所区别，具体含义如下：
如果给出2个属性值，前者表示上下边框的属性，后者表 示左右边框的属性；
如果给出3个属性值，前者表示上边框的属性，中间的数 值表示左右边框的属性，后者表示下边框的属性；
吴克文
<style type="text/css"> #box1 {
background-color: #ddd;
body{border:1px dotted #FF0000}
</style> </head>
margin:15px;
padding:5px; } #box2 {
color: black; background-color: #aaa; margin: 20px;
电子信息学院
box_model.html
吴克文
height
margin-right border-right padding-right
padding-left
border-left
margin-left
电子信息学院
margin-top border-top padding-top
content
padding-bottom border-bottom margin-bottom width
如果给出4个属性值，依次表示上、右、下、左边框的属 性，即顺时针排序。
电子信息学院
吴克文
盒子模型的应用
❖1. 美化表单
❖ 网页中的表单控件在默 认情况下背景都是灰色 的，文本框边框是粗线 条，不够美观。
❖ 通过CSS改变表单的边 框样式、颜色和背景颜 色让文本框，按钮等变 得漂亮些。
Eg:表单美化.html 电子信息学院
❖ 因此当使用了盒子属性后切忌删除DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1transitional.dtd">
电子信息学院
CSS的盒子模型
CSS的盒子模型
❖ 盒子模型是CSS的基石之一，它指定元素如何显 示以及（在某种程度上）如何相互交互
❖ 页面上的每个元素都被浏览器看成是一个矩形的 盒子，这个盒子由元素的内容、填充、边框和边 界组成。
❖ 网页就是由许多个盒子通过不同的排列方式（上 下排列，并列排列，嵌套排列）堆积而成。
电子信息学院
吴克文
CSS的盒子模型
电子信息学院
吴克文
CSS的盒子模型
❖ 每个HTML元素都可以看作是一个装了东西的盒 子
❖ 盒子里面的内容到盒子的边框之间的距离即填充 (padding),盒子本身有边框(border),而盒子 边框外和其它盒子之间，还有边界(magin),如 图所示
❖ 默认情况下盒子的边框是无，背景色是透明，所 以我们在默认情况下看不到盒子
电子信息学院
吴克文
标准流
❖ HTML元素在标准状况下的定位方式 ❖ 行内元素在同一行内横向排列 ❖ 块级元素占满整个一行，在页面中竖向排列 ❖ 元素不会移动到其它地方去，各元素的盒子之间
不会发生重叠，对于嵌套的元素盒子也是嵌套的 关系
电子信息学院
吴克文
标准流下的盒子排列分析
<style type="text/css"> *{ border: 2px dashed #FF0066; padding: 10px; margin: 2px; } </style> <body> <div>网页的banner（块级元素）</div> <a href="#">行内元素1</a> <a href="#">行内2</a> <a href="#">行内3</a> <div>这是无名块<p>这是盒子中的盒子</p></div>
<body>
<div id="box1"><div id="box2">这是里面 的盒子</div>
padding: 10px 0px 10px 10px;
</body>
width:100px;}
电子信息学院
box_in_box.html
吴克文
盒子模型的特性
❖ 边界值margin可为负，填充padding不可为负 ❖ 边框border默认值为0，即不显示 ❖ 行内元素，如a，定义上下边界不影响行高(由
❖ 因此，不推荐对行内元素直接设置盒子属性，一 般先设置行内元素以块级元素显示，再设置它的 盒子属性。
电子信息学院
吴克文
改变行内元素的高度
❖ 如图所示，当增加行内元素的边界和填充时，行内元素 a占据浏览器的高度并没有增加，下面这个div块仍然在 原来的位置，导致行内元素盒子的上下部分重叠，而左 右部分不会受影响
line-height属性决模型的思考
❖ 边框是实的，我们可以看到实实在在的边框，而 填充和边界都是虚的，我们只能看到他们对元素 的影响
❖ 盒子模型中只能设置两类颜色，即边框颜色和背 景颜色
❖ 盒子模型可设置三类距离，即边界距离margin， 填充距离padding和边框值border
吴克文
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内 容宽度＋右填充＋右边框＋右边界
电子信息学院
吴克文
由“盒子”堆出来的网页版面
电子信息学院
吴克文
IE quirk模式下盒子的宽度
❖ 当将文档声明DOCTYPE删除后，IE对网页的解 释会进入quirk（怪异）模式，此时盒子的宽度 等于左边界＋宽度＋右边界
吴克文
盒子模型的应用
❖ 2.用盒子美化表格 ❖ 用css为table元素加一个1象素宽的border ❖ 制作1象素虚线边框（td）
Eg:美化表格.html 电子信息学院
吴克文
《网站设计》
盒子的定位
王斌
盒子的三种定位形式
❖ 在标准流下的定位（默认） ❖ 在浮动属性下的定位 ❖ 在定位属性下的定位
电子信息学院
吴克文
行内元素的盒子
❖ 行内元素的盒子永远只能在浏览器中得到一行高 度的空间（行高由line-height属性决定，如果 没设置该属性，则是内容的默认高度），如果给 它设置上下border，margin，padding等值， 导致其盒子的高度超过行高，那么它的盒子上下 部分将和其他元素的盒子重叠。
电子信息学院
吴克文
属性值的简写形式
❖ 方法是按照规定的顺序，给出2个、3个或者4个属性值， 它们的含义将有所区别，具体含义如下：
如果给出2个属性值，前者表示上下边框的属性，后者表 示左右边框的属性；
如果给出3个属性值，前者表示上边框的属性，中间的数 值表示左右边框的属性，后者表示下边框的属性；
吴克文
<style type="text/css"> #box1 {
background-color: #ddd;
body{border:1px dotted #FF0000}
</style> </head>
margin:15px;
padding:5px; } #box2 {
color: black; background-color: #aaa; margin: 20px;
电子信息学院
box_model.html
吴克文
height
margin-right border-right padding-right
padding-left
border-left
margin-left
电子信息学院
margin-top border-top padding-top
content
padding-bottom border-bottom margin-bottom width
如果给出4个属性值，依次表示上、右、下、左边框的属 性，即顺时针排序。
电子信息学院
吴克文
盒子模型的应用
❖1. 美化表单
❖ 网页中的表单控件在默 认情况下背景都是灰色 的，文本框边框是粗线 条，不够美观。
❖ 通过CSS改变表单的边 框样式、颜色和背景颜 色让文本框，按钮等变 得漂亮些。
Eg:表单美化.html 电子信息学院
❖ 因此当使用了盒子属性后切忌删除DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1transitional.dtd">
电子信息学院