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个属性值时，第一个参数设置上内边距，第二个参数 设置左、右内边距，第三个参数设置内边距，例如：
08 CSS盒子模型
2019年5月24日
第8章 CSS盒子模型
第1 页
2019/5/24
学习目标
掌握盒子模型的结构 掌握边框的相关属性设置与简写属性定义 掌握内外边距的定义，用开发者工具查看元素样式
2019/5/24
8.1 CSS盒子模型概念
下图描绘了盒子模型的结构，可以看到一个HTML元素 对应的盒子包括元素的内容、内边距、边框线和外边 距。
2019/5/24
2019/5/24
8.4 外边距margin
外边距可以用来设置元素在父元素中水平居中，设置 元素的宽度，同时将元素的左右外边距设置为自动后 ，该元素在父元素的位置为水平居中（注意需要声明 文档类型! doctype）。如设置一个<div>位于页面的 水平中间位置的CSS代码：
在浏览器中的浏览效果如图：
2019/5/24
8.4 外边距margin
设置外边距的最简单的方法就是使用 margin 属性， margin 属性接受任何长度单位，可以是像素、英寸 、毫米或 em。margin 可以设置为 auto，更常见的 做法是为外边距设置长度值。
下面的代码演示为标签定义外边距：
如下面的代码定义所有 h1 元素的各边都有 10 像素 的内边距：
2019/5/24
8.3 内边距padding
如果有HTML代码：
可以看到在网页上的显示效果如图
也可以按照上、右、下、左的顺序分别设置各内边距 ，各内边距均可以使用不同的单位或百分比值。
2019/5/24
8.3 内边距padding
2019/5/24
2019/5/24
8.2 边框border
下面的代码为p定义了实线，为div定义点线：
第8章 CSS盒子模型
第1 页
2019/5/24
学习目标
掌握盒子模型的结构 掌握边框的相关属性设置与简写属性定义 掌握内外边距的定义，用开发者工具查看元素样式
2019/5/24
8.1 CSS盒子模型概念
下图描绘了盒子模型的结构，可以看到一个HTML元素 对应的盒子包括元素的内容、内边距、边框线和外边 距。
2019/5/24
2019/5/24
8.4 外边距margin
外边距可以用来设置元素在父元素中水平居中，设置 元素的宽度，同时将元素的左右外边距设置为自动后 ，该元素在父元素的位置为水平居中（注意需要声明 文档类型! doctype）。如设置一个<div>位于页面的 水平中间位置的CSS代码：
在浏览器中的浏览效果如图：
2019/5/24
8.4 外边距margin
设置外边距的最简单的方法就是使用 margin 属性， margin 属性接受任何长度单位，可以是像素、英寸 、毫米或 em。margin 可以设置为 auto，更常见的 做法是为外边距设置长度值。
下面的代码演示为标签定义外边距：
如下面的代码定义所有 h1 元素的各边都有 10 像素 的内边距：
2019/5/24
8.3 内边距padding
如果有HTML代码：
可以看到在网页上的显示效果如图
也可以按照上、右、下、左的顺序分别设置各内边距 ，各内边距均可以使用不同的单位或百分比值。
2019/5/24
8.3 内边距padding
2019/5/24
2019/5/24
8.2 边框border
下面的代码为p定义了实线，为div定义点线：
项目六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 内容属性
内容是盒子模型的核心，它呈现了盒子模型中显示的信息，这些信息可以 是文本、图像等多种类型。
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标准流布局”。 对页面进行整体布局——盒子 模型
提纲 ◇课前分析
课程分析 教材分析 学情分析
◇教学目标及重难点 ◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
学情分析
对文本、图形、动画等多媒体信息的处理技术 有了一定的使用经验，但基础差异大 计算机实际操作能力较弱 对理论讲解不感兴趣。 对网页内容、结构、效果等设计的优劣有一定 的感性认识，但自主创作设计能力不足
提纲 ◇课前分析 ◇教学目标及重难点
教学目标 重点难点
◇教法与学法 ◇教学时间安排 ◇教学设计 ◇教学反思
展
示 与
自信感、成就感、责任心
评
价
以工作任务为主线，以学生为主体，以教师为主导，融“教、 学、做、评”为一体。
提纲
布置作业
◇课前分析
◇教学目标及重难点
◇教法与学法
CSS盒模型讲解
五、边界（margin）
1. 边界
margin 区域在边框之内。
margin 区域不应用背景。
margin-top
margin-right
margin-left
margin-bottom
2. 设置边界的大小
可以单独设置上、右、下、左边界的大小。
margin-top: 2px; margin-right: 4px; margin-bottom: 6px; margin-left: 8px;
4. 父子垂直边界重叠
父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的 边界上。
#son { margin-top: 30px; }
content
4. 父子垂直边界重叠
父子元素的垂直边界相遇时，子元素的边界将重叠在父元素的 边界上。
#son { margin-top: 30px; }
5. 几种溢出方式的比较
overflow: visible;
overflow: auto;
CSS 盒模型
盒模型概述
盒的尺寸
主 要 内 容
边框（border）
填充（padding）
边界（margin）
盒的高度与文本溢出
盒模型概述
1. 盒模型的概念
CSS 将所有的网页元素都看做是一个矩形框，这个框由元
素的内容、填充（padding）、边框（border）和边界 （margin）组成。
属性介绍
内容(content)就是盒子里装的东西.
填充(padding)就是怕盒子里装的东西（贵重的）损坏而添加 的泡沫或者其它抗震的辅料. 边界(margin)则说明盒子摆放的时候的不能全部堆在一起， 要留一定空隙保持通风，同时也为了方便取出.
《网页设计》课件——第四章 盒子模型
边框成脊形
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:宽度值逐个定义。
第10讲CSS盒子模型PPT课件
13
对盒子模型的思考
边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的 ，我们只能看到他们对元素的影响
盒子模型中只能设置两类颜色，即边框颜色和背景颜色 盒子模型可设置三类距离，即边界距离margin，填充距离padding和边
框值border
14
属性值的简写形式
方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义 将有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框 的属性； 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右 边框的属性，后者表示下边框的属性； 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时 针排序。
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
1
回顾
CSS中背景属性的缩写格式如何编写？ CSS中如何实现图片代替文本？ 滑动门技术一般运用在什么地方？如何实现
2
本讲目标
初步了解盒子模型的定义 掌握盒子模型的特性 掌握盒子的定位 了解盒子的margin叠加问题 掌握盒子的浮动 使用盒子模型进行页面布局
3
新知识导入：CSS的盒子模型
width
7
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋ 右边框＋右边界
8
IEE删除后，IE 6对网页的解释会进入quirk（怪异 ）模式，此时盒子的宽度等于左边界＋宽度＋右边界
对盒子模型的思考
边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的 ，我们只能看到他们对元素的影响
盒子模型中只能设置两类颜色，即边框颜色和背景颜色 盒子模型可设置三类距离，即边界距离margin，填充距离padding和边
框值border
14
属性值的简写形式
方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义 将有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框 的属性； 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右 边框的属性，后者表示下边框的属性； 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时 针排序。
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
1
回顾
CSS中背景属性的缩写格式如何编写？ CSS中如何实现图片代替文本？ 滑动门技术一般运用在什么地方？如何实现
2
本讲目标
初步了解盒子模型的定义 掌握盒子模型的特性 掌握盒子的定位 了解盒子的margin叠加问题 掌握盒子的浮动 使用盒子模型进行页面布局
3
新知识导入：CSS的盒子模型
width
7
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋ 右边框＋右边界
8
IEE删除后，IE 6对网页的解释会进入quirk（怪异 ）模式，此时盒子的宽度等于左边界＋宽度＋右边界
CSS布局与定位PPT课件
第3章 CSS布局与定位
3.5 外边距（margin）
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
（1）自动居中 margin属性有一个很实用的功能就是让元素自
margin-bottom:50px margin-top:30px
第3章 CSS布局与定位
3.8 嵌套div尺寸的计算
例：index0107.html
第3章 CSS布局与定位
实验3——元素的父子关系（IE，火狐） ，例：516.html,5-18.html
注意：如果在父元素的宽度或高度小于其子元素的时候，在IE浏览 器中会自动调整宽度或高度的大小，以适应其子元素，而另外一 些浏览器则不会。
第3章 CSS布局中有一个非常重要的属性 position，这个单词要翻译为中文，也是定位的意思， 然而要使用CSS进行定位操作的手段，并不仅仅通过 择个属性来实现，因此不要把把二者混淆。
第3章 CSS布局与定位
static：这是默认的属性值，也就是该盒子按照标 准流（包括浮动方式）进行布局。
第3章 CSS布局与定位
3.3 边框（border）
边框是在见面制作过程中应用最多的一类属性。例 如，在每一行下面都加上一条下画线，就可以完全用 边框来实现。
第3章 CSS布局与定位
常见边框属性
border-color: red green border-width:1px 2px 3px; border-style: dotted dashed border-top border-right border-bottom border-left
CSS(盒子模型)PPT课件
border-bottom
margin-bottom
width
电子信息学院
5
.
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内 容宽度＋右填充＋右边框＋右边界
电子信息学院
6
.
由“盒子”堆出来的网页版面
电子信息学院
7
.
IE quirk模式下盒子的宽度
❖ 当将文档声明DOCTYPE删除后，IE对网页的解 释会进入quirk（怪异）模式，此时盒子的宽度 等于左边界＋宽度＋右边界
❖ 因此当使用了盒子属性后切忌删除DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1transitional.dtd">
电子信息学院
电子信息学院
22
.
inline元素
inline元素的特点是： ❖和其他元素都在一行上 ❖高，行高及顶和底边距不可改变； ❖宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素 的例子
电子信息学院
电子信息学院
float_one.html 29
.
多个盒子浮动的一些规则
（1）多个浮动元素不会相互覆盖，一个浮动元素 的框碰到另一个浮动元素的框后便停止运动。
未浮动
框1 框2 框3
向右浮动
框3
框2
CSS盒子模型
CSS盒子模型1 盒子模型的概念(※)(1)在浏览器看来，所有的网页元素本质上就是许多盒子排列在一起或者相互嵌套。
(2)padding-border-margin模型是非常通用的描述矩形对象布局形式的方法，这些矩形对象被统称为“盒子”，英文为“Box”，见图1。
(3)一个独立的盒子模型由content（内容）、（边框）、（内边距）和（外边距）4个部分组成，见图2。
(4)掌握盒子模型需要从两个方面来理解：a)孤立的盒子的内部结构。
b)多个盒子之间的相互关系。
图1. 画框示意图图2. 盒子模型2 长度单位2.1 相对类型(1)px：像素，分辨率不同，大小不同。
(2)em：设置以目前字符的高度为单位。
2.2 绝对类型表1. 绝对类型的尺度单位尺度单位名说明in（英寸）不是国际标准单位，平常极少使用，1 in = 2.54 cm cm（厘米）国际标准单位，较少用mm（毫米）国际标准单位，较少用pt（点数）最基本的显示单位，较少用pc（印刷单位）应用在印刷行业中，1 pc = 12 pt3 边框(border)图3. 边框(border)(1)border-color：#FF0000, #336699 = #369, red, green(2)border-width：thin/medium(2px)/thick/<length>(3)border-style：a)none/hidden：无/隐藏b)dashed/solid：虚线/实线c)dotted/double：点线/双线d)groove/ridge：凹(wa)槽/突脊e)inset/outset：内陷/外凸(tu)(4)IE不支持border-style效果的d)、e)，Firefox支持效果不错。
3.1 设置边框样式<!--05-01.html--><html><head><title>border-style</title><style type="text/css">div{border-width:6px;border-color:#000000;margin:20px;padding:5px;background-color:#FFFFCC;}</style></head><body><div style="border-style:dashed">The border-style of dashed.</div> <div style="border-style:dotted">The border-style of dotted.</div> <div style="border-style:double">The border-style of double.</div> <div style="border-style:groove">The border-style of groove.</div> <div style="border-style:inset">The border-style of inset.</div><div style="border-style:outset">The border-style of outset.</div> <div style="border-style:ridge">The border-style of ridge.</div><div style="border-style:solid">The border-style of solid.</div></body></html>图4~5. IE和Firefox对边框风格的支持对比3.2 属性值的简写形式(1)对不同的边框设置不同的属性值：a)如给出2个属性值，前者表示上下边框，后者表示左右边框。
第5章 CSS盒模型
• 默认情况下，盒子无边框，背景色透明，所以我们只能看 到盒子的内容，而看不到矩形的盒子。
margin border padding 内容
height margin-right border-right padding-right
padding-left border-left margin-left
默认情况下，块元素的宽度是父元素的100%， 高度自适应。
在没有设置 width 属性的情况下，对块元素设置左 右border： （1）块元素的内容区域会收缩，为左右border 让 开空间。 （2）块元素的总宽度保持100%。
在没有设置 width 属性的情况下，对块元素设置左 右padding： （1）块元素的内容区域会收缩，为左右padding 让 开空间。 （2）块元素的总宽度保持100%。
行内元素的高度由行高决定。 对行内元素设置 width、height、上下padding、上下border、 上下margin 等值，都没有实际意义，因此，不推荐对行内元 素直接设置盒子属性。 可以先设置行内元素以块级元素显示，再设置它的盒子属性。
display: block; 设置行内元素以块级元素显示。
margin border padding
内容
5.1.1 盒模型的概念（续）
• 如果对盒子设置了背景颜色或背景图像，它们只应用于盒 子的内部——内容和 padding 组成的区域。
– 背景颜色只应用于盒子内部。 – 背景图像只应用于盒子内部。
margin border padding
内容
5.1.1 盒模型的概念（续）
在没有设置 width 属性的情况下，对块元素设置左 右margin： （1）块元素的内容区域会收缩，为左右margin 让 开空间。 （2）块元素的总宽度保持100%。
margin border padding 内容
height margin-right border-right padding-right
padding-left border-left margin-left
默认情况下，块元素的宽度是父元素的100%， 高度自适应。
在没有设置 width 属性的情况下，对块元素设置左 右border： （1）块元素的内容区域会收缩，为左右border 让 开空间。 （2）块元素的总宽度保持100%。
在没有设置 width 属性的情况下，对块元素设置左 右padding： （1）块元素的内容区域会收缩，为左右padding 让 开空间。 （2）块元素的总宽度保持100%。
行内元素的高度由行高决定。 对行内元素设置 width、height、上下padding、上下border、 上下margin 等值，都没有实际意义，因此，不推荐对行内元 素直接设置盒子属性。 可以先设置行内元素以块级元素显示，再设置它的盒子属性。
display: block; 设置行内元素以块级元素显示。
margin border padding
内容
5.1.1 盒模型的概念（续）
• 如果对盒子设置了背景颜色或背景图像，它们只应用于盒 子的内部——内容和 padding 组成的区域。
– 背景颜色只应用于盒子内部。 – 背景图像只应用于盒子内部。
margin border padding
内容
5.1.1 盒模型的概念（续）
在没有设置 width 属性的情况下，对块元素设置左 右margin： （1）块元素的内容区域会收缩，为左右margin 让 开空间。 （2）块元素的总宽度保持100%。
矿产
矿产资源开发利用方案编写内容要求及审查大纲
矿产资源开发利用方案编写内容要求及《矿产资源开发利用方案》审查大纲一、概述
㈠矿区位置、隶属关系和企业性质。
如为改扩建矿山, 应说明矿山现状、
特点及存在的主要问题。
㈡编制依据
(1简述项目前期工作进展情况及与有关方面对项目的意向性协议情况。
(2 列出开发利用方案编制所依据的主要基础性资料的名称。
如经储量管理部门认定的矿区地质勘探报告、选矿试验报告、加工利用试验报告、工程地质初评资料、矿区水文资料和供水资料等。
对改、扩建矿山应有生产实际资料, 如矿山总平面现状图、矿床开拓系统图、采场现状图和主要采选设备清单等。
二、矿产品需求现状和预测
㈠该矿产在国内需求情况和市场供应情况
1、矿产品现状及加工利用趋向。
2、国内近、远期的需求量及主要销向预测。
㈡产品价格分析
1、国内矿产品价格现状。
2、矿产品价格稳定性及变化趋势。
三、矿产资源概况
㈠矿区总体概况
1、矿区总体规划情况。
2、矿区矿产资源概况。
3、该设计与矿区总体开发的关系。
㈡该设计项目的资源概况
1、矿床地质及构造特征。
2、矿床开采技术条件及水文地质条件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4.1 【案例7】知识点讲解
让IT教学更简单，让IT学习更有效
3、边框属性
（1）设置边框样式（border-style）
使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺
序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值 为上/左右/下。
例如<p>只有上边为虚线dashed，其他三边为单实线solid，可以使用
常用属性值
上边框
下边框
左边框
右边框
样式综合设置 宽度综合设置 颜色综合设置
边框综合设置
border:四边宽度 四边样式 四边颜色;
4.1 【案例7】知识点讲解
让IT教学更简单，让IT学习更有效
3、边框属性
（1）设置边框样式（border-style） 边框样式用于定义页面中边框的风格，常用属性值如下： • none：没有边框即忽略所有边框的宽度（默认值） • solid：边框为单实线 • dashed：边框为虚线 • dotted：边框为点线 • double：边框为双实线
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:上下左右边框样式;
让IT教学更简单，让IT学习更有效
音乐可以陶冶情操，为我们带来听觉上
案例引入
的享受，随着互联网的普及，在网络上听音 乐变得越来越方便。本节将通过盒子模型及 其边框属性制作一个音乐盒，如下图所示。
4.1 【案例7】知识引入
让IT教学更简单，让IT学习更有效
知识引入
认识盒子模型
<div>标记 边框属性更简单，让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学习更有效
1、认识盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一 个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（ border）和外边距（margin）组成。
4.1 【案例7】知识点讲解
让IT教学更简单，让IT学习更有效
2、<div>标记
div是英文division的缩写，意为“分割、区域”。<div>标记简单而言就是一 个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和 布局。<div>与</div>之间相当于一个容器，可以容纳段落、标题、图像等各种网 页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以 嵌套多层<div>。 <div>标记非常强大，通过与id、class等属性配合，然后使用CSS设置样式
让IT教学更简单，让IT学习更有效 让IT教学更简单，让IT学习更有效
第四章 CSS盒子模型
• 盒子模型相关属性
• 块元素与行内元素的区别
目录
让IT教学更简单，让IT学习更有效
【案例7】：音乐盒 【案例8】：用户中心 【案例9】：咖啡店banner 【案例10】：图标导航栏
4.1 【案例7】音乐盒
border-style综合属性分别设置各边样式： p{ borer-style:dashed solid solid solid;}
或综合设置四条边，然后采用上边覆盖：
p{ border-style:solid;} /*综合设置四边样式*/ p{ border-top-style:dashed;} /*上边样式覆盖*/
，来替代大多数的文本标记。
4.1 【案例7】知识点讲解
让IT教学更简单，让IT学习更有效
3、边框属性
设置内容 样式属性
border-top-style:样式; border-top-width:宽度; border-top-color:颜色; border-top:宽度 样式 颜色; border-bottom-style:样式; border- bottom-width:宽度; border- bottom-color:颜色; border-bottom:宽度 样式 颜色; border-left-style:样式; border-left-width:宽度; border-left-color:颜色; border-left:宽度 样式 颜色; border-right-style:样式; border-right-width:宽度; border-right-color:颜色; border-right:宽度 样式 颜色; border-style:上边 [右边 下边 左边]; border-width:上边 [右边 下边 左边]; border-color:上边 [右边 下边 左边]; none无（默认）、solid单实线、dashed 虚线、dotted点线、double双实线 像素值 颜色值、#十六进制、rgb(r,g,b)、 rgb(r%,g%,b%)