[精品]CSS盒子模型讲解讲课教案
第12讲 盒子模型
• 内边距属性及其属性值
属性
属性值
描述
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个属性值时，第一个参数设置上内边距，第二个参数 设置左、右内边距，第三个参数设置内边距，例如：
《CSS盒子模型》课件
总结
通过学习和灵活应用CSS盒子模型，您将能够更好地控制和布局网页元素，提 升用户体验和页面的可读性。请牢记盒子模型的重要性，并尝试将其运用到 实际的项目中。
《CSS盒子模型》PPT课件
本课件将介绍CSS盒子模型，包括盒子模型概述、标准盒子模型、IE盒子模型、 应用实例和总结。借助丰富的内容和视觉效果，我们将帮助您深入了解和灵 活应用CSS盒子模型。
盒子模型概述
盒子模型是CSS中一个重要的概念，它定义了元素在页面上所占据的空间大小和布局。了解盒子模型对于开发 和设计网页至关重要。
标准盒子模型
盒子的内容区域
内容区域包含了元素的实际内容，例如文字、 图片等。
盒子的内边距
内边距是围绕在内容区域周围的空白区域，用 于分隔内容和边框。
盒子的边框
边框是盒子的可见边界，可以设置边框的样式、 宽度和颜色。
盒子的外边距
外边距是盒子与其他元素之间的空白区域，用 于控制元素的间距和对齐。
IE盒子模型
盒子的实际宽度和高度计算方式
IE盒子模型将内边距和边框计算到元素的实际宽度和高度中。
盒子的宽度和高度设置
通过设置元素的width和height属性，可以改变IE盒子模型的宽度和高度。
应用实例
盒子模型在网页设计中具有广泛的应ቤተ መጻሕፍቲ ባይዱ，可以用于创建响应式布局、设计各 种样式的按钮和卡片，以及控制元素之间的间距等。
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:上外边距 [右外边距 下外边距 左外边距];
（二）css盒子模型
属性作⽤padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-bottom 下内边距写法意思padding:10px;上下左右内边距均为 10像素padding:5px 10px;上下内边距是5像素，左右内边距是10像素padding:5px 10px 15px;上内边距是5px ，左右内边距是10px ，下边距是15px padding:5px 10px 15px 20px;上是5px ，右是10px ，下是15px ，左是20px 从上顺时针（⼆）css 盒⼦模型记录前端学习过程，⽅便查漏补缺，如有错误，请评论告知~⼀、⽹页布局的本质⽹页布局过程： 1、先准备好相关的⽹页元素，⽹页元素基本都是盒⼦Box 2、利⽤CSS 设置好盒⼦样式，然后摆放到相应位置 3、往盒⼦⾥装内容⽹页布局的核⼼本质：就是利⽤CSS 摆盒⼦。
⼆、盒⼦模型所谓盒⼦模型：就是把HTML 页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。
CSS 盒⼦模型本质上是⼀个盒⼦，封装周围的HTML 元素，它包括：边框、外边框、内边距和实际内容其中：content ：实际内容padding （内边距）：盒⼦边框与内容之间的距离margin （外边距）：盒⼦与盒⼦之间的距离border （边框）：字⾯意思三、内边距（padding ）padding 属性⽤于设置内边距，即边框与内容之间的距离padding 属性的复合写法可以有⼀到四个值也可以单独指定padding 值：padding-top ：10px; （其他⽅位同理）注：padding 可能会影响盒⼦的实际⼤⼩。
属性作⽤margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距如上图，⼀个100 x 100的盒⼦，在设置padding 为30px 以后，盒⼦实际⼤⼩变为160 x 160因此在使⽤时，应当注意padding 对盒⼦⼤⼩的影响，以设置盒⼦的最终⼤⼩。
css课程设计
css课程设计一、课程目标知识目标：1. 理解CSS（层叠样式表）的基本概念与功能，掌握CSS选择器、属性和值的使用方法。
2. 学会使用CSS对HTML文档进行美化和布局，掌握盒模型、浮动、定位等核心CSS技术。
3. 了解CSS的继承、层叠、优先级和伪类等高级特性。
技能目标：1. 能够编写结构清晰、可维护性强的CSS代码，实现网页的视觉效果。
2. 能够运用所学CSS知识对现有网页进行优化和美化，提高用户体验。
3. 能够利用CSS解决跨浏览器兼容性问题，确保网页在不同浏览器中的表现一致。
情感态度价值观目标：1. 培养学生对前端开发的兴趣，激发学习热情，增强自信心。
2. 培养学生良好的审美观，提高对网页设计美学的认识。
3. 培养学生的团队协作精神，鼓励相互学习、交流、分享，提高沟通能力。
本课程针对初中年级学生，结合学科特点，注重实用性，将CSS知识与实际案例相结合，使学生在掌握知识的同时，提高实际操作能力。
课程设计充分考虑学生的认知水平和学习需求，通过循序渐进的教学方法，帮助学生更好地理解和运用CSS，培养其在前端开发领域的兴趣和能力。
在教学过程中，关注学生的学习反馈，及时调整教学策略，确保课程目标的达成。
二、教学内容1. CSS基础- CSS概念与作用- CSS的引入方式- 选择器（标签、类、ID、属性等）- CSS属性与值（颜色、字体、文本、背景等）2. CSS布局与盒模型- 盒模型概念- margin、padding、border属性- 盒子水平垂直居中- 浮动布局与清除浮动- 定位（相对、绝对、固定、静态）3. CSS高级特性- 继承与层叠- 优先级与特殊性- 伪类与伪元素- 媒体查询与响应式设计4. CSS兼容性与优化- 跨浏览器兼容性问题- CSS代码优化与压缩- 常用CSS框架介绍（如Bootstrap）5. 实战案例与拓展- 网页布局案例- 响应式设计案例- 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:宽度值逐个定义。
第10讲CSS盒子模型PPT课件
对盒子模型的思考
边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的 ，我们只能看到他们对元素的影响
盒子模型中只能设置两类颜色，即边框颜色和背景颜色 盒子模型可设置三类距离，即边界距离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（怪异 ）模式，此时盒子的宽度等于左边界＋宽度＋右边界
Web前端开发HTML5 CSS3教案盒子模型教案
课程名称WEB前端开发（1）课次13 任务、项目、课题名称盒子模型课时2学时教学内容盒子模型概念盒子大小计算方式盒子模型的相关属性教学目标理解盒子模型概念掌握盒子大小计算方式掌握盒子模型的相关属性教学重点盒子模型的相关属性教学难点盒子大小计算方式教学活动及主要环节复习提问：1. CSS的高级特性包含？导入新课：互动——盒子模型？盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。
新授：一．认识盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距（padding）、边框(border)和外边距(margin)组成。
二．盒子大小计算方式一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。
（后跟习题见PPT）三．盒子模型的相关属性1．边框（border）属性边框（border）属性设置方式如下：●border-top：上边框宽度样式颜色●border-right：右边框宽度样式颜色●border-bottom：下边框宽度样式颜色●border-left：左边框宽度样式颜色若四个边框具有相同的宽度、样式和颜色，则可以一个次设置如下：●border：边框宽度样式颜色注意：边框宽度、样式和颜色属性的顺序可以随意。
2．内边距（padding）属性内边距用于设置盒子中内容与边框之间的距离，也常常称为内填充。
其设置方法类似于padding属性的设置，其设置方式如下：●padding-top：上内边距大小●padding-right：右内边距大小●padding-bottom：下内边距大小●padding-left：左内边距大小若四个内边距具有相同的大小，则可以一个次设置如下：●padding：内边距大小3．外边距（margin）属性网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。
第5章 CSS盒子模型_教学设计 (教案)
《HTML5+CSS3网站设计基础教程》教学设计课程名称：HTML5+CSS3网站设计基础教程授课年级：20XX年级授课学期：20XX学年第XX学期教师姓名：XX老师20XX 年XX 月XX 日1课题名称第5章 CSS盒子模型计划课时8课时内容分析盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。
本章将对盒子模型的概念、盒子模型相关属性及元素的类型和转换进行详细讲解。
教学目标●掌握盒子的相关属性，能够制作常见的盒子模型效果。
●掌握背景属性的设置方法，能够设置背景颜色和图像。
●理解渐变属性的原理，能够设置渐变背景。
●熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。
重点及措施教学重点：认识盒子模型、<div>标记、盒子模型相关属性、背景属性、CSS3渐变属性。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：盒子模型相关属性、背景属性、CSS3渐变属性。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（讲解认识盒子模型、<div>标记、盒子的宽与高）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS3选择器”的相关知识。
1、通过上一章的学习，我们知道在CSS3中新增了很多新的选择器，例如属性选择器、关系选择器等。
本节课，我们将学习CSS3中重要的选择器—结构化伪类选择器。
那么，到底什么是结构化伪类选择器呢？常见的结构化伪类选择器有哪些？答案：CSS基础选择器主要包括四种，具体如下：结构化伪类选择器是CSS3中新增加的选择器。
常用的结构化伪类选择器有:root选择器、:not选择器、:only-child 选择器、:first-child选择器、:last-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:nth-last-of-type(n) 选择器、:empty选择器、:target选择器。
网页制作5CSS盒子模型
信息工程学院
1、边框属性
（5）圆角边框
在网页设计中，经常需要设置圆角边框，运用CSS3中的border-radius属性可以将 矩形边框圆角化，其基本语法格式如下：
border-radius:参数1/参数2 其中“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，两个参数 之间 用“/”隔开。 值得一提的是，border-radius属性同样遵循值复制的原则，其水平半径（参数 1）和垂直半径（参数2）均可以设置1-4个参数值，用来表示四角圆角半径的大 小。
度 和 总
高
度
信息工程学院
✎
5.1 知识点讲解
3、盒子的宽与高
• 盒子模型的总宽度与总高度
信息工程学院
结 ➢ 盒子的总宽度= width+左右内边距之和+左右
论
边框宽度之和+左右外边距之和
➢ 盒子的总高度= height+上下内边距之和+上 下边框宽度之和+上下外边距之和
5.1 知识点讲解
信息工程学院
来替代大多数的文本标记。
.one{ width:450px; height:30px; line-height:30px; background:#FCC; font-size:18px; font-weight:bold; text-align:center;
}
/*设置宽度*/ /*设置高度*/ /*设置行高*/ /*设置背景颜色*/ /*设置字体大小*/ /*设置字体加粗*/ /*设置文本水平居中对齐*/
/*盒子模型的内边距*/
margin:20px;
/*盒子模型的外边距*/
}
</style>
第4章CSS盒子模型
一个页面由很多这样的盒子组成，这 些盒子之间会互相影响，因此掌握盒子模 型需要从两方面来理解。 一是理解一个孤立的盒子的内部结构； 二是理解多个盒子之间的相互关系。
本章首先讲解独立的盒子相关的性质， 然后介绍在普通情况下盒子的排列关系。 下一章将更深入地讲解浮动和定位的 相关内容。
4.1 “盒子”与“模型”的概念探究
父div 子div
图4.26 父子块设置margin为负数
4.7 盒子在标准流中的定位原则 4.7.1 行内元素之间的水平 margin
图4.18所示为两个块并排的情况。
span1
Margin-right
Margin-left
span2
图4.18 行内元素之间的margin
4.7.2
块级元素之间的竖直margin
如果不是行内元素，而是竖直排列的 块级元素，margin的取值情况就会有所不 同。
2．行内元素（inline）
对于文字这类元素，各个字母之间横 向排列，到最右端自动折行，这就是另一 种元素，称为“行内元素”（inline）。
比如<strong></strong>标记，就是一 个典型的行内元素，这个标记本身不占有 独立的区域，仅仅是在其他元素的基础上 指出了一定的范围。 再比如，最常用的<a>标记，也是一个 行内元素。
只有很好地掌握了盒子模型以及其中 每个元素的用法，才能真正地控制好页面 中的各个元素。 本章主要介绍盒子模型的基本概念， 并讲解CSS定位的基本方法。
所有页面中的元素都可以看成是一个 盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要 比单纯的内容大。
换句话说，可以通过调整盒子的边框 和距离等参数，来调节盒子的位置和大小。
第5章 CSS盒子模型[109页]
![第5章 CSS盒子模型[109页]](https://img.taocdn.com/s3/m/60e5fcb4b1717fd5360cba1aa8114431b90d8e60.png)
基于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 内容属性
内容是盒子模型的核心，它呈现了盒子模型中显示的信息，这些信息可以 是文本、图像等多种类型。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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。
用盒子美化表格
❖ 让表格的外边框为2象素 ❖ 首先用间距制作1像素边框的表格，然后用css为table
元素加一个1象素宽的border
❖ 制作1象素虚线边框 ❖ 首先将表格的边框和间距设为0，然后设置table的
CSS上边框和左边框为1象素虚线，再设置td的css下 边框和右边框为1象素虚线
*
盒子的三种定位形式
Hale Waihona Puke 盒子模型的特性❖ 边界值margin可为负，填充padding不可为负 ❖ 边框border默认值为0，即不显示 ❖ 行内元素，如a，定义上下边界不影响行高
对盒子模型的思考
❖ 边框是实的，我们可以看到实实在在的边框，而填充 和边界都是虚的，我们只能看到他们对元素的影响
❖ 盒子模型中只能设置两类颜色，即边框颜色和背景颜 色
❖ 分别是border-width（宽度）、border-color（颜色） 和border-style（样式）其中border-style属性可以将 边框设置为实线（solid）、虚线（dashed）、点划线 （dotted）、双线（double）等效果
边框border属性
❖ 边框border属性有个有趣的特点，即两条交汇的边框 之间是一个斜角，我们可以通过为边框设置不同的颜 色，再利用这个斜角，制作出像三角形一样的效果
❖ Input元素的边框属性默认不为0，我们可以设置 为0达到美化表单中输入框和按钮的目的。
4.5.2 盒子模型的应用
❖ 1. 美化表单 ❖ 网页中的表单控件在默认情况下背景都是灰色的，文
本框边框是粗线条带立体感的，不够美观。下列代码 通过CSS改变表单的边框样式、颜色和背景颜色让文 本框，按钮等变得漂亮些。
❖在标准流下的定位 ❖在浮动属性下的定位 ❖在定位属性下的定位
❖ 除非设置浮动属性或定位属性，否则所有盒子都是 在标准流中定位。顾名思义，标准流中元素盒子的 位置由元素在HTML中的位置决定。
标准流
❖ HTML元素在标准状况下的定位方式 ❖ 行内元素在同一行内横向排列 ❖ 块级元素占满整个一行，在页面中竖向排列 ❖ 元素不会移动到其它地方去，对于嵌套的元素盒子也
width
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽 度＋右填充＋右边框＋右边界
IE quirk模式下盒子的宽度
❖ 当将文档声明DOCTYPE删除后，IE 6对网页的解释 会进入quirk（怪异）模式，此时盒子的宽度等于左 边界＋宽度＋右边界
❖ 因此当使用了盒子属性后切忌删除DOCTYPE
body{border:1px dotted #FF0000}
</style> </head>
<body> <div id="box1"><div
id="box2">这是里面的盒 子</div> </body>
边框border属性
❖ 盒子模型的margin和padding属性比较简单，只能设 置宽度值，最多分别对上、右、下、左设置宽度值。 而边框border则可以设置宽度、颜色和样式。
CSS的盒子模型
❖ 每个HTML元素都可以看作是一个装了东西的盒 子
❖ 盒子里面的内容到盒子的边框之间的距离即填充 (padding),盒子本身有边框(border),而盒子边框外 和其它盒子之间，还有边界(magin),如图所示
❖ 默认情况下盒子的边框是无，背景色是透明，所 以我们在默认情况下看不到盒子
内容
填充padding属性
❖ 填充padding属性，也称为盒子的内边距。就是盒子 边框到内容之间的距离，和表格的填充属性 （cellpadding）比较相似。如果填充属性为0，则盒 子的边框会紧挨着内容，这样通常不美观。
❖ 当对盒子设置了背景颜色或背景图像后，那么背景 会覆盖padding和内容组成的范围，并且默认情况下 背景图像是以padding的左上角为基准点在盒子中平 铺的
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