CSS盒子模型.docx

《CSS盒子模型.docx》由会员分享，可在线阅读，更多相关《CSS盒子模型.docx（15页珍藏版）》请在冰豆网上搜索。

CSS盒子模型

幻灯片1

幻灯片2

回顾

●CSS中背景属性的缩写格式如何编写？

●CSS中如何实现图片代替文本？

●滑动门技术一般运用在什么地方？

如何实现

幻灯片3

本讲目标

●初步了解盒子模型的定义

●掌握盒子模型的特性

●掌握盒子的定位

●了解盒子的margin叠加问题

●掌握盒子的浮动

使用盒子模型进行页面布局

幻灯片4

新知识导入：

CSS的盒子模型

●盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。

●页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界间距组成。

●网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。

幻灯片5

CSS的盒子模型

幻灯片6

CSS的盒子模型

●每个HTML元素都可以看作是一个装了东西的盒子

●盒子里面的内容到盒子的边框之间的距离即填充（padding）,盒子本身有边框（border）,而盒子边框外和其它盒子之间，还有边界（magin）,如图所示

●默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子

幻灯片7

幻灯片8

元素盒子大小的计算

一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界

幻灯片9

IEquirk模式下盒子的宽度

●当将文档声明DOCTYPE删除后，IE6对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界

●因此当使用了盒子属性后切忌删除DOCTYPE

●

幻灯片10

CSS盒子模型计算题

●如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充值＋里面盒子的边界值

案例演示

幻灯片11

边框border属性

●盒子模型的margin和padding属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。

而边框border则可以设置宽度、颜色和样式。

●分别是border-width（宽度）、border-color（颜色）和border-style（样式）其中border-style属性可以将边框设置为实线（solid）、虚线（dashed）、点划线（dotted）、双线（double）等效果

幻灯片12

填充padding属性

●填充padding属性，也称为盒子的内边距。

就是盒子边框到内容之间的距离，和表格的填充属性（cellpadding）比较相似。

如果填充属性为0，则盒子的边框会紧挨着内容，这样通常不美观。

●当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的

幻灯片13

盒子模型的特性

●边界值margin可为负，填充padding不可为负

●边框border默认值为0，即不显示

●行内元素，如a，定义上下边界不影响行高

幻灯片14

对盒子模型的思考

●边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响

●盒子模型中只能设置两类颜色，即边框颜色和背景颜色

●盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值border

幻灯片15

属性值的简写形式 

●方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：

●

●如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；

●

●如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；

如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。

幻灯片16

各种元素盒子属性的默认值

●大部分html元素的盒子属性（margin,padding）默认值都为0；

●有少数html元素的（margin,padding）浏览器默认值不为0，例如：

body，p，ul，li，form标记等，因此我们有时有必要先设置它们的这些属性为0。

●Input元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。

幻灯片17

盒子模型的应用

●1.美化表单

●网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。

下列代码通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。

幻灯片18

盒子的定位

幻灯片19

盒子的三种定位形式

●在标准流下的定位

●在浮动属性下的定位

●在定位属性下的定位

●除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。

顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。

●

幻灯片20

标准流

●HTML元素在标准状况下的定位方式

●行内元素在同一行内横向排列

●块级元素占满整个一行，在页面中竖向排列

●元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系

幻灯片21

标准流下的盒子排列分析

*{

border:

2pxdashed#FF0066;

padding:

10px;

margin:

2px;

}

行内元素1行内2

行内3

幻灯片22

行内元素的盒子

●行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。

●因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。

幻灯片23

改变行内元素的高度

●如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响

幻灯片24

display属性

●通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示

●display:

block|inline|none|list-item

幻灯片25

block元素

●block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非用width设定一个宽度

30px;">块元素2