第03部分-CSS盒子模型与定位(2)

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