第4章CSS盒子模型.ppt

1、CSS网页设计标准教程,第1部分 CSS核心原理,第 4 章 CSS盒子模型,上一章介绍了CSS设计的代码编写和编辑方式，从本章开始将深入讲解CSS的核心原理。 盒子模型是CSS控制页面时一个很重要的概念。,只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。 本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。,所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容大。,换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。,一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握

2、盒子模型需要从两方面来理解。 一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。,本章首先讲解独立的盒子相关的性质，然后介绍在普通情况下盒子的排列关系。 下一章将更深入地讲解浮动和定位的相关内容。,4.1 “盒子”与“模型”的概念探究,图4.1 画框示意图,图4.2 盒子模型,4.2 长 度 单 位,1相对类型 2绝对类型,4.3 边 框,图4.3 border,4.3.2 属性值的简写形式,CSS中可以用简单的方式确定边框的属性值。,1对不同的边框设置不同的属性值,使用CSS时，可以分别对4条边框设置不同的属性值。,方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含

3、义将有所区别，具体含义如下：,如果给出2个属性值，那么前者表示上下边框的属性，后者表示左右边框的属性。,如果给出3个属性值，那么前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。,如果给出4个属性值，那么依次表示上、右、下、左边框的属性，即顺时针排序。,2在一行中同时设置边框的宽度、颜色和样式,要把border-width、border-border-color和border-style这3个属性合在一起，还可以用border属性来简写。 例如： border: 2px green dashed,这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写更

4、 方便。,3对一条边框设置与其他边框不同的属性,在CSS中，可以单独对某一条边框在一条CSS规则中设置属性，例如： border: 2px green dashed; border-left: 1px red solid,4同时制定一条边框的一种属性,有时，还需要对某一条边框的某一个属性进行设置，例如仅希望设置左边框的颜色为红色，可以写作： border-left-color:red,5实例,在上面讲解的基础上，给出下述实例，实例文件为“04-02.html”。, #outerBox,width:200px; height:100px; border:2px black solid; bord

5、er-left:4px green dashed; border-color:red gray orange blue; /*上 右 下 左*/,border-right-color:purple; ,4.4 设置内边距,和前面介绍的边框类似，padding属性可以设置1、2、3或4个属性值，分别如下。,设置1个属性值时，表示上下左右4个padding均为该值。,设置2个属性值时，前者为上下padding的值，后者为左右padding的值。,设置3个属性值时，第1个为上padding的值，第2个为左右padding的值，第3个为下padding的值。,设置4个属性值时，按照顺时针方向，依次为上

6、、右、下、左padding的值。,如果需要专门设置某一个方向的padding，可以使用padding-left、padding-right、padding-top或者padding-bottom来设置。 例如有如下代码，实例文件为“04-04.html”。,图4.8 padding示意图,4.5 设置外边距,外边距（margin）指的是元素与元素之间的距离。,观察图4.7，可以看到边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器窗口的边框。,这是因为body本身也是一个盒子，在默认情况下，body会有一个若干像素的margin，具体数值因各个浏览器而不尽相同。,因此在body

7、中的其他盒子就不会紧贴着浏览器窗口的边框了。 为了验证这一点，可以给body这个盒子也加一个边框，代码如下。,body border:1px black solid; background:#cc0; ,图4.10 margin的效果,4.6 盒子之间的关系,4.6.1 HTML与DOM 1“树”的概念,图4.12 家谱示意图,2DOM树,图4.14 打开新窗口,图4.15 DOM树与页面布局的对应关系,4.6.2 标准文档流,“标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。,1块级元素（b

8、lock level）,li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。,ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。,因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。,2行内元素（inline）,对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。,比如标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。 再比如，最常用的标记，

9、也是一个行内元素。,4.6.3 标记与标记,下面举一个简单的例子，实例文件为“04-06.html”。,font-size:18px;/* 字号大小 */ font-weight:bold;/* 字体粗细 */ font-family:Arial;/* 字体 */ color:#FFFF00;/* 颜色 */,background-color:#0000FF;/* 背景颜色 */ text-align:center;/* 对齐方式 */ width:300px;/* 块宽度 */ height:100px;/* 块高度 */ , 这是一个div标记 , div 标记范例 div,例如有如下代码

10、，实例文件为“04-07.html”。, div与span的区别 ,div标记不同行： span标记同一行：, ,图4.17 与标记的区别,4.7 盒子在标准流中的定位原则,4.7.1 行内元素之间的水平margin 图4.18所示为两个块并排的情况。,图4.18 行内元素之间的margin,4.7.2 块级元素之间的竖直margin,如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。,两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图4.20所示。,这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。,图4.20 块元素之间的margin,4.7.3 嵌套盒子之间的margin,除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。,当一个块包含在另一个块中时，便形成了典型的父子关系。 其中子块的margin将以父块的内容为参考，如图4.22所示。,图4.22 父子块的margin,图4.23 父子块的margin,图4.24 IE与Firefox对待父height的不同处理,4.7.4 margin属性可以设置为负值,上面提及margin的时候，