第10讲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

CSS盒⼦模型概述盒⼦模型概述1.认识盒⼦模型 所谓盒⼦模型就是把HTML页⾯中的元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。

每个矩形都由元素的内容、内边距、边框和外边距组成。

具体可以把盒⼦模型⽐作为⼀个⼿机盒⼦模型： ⼀个完整的⼿机盒⼦通常包含⼿机、填充泡沫和盛装⼿机的纸盒。

如果把⼿机盒⼦想象成HTML元素，那么⼿机盒⼦就是⼀个CSS盒⼦模型，其中的⼿机为CSS盒⼦模型的内容，填充泡沫的厚度为CSS盒⼦模型的内边距，纸盒的厚度为CSS盒⼦模型的外边距，当多个⼿机盒⼦放在⼀起时，它们之间的距离就是CSS盒⼦模型的外边距。

⽹页中的所有元素和对象都由上图所⽰的基本结构组成，并呈现出矩形的盒⼦效果。

在浏览器看来，⽹页就是多个盒⼦嵌套排列的结果。

其中，内边距出现在内容区域的周围，当给元素添加背景⾊或是背景图像时，该元素的背景⾊或背景图像也将出现在内边距中，外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。

需要注意的是，虽然盒⼦模型拥有内边距、边框、外边框、宽和⾼这些基本属性，但是并不要求每个元素都必须定义这些属性。

2.<div> 标记 div是英⽂division的缩写，意味“分割、区域”。

<div>标记简单⽽⾔就是⼀个区块容器标记，可以将⽹页分割为独⽴的、不同的部分，以实现⽹页的规划和布局。

<div>与</div>之间相当于⼀个“盒⼦”，可以设置外边距、宽和⾼，同时内部可以容纳段落、标题、表格、图像等各种⽹页元素，也就是⼤多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。

在上⾯的图⽚中，定义了两对<div>，其中⼀对<div>中嵌套段落标记<p>。

对两对<div>分别添加class属性，然后通过CSS控制其宽、⾼、背景颜⾊和⽂字样式等。

*
CSS的盒子模型
❖ 盒子模型是CSS的基石之一，它指定元素如何显 示以及（在某种程度上）如何相互交互
❖ 页面上的每个元素都被浏览器看成是一个矩形的 盒子，这个盒子由元素的内容、填充、边框和边 界组成。
❖ 网页就是由许多个盒子通过不同的排列方式（上 下排列，并列排列，嵌套排列）堆积而成。
CSS的盒子模型
❖ 盒子模型可设置三类距离，即边界距离margin，填充 距离padding和边框值border
属性值的简写形式
❖ 方法是按照规定的顺序，给出2个、3个或者4个属 性值，它们的含义将有所区别，具体含义如下：
❖ 如果给出2个属性值，前者表示上下边框的属性， 后者表示左右边框的属性；
❖ 如果给出3个属性值，前者表示上边框的属性，中 间的数值表示左右边框的属性，后者表示下边框 的属性；
CSS盒子模型计算题
❖ 如果盒子里面嵌套有盒子，且两个盒子都有边框，那 么两个盒子边框之间的距离等于外面盒子的填充值＋ 里面盒子的边界值
<style type="text/css"> #box1 {
background-color: #ddd; margin:15px; padding:5px; } #box2 { color: black; background-color: #aaa; margin: 20px; padding: 10px 0px 10px 10px; width:100px;}
❖ 如果给出4个属性值，依次表示上、右、下、左边 框的属性，即顺时针排序。
各种元素盒子属性的默认值
❖大部分html元素的盒子属性(margin, padding)默 认值都为0；
❖有少数html元素的(margin, padding)浏览器默认 值不为0，例如：body，p，ul，li，form标记等， 因此我们有时有必要先设置它们的这些属性为0。

CSS学习篇核⼼之——盒⼦模型概述关于CSS的⼀些基础知识我们在前⾯⽂章中已经有所了解，这篇⽂章我们主要来学习下CSS中的核⼼知识盒⼦模型的知识。

盒⼦模型元素框的最内部分是实际的内容（element），直接包围内容的是内边距（padding），内边距呈现了元素的背景，内边距的边缘是边框（border），外边距（margin)默认是透明的，因此不会遮挡其后的任何元素，对于这个图边框外的部分就是margin，边框内内容外地部分就是padding。

在CSS中我们⼀般习惯性的将外边距和内边距设置为0，即* {margin: 0;padding: 0;}element元素在CSS中，width和height是element区域的宽度和⾼度，对padding、border、margin增加尺⼨不会影响element的宽度和⾼度，只会增加整个框的尺⼨。

下⾯我们看个例⼦：假设框的每个边上有 10个像素的外边距和 5 个像素的内边距。

如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素#box {width: 70px;margin: 10px;padding: 5px;}这样的话对于element、padding、border、margin的尺⼨就更加的⼀⽬了然了，这⾥需要注意下的是，padding、border、margin即可以应⽤于⼀个元素的所有边，也可以应⽤于单独的边，还有⼀点就是，margin可以是负值。

内边距（Padding）元素的内边距是再边框和内容区之间，padding属性设置⽤长度值或者百分⽐值，但不允许⽤负值。

关于⽤百分⽐的话，有⼀点需要注意是，即上下内边距的百分数会相对于⽗元素宽度设置，⽽不是相对于⾼度。

对于padding的设置，可以设置它的上下左右这四个边距。

h1 {padding-top: 10px;padding-right: 0.25em;padding-bottom: 2ex;padding-left: 20%;}h1 {padding: 10px0.25em 2ex 20%;}上述这两种⽅法实现的效果是⼀致地，如果我们的四个边距是⼀样的话可以⽤下⾯这句话。