CSS盒子模型.ppt
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
如果给出4个属性值，依次表示上、右、下、左边框的属 性，即顺时针排序。
电子信息学院
吴克文
盒子模型的应用
❖1. 美化表单
❖ 网页中的表单控件在默 认情况下背景都是灰色 的，文本框边框是粗线 条，不够美观。
❖ 通过CSS改变表单的边 框样式、颜色和背景颜 色让文本框，按钮等变 得漂亮些。
Eg:表单美化.html 电子信息学院
电子信息学院
吴克文
CSS的盒子模型
电子信息学院
吴克文
CSS的盒子模型
❖ 每个HTML元素都可以看作是一个装了东西的盒 子
❖ 盒子里面的内容到盒子的边框之间的距离即填充 (padding),盒子本身有边框(border),而盒子 边框外和其它盒子之间，还有边界(magin),如 图所示
❖ 默认情况下盒子的边框是无，背景色是透明，所 以我们在默认情况下看不到盒子
吴克文
<style type="text/css"> #box1 {
background-color: #ddd;
body{border:1px dotted #FF0000}
</style> </head>
margin:15px;
padding:5px; } #box2 {
color: black; background-color: #aaa; margin: 20px;
❖ 因此当使用了盒子属性后切忌删除DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
电子信息学院
电子信息学院
box_model.html
吴克文
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 width
<body>
<div id="box1"><div id="box2">这是里面 的盒子</div>
padding: 10px 0px 10px 10px;
</body>
width:100px;}
电子信息学院
box_in_box.html
吴克文
盒子模型的特性
❖ 边界值margin可为负，填充padding不可为负 ❖ 边框border默认值为0，即不显示 ❖ 行内元素，如a，定义上下边界不影响行高(由
吴克文
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内 容宽度＋右填充＋右边框＋右边界
电子信息学院
ห้องสมุดไป่ตู้吴克文
由“盒子”堆出来的网页版面
电子信息学院
吴克文
IE quirk模式下盒子的宽度
❖ 当将文档声明DOCTYPE删除后，IE对网页的解 释会进入quirk（怪异）模式，此时盒子的宽度 等于左边界＋宽度＋右边界
电子信息学院
吴克文
行内元素的盒子
❖ 行内元素的盒子永远只能在浏览器中得到一行高 度的空间（行高由line-height属性决定，如果 没设置该属性，则是内容的默认高度），如果给 它设置上下border，margin，padding等值， 导致其盒子的高度超过行高，那么它的盒子上下 部分将和其他元素的盒子重叠。
电子信息学院
吴克文
标准流
❖ HTML元素在标准状况下的定位方式 ❖ 行内元素在同一行内横向排列 ❖ 块级元素占满整个一行，在页面中竖向排列 ❖ 元素不会移动到其它地方去，各元素的盒子之间
不会发生重叠，对于嵌套的元素盒子也是嵌套的 关系
电子信息学院
吴克文
标准流下的盒子排列分析
<style type="text/css"> *{ border: 2px dashed #FF0066; padding: 10px; margin: 2px; } </style> <body> <div>网页的banner（块级元素）</div> <a href="#">行内元素1</a> <a href="#">行内2</a> <a href="#">行内3</a> <div>这是无名块<p>这是盒子中的盒子</p></div>
❖ 因此，不推荐对行内元素直接设置盒子属性，一 般先设置行内元素以块级元素显示，再设置它的 盒子属性。
电子信息学院
吴克文
改变行内元素的高度
❖ 如图所示，当增加行内元素的边界和填充时，行内元素 a占据浏览器的高度并没有增加，下面这个div块仍然在 原来的位置，导致行内元素盒子的上下部分重叠，而左 右部分不会受影响
line-height属性决定)
电子信息学院
吴克文
对盒子模型的思考
❖ 边框是实的，我们可以看到实实在在的边框，而 填充和边界都是虚的，我们只能看到他们对元素 的影响
❖ 盒子模型中只能设置两类颜色，即边框颜色和背 景颜色
❖ 盒子模型可设置三类距离，即边界距离margin， 填充距离padding和边框值border
《网站设计》
CSS的盒子模型
CSS的盒子模型
❖ 盒子模型是CSS的基石之一，它指定元素如何显 示以及（在某种程度上）如何相互交互
❖ 页面上的每个元素都被浏览器看成是一个矩形的 盒子，这个盒子由元素的内容、填充、边框和边 界组成。
❖ 网页就是由许多个盒子通过不同的排列方式（上 下排列，并列排列，嵌套排列）堆积而成。
吴克文
盒子模型的应用
❖ 2.用盒子美化表格 ❖ 用css为table元素加一个1象素宽的border ❖ 制作1象素虚线边框（td）
Eg:美化表格.html 电子信息学院
吴克文
《网站设计》
盒子的定位
王斌
盒子的三种定位形式
❖ 在标准流下的定位（默认） ❖ 在浮动属性下的定位 ❖ 在定位属性下的定位
电子信息学院
吴克文
属性值的简写形式
❖ 方法是按照规定的顺序，给出2个、3个或者4个属性值， 它们的含义将有所区别，具体含义如下：
如果给出2个属性值，前者表示上下边框的属性，后者表 示左右边框的属性；
如果给出3个属性值，前者表示上边框的属性，中间的数 值表示左右边框的属性，后者表示下边框的属性；
电子信息学院
吴克文
盒子模型的应用
❖1. 美化表单
❖ 网页中的表单控件在默 认情况下背景都是灰色 的，文本框边框是粗线 条，不够美观。
❖ 通过CSS改变表单的边 框样式、颜色和背景颜 色让文本框，按钮等变 得漂亮些。
Eg:表单美化.html 电子信息学院
电子信息学院
吴克文
CSS的盒子模型
电子信息学院
吴克文
CSS的盒子模型
❖ 每个HTML元素都可以看作是一个装了东西的盒 子
❖ 盒子里面的内容到盒子的边框之间的距离即填充 (padding),盒子本身有边框(border),而盒子 边框外和其它盒子之间，还有边界(magin),如 图所示
❖ 默认情况下盒子的边框是无，背景色是透明，所 以我们在默认情况下看不到盒子
吴克文
<style type="text/css"> #box1 {
background-color: #ddd;
body{border:1px dotted #FF0000}
</style> </head>
margin:15px;
padding:5px; } #box2 {
color: black; background-color: #aaa; margin: 20px;
❖ 因此当使用了盒子属性后切忌删除DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
电子信息学院
电子信息学院
box_model.html
吴克文
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 width
<body>
<div id="box1"><div id="box2">这是里面 的盒子</div>
padding: 10px 0px 10px 10px;
</body>
width:100px;}
电子信息学院
box_in_box.html
吴克文
盒子模型的特性
❖ 边界值margin可为负，填充padding不可为负 ❖ 边框border默认值为0，即不显示 ❖ 行内元素，如a，定义上下边界不影响行高(由
吴克文
元素盒子大小的计算
一个元素实际宽度=左边界＋左边框＋左填充＋内 容宽度＋右填充＋右边框＋右边界
电子信息学院
ห้องสมุดไป่ตู้吴克文
由“盒子”堆出来的网页版面
电子信息学院
吴克文
IE quirk模式下盒子的宽度
❖ 当将文档声明DOCTYPE删除后，IE对网页的解 释会进入quirk（怪异）模式，此时盒子的宽度 等于左边界＋宽度＋右边界
电子信息学院
吴克文
行内元素的盒子
❖ 行内元素的盒子永远只能在浏览器中得到一行高 度的空间（行高由line-height属性决定，如果 没设置该属性，则是内容的默认高度），如果给 它设置上下border，margin，padding等值， 导致其盒子的高度超过行高，那么它的盒子上下 部分将和其他元素的盒子重叠。
电子信息学院
吴克文
标准流
❖ HTML元素在标准状况下的定位方式 ❖ 行内元素在同一行内横向排列 ❖ 块级元素占满整个一行，在页面中竖向排列 ❖ 元素不会移动到其它地方去，各元素的盒子之间
不会发生重叠，对于嵌套的元素盒子也是嵌套的 关系
电子信息学院
吴克文
标准流下的盒子排列分析
<style type="text/css"> *{ border: 2px dashed #FF0066; padding: 10px; margin: 2px; } </style> <body> <div>网页的banner（块级元素）</div> <a href="#">行内元素1</a> <a href="#">行内2</a> <a href="#">行内3</a> <div>这是无名块<p>这是盒子中的盒子</p></div>
❖ 因此，不推荐对行内元素直接设置盒子属性，一 般先设置行内元素以块级元素显示，再设置它的 盒子属性。
电子信息学院
吴克文
改变行内元素的高度
❖ 如图所示，当增加行内元素的边界和填充时，行内元素 a占据浏览器的高度并没有增加，下面这个div块仍然在 原来的位置，导致行内元素盒子的上下部分重叠，而左 右部分不会受影响
line-height属性决定)
电子信息学院
吴克文
对盒子模型的思考
❖ 边框是实的，我们可以看到实实在在的边框，而 填充和边界都是虚的，我们只能看到他们对元素 的影响
❖ 盒子模型中只能设置两类颜色，即边框颜色和背 景颜色
❖ 盒子模型可设置三类距离，即边界距离margin， 填充距离padding和边框值border
《网站设计》
CSS的盒子模型
CSS的盒子模型
❖ 盒子模型是CSS的基石之一，它指定元素如何显 示以及（在某种程度上）如何相互交互
❖ 页面上的每个元素都被浏览器看成是一个矩形的 盒子，这个盒子由元素的内容、填充、边框和边 界组成。
❖ 网页就是由许多个盒子通过不同的排列方式（上 下排列，并列排列，嵌套排列）堆积而成。
吴克文
盒子模型的应用
❖ 2.用盒子美化表格 ❖ 用css为table元素加一个1象素宽的border ❖ 制作1象素虚线边框（td）
Eg:美化表格.html 电子信息学院
吴克文
《网站设计》
盒子的定位
王斌
盒子的三种定位形式
❖ 在标准流下的定位（默认） ❖ 在浮动属性下的定位 ❖ 在定位属性下的定位
电子信息学院
吴克文
属性值的简写形式
❖ 方法是按照规定的顺序，给出2个、3个或者4个属性值， 它们的含义将有所区别，具体含义如下：
如果给出2个属性值，前者表示上下边框的属性，后者表 示左右边框的属性；
如果给出3个属性值，前者表示上边框的属性，中间的数 值表示左右边框的属性，后者表示下边框的属性；