padding：填充，四个方向为padding-top，padding-right ，padding-bottom，padding-left
信息工程学院
College of Information Engineering
Web技术及应用
1. 元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋ 右填充＋右边框＋右边界
4.5.1 盒子模型基础
• 每个HTML元素都可以看作是一个装了东西的 盒子
• 盒子里面的内容到盒子的边框之间的距离即填 充(padding),盒子本身有边框(border),而盒子边 框外和其它盒子之间，还有边界(magin),如图所 示
• 默认情况下盒子的边框是无，背景色是透明， 所以我们在默认情况下看不到盒子
外面盒子的填充值(padding)＋里面盒子 的边距值(margin)
信息工程学院
College of Information Engineering
Web技术及应用
2 盒子模型的属性
• Border的属性 --border-width, border-color, border-style
• Padding的属性
信息工程学院
College of Information Engineering
Web技术及应用
例如下面的样式
#MyBox { margin:10px; padding:5px; border:dotted; border-width:3px; border-color:#0F0; width:70px; //内容的宽度 }
Web技术及应用
4.5 CSS的盒子模型
• 盒子模型是CSS的基石之一，它指定元素 如何显示以及（在某种程度上）如Байду номын сангаас相互 交互
• 页面上的每个元素都被浏览器看成是一个 矩形的盒子，这个盒子由元素的内容、填 充、边框和边界组成。
• 网页就是由许多个盒子通过不同的排列方 式（上下排列，并列排列，嵌套排列）堆 积而成。
--只能设置距离值
• Margin的属性
--只能设置距离值
信息工程学院
College of Information Engineering
Web技术及应用
盒子模型总结
• 边框是实的，我们可以看到实实在在的边框， 而填充和边界都是虚的，我们只能看到他们对 元素的影响
• 盒子模型中只能设置两类颜色，即边框颜色和 背景颜色（boder范围以内，不含margin）
信息工程学院
College of Information Engineering
Web技术及应用
信息工程学院
College of Information Engineering
CSS的盒子模型
Web技术及应用
信息工程学院
College of Information Engineering
Web技术及应用
Web技术及应用
CSS盒子模型与定位
信息工程学院
信息工程学院 2010.10 College of Information Engineering
Web技术及应用
知识回顾
1 什么是CSS
CSS（Cascading Style Sheets）：层叠样式表，一种定
义样式的语言，用于描述如何格式化和显示网页中的信息。 2 CSS基本语法
高。因此一般将行内元素装于块级元素中 （一般为DIV），再使用CSS。 • IE6处理HTML时盒子模型失效，切记在 IE6中要使用XHTML（加DTD）。
这个区域的宽度=左边距+左边框+左填充+内容宽度+ 右填充+右边框+右边距
= 10px+3px+5px+70px+5px+3px+10px = 106px
信息工程学院
College of Information Engineering
Web技术及应用
CSS盒子模型计算题
• 如果盒子里面嵌套有盒子，那么： 两个盒子边框之间的距离=
信息工程学院
College of Information Engineering
Web技术及应用
content：主体内容
margin：边距，四个方向为margin-top，margin-right， margin-bottom，margin-left
border：边框，四个方向为border-top，border-right， border-bottom，border-left
想一想？
• 页面的构成元素都有什么？ h1、h2、p、 a、 img、 span、 div、input 等等等等。
• 这些元素在页面上都是怎么放置的呢？ 像a、span、img和input 这样的元素是行内元素，放置的时候可 以在一行，而div、p、h1和h2会独占一行放置。
信息工程学院
College of Information Engineering
CSS规则：选择器{属性1：属性值1; ...;属性n：属性值n; } CSS选择器：基本选择器（标签、类和ID）
复合选择器（交集、并集、后代、伪类等等） 3 CSS引入方法
行内样式、 内部（内嵌）样式、 外部样式
信息工程学院
College of Information Engineering
Web技术及应用
• 盒子模型可设置三类距离，即边界距离margin ，填充距离padding和边框值border
信息工程学院
College of Information Engineering
Web技术及应用
4 盒子属性值的简写形式
border-width、border-style、 border-color、padding和margin - 给出1个属性值，则上下左右属性值相同 - 给出2个属性值，前者表示上下属性值，后者表示左右属性值 - 给出3个属性值，前者表示上属性值，中间数值表示左右属性 值，后者表示下属性值； - 给出4个属性值，依次表示上、右、下、左属性值，即顺时针 排序。
Border 例：border: 1px soild blue;
信息工程学院
College of Information Engineering
Web技术及应用
5. 使用盒子模型需注意的问题
• 边界值margin可为负，填充padding不可 为负
• 边框border默认值为0，即不显示 • 行内元素，如a，定义上下边界不影响行