《CSS网页设计》课件-第4章CSS盒子模型_第1页
《CSS网页设计》课件-第4章CSS盒子模型_第2页
《CSS网页设计》课件-第4章CSS盒子模型_第3页
《CSS网页设计》课件-第4章CSS盒子模型_第4页
《CSS网页设计》课件-第4章CSS盒子模型_第5页
已阅读5页，还剩70页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章CSS盒子模型

“盒子”与“模型”的概念探究4.1长度单位4.2边框4.3设置内边距4.4

设置外边距4.5盒子之间的关系4.6盒子在标准流中的定位原则4.7

上一章介绍了CSS设计的代码编写和编辑方式，从本章开始将深入讲解CSS的核心原理。盒子模型是CSS控制页面时一个很重要的概念。

只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。

所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。

换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。

本章首先讲解独立的盒子相关的性质，然后介绍在普通情况下盒子的排列关系。下一章将更深入地讲解浮动和定位的相关内容。4.1“盒子”与“模型”的概念探究

图4.1画框示意图

图4.2盒子模型4.2长度单位

1．相对类型

2．绝对类型4.3边框

图4.3border4.3.2属性值的简写形式

CSS中可以用简单的方式确定边框的属性值。1．对不同的边框设置不同的属性值

使用CSS时，可以分别对4条边框设置不同的属性值。

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

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

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

如果给出4个属性值，那么依次表示上、右、下、左边框的属性，即顺时针排序。2．在一行中同时设置边框的宽度、颜色和样式

要把border-width、border-border-color和border-style这3个属性合在一起，还可以用border属性来简写。例如：

border:2pxgreendashed

这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写更方便。3．对一条边框设置与其他边框不同的属性

在CSS中，可以单独对某一条边框在一条CSS规则中设置属性，例如：

border:2pxgreendashed;border-left:1pxredsolid4．同时制定一条边框的一种属性

有时，还需要对某一条边框的某一个属性进行设置，例如仅希望设置左边框的颜色为红色，可以写作：

border-left-color:red5．实例

在上面讲解的基础上，给出下述实例，实例文件为“04-02.html”。

<html> <head> <styletype="text/css"> #outerBox{

width:200px; height:100px;border:2pxblacksolid;border-left:4pxgreendashed;border-color:redgrayorangeblue;/*上右下左*/

border-right-color:purple; } </style> </head> <body> <divid="outerBox"> </div> </body>4.4设置内边距

和前面介绍的边框类似，padding属性可以设置1、2、3或4个属性值，分别如下。

设置1个属性值时，表示上下左右4个padding均为该值。

设置2个属性值时，前者为上下padding的值，后者为左右padding的值。

设置3个属性值时，第1个为上padding的值，第2个为左右padding的值，第3个为下padding的值。

设置4个属性值时，按照顺时针方向，依次为上、右、下、左padding的值。

如果需要专门设置某一个方向的padding，可以使用padding-left、padding-right、padding-top或者padding-bottom来设置。例如有如下代码，实例文件为“04-04.html”。

图4.8padding示意图4.5设置外边距

外边距（margin）指的是元素与元素之间的距离。

观察图4.7，可以看到边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器窗口的边框。

这是因为body本身也是一个盒子，在默认情况下，body会有一个若干像素的margin，具体数值因各个浏览器而不尽相同。

因此在body中的其他盒子就不会紧贴着浏览器窗口的边框了。为了验证这一点，可以给body这个盒子也加一个边框，代码如下。

body{ border:1pxblacksolid; background:#cc0; }

图4.10margin的效果4.6盒子之间的关系

4.6.1HTML与DOM1．“树”的概念

图4.12家谱示意图2．DOM树

图4.14打开新窗口

图4.15DOM树与页面布局的对应关系4.6.2标准文档流

“标准文档流”（NormalDocumentStream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。1．块级元素（blocklevel）

li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。

ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。

因此，这类元素称为“块级元素”（blocklevel），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。2．行内元素（inline）

对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。

比如<strong></strong>标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的<a>标记，也是一个行内元素。4.6.3<div>标记与<span>标记

下面举一个简单的例子，实例文件为“04-06.html”。

font-size:18px; /*字号大小*/font-weight:bold; /*字体粗细*/font-family:Arial; /*字体*/color:#FFFF00; /*颜色*/

background-color:#0000FF;/*背景颜色*/text-align:center; /*对齐方式*/width:300px; /*块宽度*/height:100px; /*块高度*/}

</style> </head> <body> <div>

这是一个div标记

</div> </body> </html>

<html> <head> <title>div标记范例</title> <styletype="text/css"> div{

例如有如下代码，实例文件为“04-07.html”。

<html> <head> <title>div与span的区别</title> </head> <body>

<p>div标记不同行：</p><div><imgsrc="cup.gif"border="0"></div><div><imgsrc="cup.gif"border="0"></div><div><imgsrc="cup.gif"border="0"></div><p>span标记同一行：</p>

<span><imgsrc="cup.gif"border="0"></span><span><imgsrc="cup.gif"border="0"></span><span><imgsrc="cup.gif"border="0"></span></body></html>

图4.17<div>与<span>标记的区别4.7盒子在标准流中的定位原则

4.7.1行内元素之间的水平margin

图4.18所示为两个块并排的情况。

图4.18行内元素之间的margin4.7.2块级元素之间的竖直margin

如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。

两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图4.20所示。

这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。

图4.20块元素之间的margin4.7.3嵌套盒子之间的margin

除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。

当一个<div>块包含在另一个<div>块中时，便形成了典型的父子关系。其中子块的margin将以父块的内容为参考，如图4.22所示。

图4.22父子块的margin

图4.23父子块的margin

图4.24IE与Firefox对待父height的不同处理4.7.4m

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论