第4章CSS盒子模型.ppt

《第4章CSS盒子模型.ppt》由会员分享，可在线阅读，更多相关《第4章CSS盒子模型.ppt（76页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、CSSCSS网页设计标准教程网页设计标准教程第第1 1部分部分 CSSCSS核心原理核心原理 第第 4 4 章章CSSCSS盒子模型盒子模型 “盒子盒子”与与“模型模型”的概念探究的概念探究4.1长度单位长度单位4.2边框边框4.3设置内边距设置内边距4.4 设置外边距设置外边距4.5盒子之间的关系盒子之间的关系4.6盒子在标准流中的定位原则盒子在标准流中的定位原则4.7 上一章介绍了上一章介绍了CSSCSS设计的代码编写和编设计的代码编写和编辑方式，从本章开始将深入讲解辑方式，从本章开始将深入讲解CSSCSS的核心的核心原理。原理。盒子模型是盒子模型是CSSCSS控制页面时一个很重要控制页面

2、时一个很重要的概念。的概念。只有很好地掌握了盒子模型以及其中只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面每个元素的用法，才能真正地控制好页面中的各个元素。中的各个元素。本章主要介绍盒子模型的基本概念，本章主要介绍盒子模型的基本概念，并讲解并讲解CSSCSS定位的基本方法。定位的基本方法。所有页面中的元素都可以看成是一个所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要一般来说这些被占据的空间往往都要比单纯的内容大。比单纯的内容大。换句话说，可以通过调整盒子的边框换句话说，可以通过调整盒子的边框和距离等

3、参数，来调节盒子的位置和大小。和距离等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。型需要从两方面来理解。一是理解一个孤立的盒子的内部结构；一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。二是理解多个盒子之间的相互关系。本章首先讲解独立的盒子相关的性质，本章首先讲解独立的盒子相关的性质，然后介绍在普通情况下盒子的排列关系。然后介绍在普通情况下盒子的排列关系。下一章将更深入地讲解浮动和定位的下一章将更深入地讲解浮动和定位的相关内容。相关内

4、容。4.1 4.1 “盒子盒子”与与“模型模型”的概念探究的概念探究图图4.1 画框示意图画框示意图 图图4.2 盒子模型盒子模型4.2 4.2 长长 度度 单单 位位 1 1相对类型相对类型 2 2绝对类型绝对类型4.3 4.3 边边 框框图图4.3 border4.3.2 4.3.2 属性值的简写形式属性值的简写形式 CSS CSS中可以用简单的方式确定边框的属中可以用简单的方式确定边框的属性值。性值。1 1对不同的边框设置不同的属性值对不同的边框设置不同的属性值 使用使用CSSCSS时，可以分别对时，可以分别对4 4条边框设置条边框设置不同的属性值。不同的属性值。方法是按照规定的顺序，给

5、出方法是按照规定的顺序，给出2 2个、个、3 3个或者个或者4 4个属性值，它们的含义将有所区别，个属性值，它们的含义将有所区别，具体含义如下：具体含义如下：如果给出如果给出2 2个属性值，那么前者表个属性值，那么前者表示上下边框的属性，后者表示左右边框的示上下边框的属性，后者表示左右边框的属性。属性。如果给出如果给出3 3个属性值，那么前者表个属性值，那么前者表示上边框的属性，中间的数值表示左右边示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。框的属性，后者表示下边框的属性。如果给出如果给出4 4个属性值，那么依次表个属性值，那么依次表示上、右、下、左边框的属性，即顺时针

6、示上、右、下、左边框的属性，即顺时针排序。排序。2 2在一行中同时设置边框的宽度、颜色和样式在一行中同时设置边框的宽度、颜色和样式 要把要把border-widthborder-width、border-border-border-border-colorcolor和和border-styleborder-style这这3 3个属性合在一起，个属性合在一起，还可以用还可以用borderborder属性来简写。属性来简写。例如：例如：border:2px green dashedborder:2px green dashed 这行样式表示将这行样式表示将4 4条边框都设置为条边框都设置为2 2像

7、像素的绿色虚线，这样就比分为素的绿色虚线，这样就比分为3 3条样式来写条样式来写更更 方便。方便。3 3对一条边框设置与其他边框不同的属性对一条边框设置与其他边框不同的属性 在在CSSCSS中，可以单独对某一条边框在一中，可以单独对某一条边框在一条条CSSCSS规则中设置属性，例如：规则中设置属性，例如：border:2px green dashed;border:2px green dashed;border-left:1px red solid border-left:1px red solid4 4同时制定一条边框的一种属性同时制定一条边框的一种属性 有时，还需要对某一条边框的某一个有时

8、，还需要对某一条边框的某一个属性进行设置，例如仅希望设置左边框的属性进行设置，例如仅希望设置左边框的颜色为红色，可以写作：颜色为红色，可以写作：border-left-color:redborder-left-color:red5 5实例实例 在上面讲解的基础上，给出下述实例，在上面讲解的基础上，给出下述实例，实例文件为实例文件为“04-02.html”04-02.html”。#outerBox#outerBox width:200px;width:200px;height:100px;height:100px;border:2px black solid;border:2px black s

9、olid;border-left:4px green border-left:4px green dashed;dashed;border-color:red gray orange border-color:red gray orange blue;/*blue;/*上上 右右 下下 左左*/border-right-color:purple;border-right-color:purple;4.4 4.4 设置内边距设置内边距 和前面介绍的边框类似，和前面介绍的边框类似，paddingpadding属性属性可以设置可以设置1 1、2 2、3 3或或4 4个属性值，分别如下。个属性值，分别

10、如下。设置设置1 1个属性值时，表示上下左右个属性值时，表示上下左右4 4个个paddingpadding均为该值。均为该值。设置设置2 2个属性值时，前者为上下个属性值时，前者为上下paddingpadding的值，后者为左右的值，后者为左右paddingpadding的值。的值。设置设置3 3个属性值时，第个属性值时，第1 1个为上个为上paddingpadding的值，第的值，第2 2个为左右个为左右paddingpadding的值，的值，第第3 3个为下个为下paddingpadding的值。的值。设置设置4 4个属性值时，按照顺时针方个属性值时，按照顺时针方向，依次为上、右、下、左向

11、，依次为上、右、下、左paddingpadding的值。的值。如果需要专门设置某一个方向的如果需要专门设置某一个方向的paddingpadding，可以使用，可以使用padding-leftpadding-left、padding-rightpadding-right、padding-toppadding-top或者或者padding-bottompadding-bottom来设置。来设置。例如有如下代码，实例文件为例如有如下代码，实例文件为“04-04-04.html”04.html”。图图4.8 padding示意图示意图4.5 4.5 设置外边距设置外边距 外边距（外边距（marginm

12、argin）指的是元素与元素）指的是元素与元素之间的距离。之间的距离。观察图观察图4.74.7，可以看到边框在默认情况，可以看到边框在默认情况下会定位于浏览器窗口的左上角，但是并下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器窗口的边框。没有紧贴着浏览器窗口的边框。这是因为这是因为bodybody本身也是一个盒子，在本身也是一个盒子，在默认情况下，默认情况下，bodybody会有一个若干像素的会有一个若干像素的marginmargin，具体数值因各个浏览器而不尽相，具体数值因各个浏览器而不尽相同。同。因此在因此在bodybody中的其他盒子就不会紧贴中的其他盒子就不会紧贴着浏览器窗口的边框

13、了。着浏览器窗口的边框了。为了验证这一点，可以给为了验证这一点，可以给bodybody这个盒这个盒子也加一个边框，代码如下。子也加一个边框，代码如下。bodybody border:1px black solid;border:1px black solid;background:#cc0;background:#cc0;图图4.10 margin的效果的效果4.6 4.6 盒子之间的关系盒子之间的关系 4.6.1 HTML 4.6.1 HTML与与DOMDOM 1 1“树树”的概念的概念 图图4.12 家谱示意图家谱示意图2 2DOMDOM树树图图4.14 打开新窗口打开新窗口 图图4.15

14、 DOM树与页面布局的对应关系树与页面布局的对应关系4.6.2 4.6.2 标准文档流标准文档流 “标准文档流标准文档流”（Normal Document Normal Document StreamStream），简称），简称“标准流标准流”，是指在不使，是指在不使用其他与排列和定位相关的特殊用其他与排列和定位相关的特殊CSSCSS规则时，规则时，各种元素的排列规则。各种元素的排列规则。1 1块级元素（块级元素（block levelblock level）li li占据着一个矩形的区域，并且和相占据着一个矩形的区域，并且和相邻的邻的lili依次竖直排列，不会排在同一行中。依次竖直排列，不会

15、排在同一行中。ul ul也具有同样的性质，占据着一个矩也具有同样的性质，占据着一个矩形的区域，并且和相邻的形的区域，并且和相邻的ulul依次竖直排列，依次竖直排列，不会排在同一行中。不会排在同一行中。因此，这类元素称为因此，这类元素称为“块级元素块级元素”（block levelblock level），即它们总是以一个块），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。次竖直排列，左右撑满。2 2行内元素（行内元素（inlineinline）对于文字这类元素，各个字母之间横对于文字这类元素，各个字母之间横向排列，到最右端自动折

16、行，这就是另一向排列，到最右端自动折行，这就是另一种元素，称为种元素，称为“行内元素行内元素”（inlineinline）。）。比如比如标记，就是一标记，就是一个典型的行内元素，这个标记本身不占有个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上独立的区域，仅仅是在其他元素的基础上指出了一定的范围。指出了一定的范围。再比如，最常用的再比如，最常用的标记，也是一个标记，也是一个行内元素。行内元素。4.6.3 4.6.3 标记与标记与标记标记 下面举一个简单的例子，实例文件为下面举一个简单的例子，实例文件为“04-06.html”04-06.html”。font-size:1

17、8px;font-size:18px;/*/*字号大小字号大小*/font-weight:bold;font-weight:bold;/*/*字体粗细字体粗细*/font-family:Arial;font-family:Arial;/*/*字体字体*/color:#FFFF00;color:#FFFF00;/*/*颜色颜色*/background-color:#0000FF;/*background-color:#0000FF;/*背景颜色背景颜色*/text-align:center;text-align:center;/*/*对齐方式对齐方式*/width:300px;width:300

18、px;/*/*块宽度块宽度*/height:100px;height:100px;/*/*块高度块高度*/这是一个这是一个divdiv标记标记 div div 标记范例标记范例divdiv 例如有如下代码，实例文件为例如有如下代码，实例文件为“04-04-07.html”07.html”。divdiv与与spanspan的区别的区别 divdiv标记不同行：标记不同行：img src=cup.gif border=0 img src=cup.gif border=0 img src=cup.gif border=0 span span标记同一行：标记同一行：img src=cup.gif bo

19、rder=0 img src=cup.gif border=0 img src=cup.gif border=0 图图4.17 与与标记的区别标记的区别4.7 4.7 盒子在标准流中的定位原则盒子在标准流中的定位原则 4.7.1 4.7.1 行内元素之间的水平行内元素之间的水平marginmargin 图图4.184.18所示为两个块并排的情况。所示为两个块并排的情况。图图4.18 行内元素之间的行内元素之间的margin4.7.2 4.7.2 块级元素之间的竖直块级元素之间的竖直marginmargin 如果不是行内元素，而是竖直排列的如果不是行内元素，而是竖直排列的块级元素，块级元素，ma

20、rginmargin的取值情况就会有所不的取值情况就会有所不同。同。两个块级元素之间的距离不是两个块级元素之间的距离不是margin-margin-bottombottom与与margin-topmargin-top的总和，而是两者中的总和，而是两者中的较大者，如图的较大者，如图4.204.20所示。所示。这个现象称为这个现象称为marginmargin的的“塌陷塌陷”（或（或称为称为“合并合并”）现象，意思是说较小的）现象，意思是说较小的marginmargin塌陷（合并）到了较大的塌陷（合并）到了较大的marginmargin中。中。图图4.20 块元素之间的块元素之间的margin4.7

21、.3 4.7.3 嵌套盒子之间的嵌套盒子之间的marginmargin 除了上面提到的行内元素间隔和块级除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关元素间隔这两种关系外，还有一种位置关系，它的系，它的marginmargin值对值对CSSCSS排版也有重要的作排版也有重要的作用，这就是父子关系。用，这就是父子关系。当一个当一个块包含在另一个块包含在另一个块块中时，便形成了典型的父子关系。中时，便形成了典型的父子关系。其中子块的其中子块的marginmargin将以父块的内容为将以父块的内容为参考，如图参考，如图4.224.22所示。所示。图图4.22 父子块的父子块的m

22、argin 图图4.23 父子块的父子块的margin 图图4.24 IE与与Firefox对待父对待父height的不同处理的不同处理4.7.4 margin4.7.4 margin属性可以设置为负值属性可以设置为负值 上面提及上面提及marginmargin的时候，它的值都是的时候，它的值都是正数。正数。其实其实marginmargin的值也可以设置为负数，的值也可以设置为负数，而且有关的巧妙运用方法也非常多，在后而且有关的巧妙运用方法也非常多，在后续章节中都会陆续介绍。续章节中都会陆续介绍。这里先分析这里先分析marginmargin设为负数时产生的设为负数时产生的排版效果。排版效果。当当marginmargin设为负数时，会使被设为负设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另数的块向相反的方向移动，甚至覆盖在另外的块上。外的块上。实例代码如下，实例文件为实例代码如下，实例文件为“04-04-12.html”12.html”。图图4.26 父子块设置父子块设置margin为负数为负数