当前位置:首页 >> 自考 >>

CSS盒子模型(2h)讲解_图文

第2章 CSS盒子模型

2.1

“盒子”与“模型”的概念探究

2.2

长度单位

2.3

边框

2.4

设置内边距

2.5

设置外边距

2.6

盒子之间的关系

2.7

盒子在标准流中的定位原则

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

所有页面中的元素都可以看成是一个 盒子,占据着一定的页面空间。 一般来说这些被占据的空间往往都要 比单纯的内容大。 换句话说,可以通过调整盒子的边框和 距离等参数,来调节盒子的位置和大小。

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

下面首先讲解独立的盒子相关的性质, 然后介绍在普通情况下盒子的排列关系。

2.1 “盒子”与“模型”的概念探究

图2.1 画框示意图

图2.2 盒子模型

注意:
1.并不仅仅是用div定义的网页元素才是盒子,事实上所有 的网页元素本质上都是以盒子的形式存在的;
2.在浏览器看来,网页上的所有元素是由许多盒子排列在一 起或者相互嵌套; 3.一个盒子实际的宽度(或高度)由 content+padding+border+margin组成。 其中content所占矩形的大小由width和height的值来控制。

2.2 长 度 单 位
1.px:像素,由于它会根据显示设备的分辨率的多少而代表 不同的长度,因此属于相对类型。比如,同样100px,在 800*600的分辨率中和1024*768的分辨率中显示的大小不 同。 2.em:设置以目前字符的高度为单位。比如h1{margin:2em}, 就会以目前字符的两倍高度来显示,注意是以font-size 的属性为参考依据,如果没有指定font-size属性,则以 浏览器默认的字符高度作为参考。

2.3 边框border
margin border padding 内容

图4.3 border

1.对不同的边框设置不同的属性值
使用CSS时,可以分别对4条边框设置 不同的属性值。 方法是按照规定的顺序,给出2个、3个 或者4个属性值,它们的含义将有所区别, 具体含义如下:

?如果给出2个属性值,那么前者表示上下边框的属性,后 者表示左右边框的属性。 ? 如果给出3个属性值,那么前者表示上边框的属性,中间 的数值表示左右边框的属性,后者表示下边框的属性。 ? 如果给出4个属性值,那么依次表示上、右、下、左边框 的属性,即顺时针排序。
border-color:red green border-width:1px 2px 3px; border-style:dotted dashed solid double

2.在一行中同时设置边框的宽度、颜色和样式

要把border-width、border-color和 border-style这3个属性合在一起,还可以 用border属性来简写。 例如: border: 2px green dashed

3.对一条边框设置与其他边框不同的属性

在CSS中,可以单独对某一条边框在一 条CSS规则中设置属性,例如: border: 2px green dashed; border-left: 1px red solid

4.同时制定一条边框的一种属性
有时,还需要对某一条边框的某一个 属性进行设置,例如仅希望设置左边框的 颜色为红色,可以写作: border-left-color:red

5. 设置边框样式border-style
border-style每个属性取值的含义:
none: 无 hidden:隐藏 dashed:虚线 dotted:点线 double:双线 groove:凹槽 inset:内陷 outset:外凸 ridge:突脊 solid:实线

5. 设置边框样式border-style
注意:当有多条规则作用于同一个边框时,会产生 冲突,后面的设置会覆盖前面的设置。

2.4 设置内边距padding
1.内边距用于控制内容与边框之间的距离; 2.同边框类似,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、paddingtop或者padding-bottom来设置。

? 例如有如下代码,实例文件为“02-04.html”。

2.5 设置外边距margin
1.外边距指的是元素与元素之间的距离。 2.打开文件02-03.html:

注意: 1.边框在默认情况下会定位在浏览器窗口的左上角,但是并 没有紧贴着浏览器窗口的边框。 2.这是因为body本身也是一个盒子,在默认情况下,body会 有一个若干像素的margin,具体数值因各个浏览器而不尽 相同。 3.因此在body中的其他盒子就不会紧贴着浏览器窗口的边框 了。

2.6 盒子之间的关系

2.6.1 2.6.2 2.6.3

HTML与DOM 标准文档流 <div>标签与<span>标签

2.6 盒子之间的关系
1.一个盒子内部的关系不难理解,实际上网页比较复杂,一个网页中可 能存在大量的盒子,并且以各种关系相互影响着; 2.为了能够方便地组织各种盒子有序排列和布局,CSS规范的思路是, 首先确定一种标准的排版模式,各种网页元素构成的盒子按照这种标 准的方式排列布局,这种标准就是“标准流”方式。 3.但是仅仅通过标准流方式,很多版式无法实现,限制了布局的灵活性, 因此CSS规范中又给出了另外若干种对盒子进行布局的手段,包括 float和position属性。

<body> <ul>

body

<li> <li>

ul

ul

<ul> <li> <li>

li

li

li

li

图2.15 DOM树与页面布局的对应关系

2.6.2

标准文档流

1.“标准文档流”(Normal Document Stream),简称“标准流”,是 指在不使用其他与排列和定位相关的特殊CSS规则时,各种元素默认的 排列规则。 2.以02-05.html为例,一共有4层结构,这4种元素又可以分为以下两类:
body

ul

ul

li

li

li

li

1.块级元素(block level)
li占据着一个矩形的区域,并且和相邻的li依次竖直排列,不会排在同 一行中。 ul也具有同样的性质,占据着一个矩形的区域,并且和相邻的ul依次竖 直排列,不会排在同一行中。 因此,这类元素称为“块级元素”(block level),即它们总是以一 个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

2.行内元素(inline)
对于文字这类元素,各个字母之间横向排列,到最右端自动折行,这 就是另一种元素,称为“行内元素”(inline)。 比如<span></span>标签,就是一个典型的行内元素,这个标记本身不 占有独立的区域,仅仅是在其他元素的基础上指出了一定的范围。

2.行内元素(inline)
注意: 1.行内元素在DOM树中和块级元素一样,是一个节点。从DOM的角度来看, 块级元素和行内元素是没有区别的,都是树上的一个节点; 2. 但是从CSS的角度看,二者有很大的区别,块级元素拥有自己的区域, 行内元素则没有(display:block或者inline); 3.标准流就是CSS规定的默认的块级元素和行内元素的排列方式;

小结:

2.7 盒子在标准流中的定位原则
1. 如果要精确地控制盒子的位置,就必须对margin有更深入的了解; 2. padding只存在于一个盒子内部,所以通常它不会涉及与其他盒子之 间的关系和相互影响的问题。 3. margin则用于调整不同的盒子之间的位置关系,因此必须对margin 在不同情况下的性质有非常深入的了解。

2.7 盒子在标准流中的定位原则 2.7.1 2.7.2 2.7.3 2.7.4 行内元素之间的水平margin 块级元素之间的竖直margin 嵌套盒子之间的margin margin属性可以设置为负值

2.7.1

行内元素之间的水平margin

1.当两个行内元素相邻时,它们之间的距离为第
一个元素的margin-right加上第2个元素的 margin-left。

span1

Margin-right

Margin-left

span2

图2.18 行内元素之间的margin

2.7.1

行内元素之间的水平margin

实例文件为04-08.html。

2.7.2

块级元素之间的竖直margin

如果不是行内元素,而是竖直排列的块 级元素,margin的取值情况就会有所不同。 两个块级元素之间的距离不是marginbottom与margin-top的总和,而是两者中的 较大者,如图2.20所示。

图2.20 块元素之间的margin

1.这个现象称为margin的“塌陷”(或称为“合 并”)现象,意思是说较小的margin塌陷(合并) 到了较大的margin中。 2.这个特性在制作网页时要特别注意,否则常常会 被增加了margin-top或者margin-bottom值时发现 块“没有移动”的假象所迷惑。 2.示例文件02-09.html。

示例文件02-09.html。

2.7.3

嵌套盒子之间的margin

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

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

父div

父div的padding 子div的margin 子div 子div的padding 子div的内容

图2.22 父子块的margin

1.在标准流中,一个块级元素的盒子水平方向的宽 度会自动延伸,直到上一级盒子的限制位置。 2.实例文件02-10.html

说明: 1.外层的盒子的宽度会自动延伸,直到浏览器窗
口的边界为止; 2.内层div宽度也会自动延伸,直到父div的边界 为止。 3.子div距离父div上边框为40px;

4.上面所说的自动延伸是指宽度。对于高度,div都是以里 面的内容的高度来确定的,也就是会自动收缩到能够包容 下内容的最小高度; 5.宽度方向自动延伸,高度方向自动收缩,都是在没有设定 width和height属性的情况下的表现; 6.width(height)==content 盒子占用的宽度或者高度 =content+padding+border+margin

2.7.4

margin属性可以设置为负值

上面提及margin的时候,它的值都是 正数。 其实margin的值也可以设置为负数, 而且有关的巧妙运用方法也非常多,这里 先分析margin设为负数时产生的排版效果。

当margin设为负数时,会使被设为负数的块向相反的方向移动,甚 至覆盖在另外的块上。 实例文件为“02-12.html”。

Display用法示例:创建基于列表的导航菜单
示例文件:导航菜单.html。P140

注意:display:block语句使得超链接被设置成了块元素。当鼠标指针 进入该块的任何部分时都会被激活,而不是仅在文字上方时才被激活。

Display用法示例:创建基于列表的导航菜单
第一步:建立html基本结构,将菜单的各个项用项目列表<ul>表示。

Display用法示例:创建基于列表的导航菜单
第二步:设置CSS样式,首先把页面的背景色设置为浅色:

Display用法示例:创建基于列表的导航菜单
第三步:设置整个<div>块的宽度为固定150px,并设置文字字体为 Arial,大小为14px,文字右对齐。

Display用法示例:创建基于列表的导航菜单
第四步:取消<ul>的项目符号标记。

注意:display:block语句使得超链接被设置成了块元素。当鼠标指针 进入该块的任何部分时都会被激活,而不是仅在文字上方时才被激活。

Display用法示例:创建基于列表的导航菜单
第五步:在<li>标记下添加分割线,以分割开各个超链接。 修改<a>标签,不显示下划线,并在左侧添加蓝色竖条,右侧增加 阴影部分,内部字体增大间距;

Display用法示例:创建基于列表的导航菜单
第六步:设置超链接的LoVe & HAte(link,visited,hover,active) ,以 实现动态效果。

注意:display:block语句使得超链接被设置成了块元素。当鼠标指针 进入该块的任何部分时都会被激活,而不是仅在文字上方时才被激活。

2.8

盒子模型概念的实例

思考:如何实现使得头像向右下方移动?

建议:尽量用margin来解决,padding会撑大div。

代码见文件夹:css1

课下练习:


相关文章:
CSS盒子模型(2h)讲解_图文.ppt
CSS盒子模型(2h)讲解 - 第2章 CSS盒子模型 2.1 “盒子”与“模型
CSS盒子模型(2h)课案_图文.ppt
CSS盒子模型(2h)课案 - 第2章 CSS盒子模型 2.1 “盒子”与“模型
CSS盒子模型讲解_图文.ppt
CSS盒子模型讲解 - CSS的盒子模型 CSS的盒子模型 ? 盒子模型是CSS
第03部分-CSS盒子模型与定位(2)解析_图文.ppt
第03部分-CSS盒子模型与定位(2)解析 - Web技术及应用 CSS盒子模型与定位 信息工程学院 信息工程学院 2010.10 College of Information Engin...
CSS盒子模型与浮动讲解_图文.ppt
CSS盒子模型与浮动讲解 - CSS盒子模型与定位 主讲教师:李勤实 数字媒体技术系 主要内容 知识回顾 CSS盒子模型 CSS网页布局与定位 总结 1 2 3 4 知识回顾 1 什...
CSS盒子模型-PPT课件_图文.ppt
简单,让IT学习更有效 让IT教学更简单,让IT学习更有效 第四章 CSS盒子模型 ?...【案例7】知识点讲解 让IT教学更简单,让IT学习更有效 3、边框属性(2)设置...
CSS属性(2)-盒子模型_图文.ppt
CSS属性(2)-盒子模型 - 第三节 CSS属性(2) 三、Css属性盒子模型相关属性 ? 1、width、height属性 :设置宽高。 ? 宽度两种写法: (1)width:50...
CSS盒子模型_图文.ppt
简单,让IT学习更有效 让IT教学更简单,让IT学习更有效 第四章 CSS盒子模型 ?...【案例7】知识点讲解 让IT教学更简单,让IT学习更有效 3、边框属性(2)设置...
第二章深入理解盒子模型CSS_图文.ppt
2页 软件开发世界 第3页 软件开发世界 在CSS中,一个独立的盒子模型由co
CSS盒子模型与定位(2)_图文.ppt
CSS盒子模型与定位(2) - 网站管理 CSS盒子模型与定位 信息工程学院 信
CSS盒子模型剖析_图文.ppt
CSS盒子模型剖析 - CSS的盒子模型 CSS的盒子模型 ? 盒子模型是CSS
CSS盒子模型教程_图文.ppt
第四讲: 第四讲: DIV+CSS布局 布局--DIV+CSS布局--CSS盒子模型 CSS盒子模型 1 “盒子模型”的概念 盒子模型” 盒子模型 设置边框 设置内边距 设置外边距 2...
第03部分-CSS盒子模型与定位(2)_图文.ppt
Web技术及应用 CSS盒子模型与定位 信息工程学院 信息工程学院 2010.1
CSS(盒子模型)_图文.ppt
CSS(盒子模型) - 《网站设计》 CSS盒子模型 CSS盒子模型 ?盒子模型CSS的基石之一,它指定元素如何显 示以及(在某种程度上)如何相互交互 ?页面上的每个...
css html 基础 培训 盒子模型 定位模型解析_图文.ppt
/html%20css%20demo/Chapter%2004%20-%20BOX%20MODELS/Table%20Box/example2.html 绝对定位盒子模型 Position:absolute 它不会对其它的元素构成影响,分属不同的...
04_框模型(盒子模型)讲解_图文.ppt
04_框模型(盒子模型)讲解 - 框模型(盒子模型) 框模型(盒子模型) ? CSS中,HTML文档中的每个元素都会生成一个或多个矩 形框,这称为元素框。各元素框中心有一...
第4章CSS盒子模型_图文.ppt
盒子”与“模型”的概念探究 长度单位 边框 设置内边距设置外边距 盒子之间的关系 盒子在标准流中的定位原则 Web标准化技术 胡雪梅 本章开始将深入讲解CSS的核心...
CSS盒模型详解.pdf
CSS盒模型详解_计算机软件及应用_IT/计算机_专业资料。千锋教育 www.qfedu.com 精品课程 全程面授 CSS 盒模型详解 CSS 层叠 我们知道文档中的一个...
基于CSS盒子模型的margin属性解析_图文.pdf
2009年9月第27卷第3期 扬州教育学院学报JournalofYangzhouCollegeofEducation Sept.2009V01.27,No.3 基于CSS盒子模型的margin属性解析殷卫莉(扬州职业大学,江苏扬州...
CSS盒子模型_图文.doc
CSS盒子模型 - CSS 盒子模型 1 盒子模型的概念(※) (1) 在浏览器看来,所有的网页元素本质上就是许多盒子排列在一起或者相 互嵌套。 (2) padding-border-...