Download presentation
Presentation is loading. Please wait.
1
Web前端开发技术与实践 第10章：盒子模型 阮晓龙 13938213680 / rxl@hactcm.edu.cn
河南中医学院管理信息工程学科 河南中医学院网络信息中心
2
本章主要内容 盒子 盒子类型 盒子的属性 浏览器的盒子调试
3
1.盒子 1.1元素盒子 盒子是一个概念，也可以说是容器，可以在里面放置网页中需要显示的内容，文档中每一个元素都会产生一个盒子，盒子拥有很多属性，如width、height、padding、border和margin等。 元素盒子的最内部分是实际的内容，直接包围内容的是内边距。内边距可以呈现元素的背景。内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的元素。
4
元素盒子的组成
5
1.盒子 盒子的内边距、边框和外边距的宽度都是可选的，其默认值是零。
1.1元素盒子 盒子的内边距、边框和外边距的宽度都是可选的，其默认值是零。 许多元素将会由浏览器自身设置不同的外边距和内边距，可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式，已实现元素在不同浏览其中样式的统一。
6
1.盒子 1.1元素盒子 外边距 外边距相当于文档中的页边距，是元素边框边缘与相邻元素之间的距离，主要用来分割各种元素，设置元素之间的距离。如下图中，浅灰色部分表示盒子的外边距。
7
1.盒子 1.1元素盒子 外边距 使用margin属性来定义元素外边距，属性值单位可以为长度单位（px、pt、em、ex、in）或百分比，取值可以为正值或负值。 同时外边距还有专门设置某一方向上外边距的属性：margin-top、margin-right、margin-bottom、margin-left五种属性。
8
1.盒子 margin属性 margin可以设置为auto。常见的做法是为外边距设置固定的长度值。
1.1元素盒子 margin属性 margin可以设置为auto。常见的做法是为外边距设置固定的长度值。 还可以为margin设置一个百分比数值。百分比数是相对于父元素的width计算的。
9
1.盒子 值复制 在Web前端开发中，有时需要输入一些重复的值。例如：
1.1元素盒子 值复制 在Web前端开发中，有时需要输入一些重复的值。例如： 这种情况下可以使用值复制，不必重复地键入相同的数字。上面的规则与下面的规则是等价的。
10
1.盒子 值复制的规则如下： 如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。
1.1元素盒子 值复制的规则如下： 如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。 如果缺少右外边距的值，则使用上外边距的值。
11
1.盒子 值复制的规则如下： 如果为外边距指定了3个值，则第4个值（即左外边距）会从第2个值（右外边距）复制得到。
1.1元素盒子 值复制的规则如下： 如果为外边距指定了3个值，则第4个值（即左外边距）会从第2个值（右外边距）复制得到。 如果给定了2个值，第4个值会从第2个值复制得到，第3个值（下外边距）会从第1个值（上外边距）复制得到。 如果只给定一个值，那么其他3个外边距都由这个值（上外边距）复制得到。
12
1.盒子 1.1元素盒子 值复制的规则如下： 利用这个简单的机制，只需指定必要的值，而不必全部都应用4个值。例如：
13
1.盒子 1.1元素盒子 单边外边距属性 使用单边外边距属性可以为元素单边上的外边距设置值。例如把p元素的左外边距设置为20px。
14
1.盒子 1.1元素盒子 外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
15
1.盒子 1.1元素盒子 外边距合并 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
16
1.盒子 外边距合并 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
1.1元素盒子 外边距合并 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
17
1.盒子 1.1元素盒子 外边距合并 一个空元素，它有外边距，但是没有边框或填充，这种情况下，上外边距与下外边距就碰到了一起，就会发生合并。
18
1.盒子 1.1元素盒子 外边距合并 如果空元素外边距遇到另一个元素的外边距，也会发生合并。
19
1.盒子 外边距合并初看上去可能有点奇怪，但实际上，它是有意义的。
1.1元素盒子 外边距合并初看上去可能有点奇怪，但实际上，它是有意义的。 如下图所示，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。 注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
20
现场演示： 案例10-01：外边距示例
21
1.盒子 1.1元素盒子 边框：border 边框在网页布局中就是用来分割模块。如下图中，黑色表示盒子的边框。
22
1.盒子 1.1元素盒子 边框可以指定样式、颜色或宽度。宽度属性值可以指定长度值，比如2px或0.1em；或者使用3个关键字（thin、medium（默认值）和thick）之一。 边框颜色可以省略，浏览器就会根据默认值来解析。当元素各边框定义不同颜色时，边角会平分来划分颜色的分布。
23
1.盒子 1.1元素盒子 border常用属性 边框有border、border-style、border-width、border-color 、border-top、border-right、border-bottom、border-left八种常用属性。
24
现场演示： 案例10-02：边框
25
1.盒子 1.1元素盒子 内边距：padding 内边距就是元素包含的内容与元素边框内边沿之间的距离。如下图中，深灰色表示盒子的内边距。
26
1.盒子 1.1元素盒子 内边距：padding 定义内边距使用padding属性，属性值单位可以为长度单位（px、pt、em、ex）或百分比，取值可以为正值，但不允许使用负数值。内边距有padding、padding-top、padding-right、padding-bottom、padding-left五种属性。
27
1.盒子 1.1元素盒子 内边距：padding
28
1.盒子 padding属性 设置h1元素的各边都有10像素的内边距。
1.1元素盒子 padding属性 设置h1元素的各边都有10像素的内边距。 按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值，例如：
29
1.盒子 1.1元素盒子 单边内边距属性 通过使用单边内边距属性，可以分别设置上、右、下、左内边距。例如：
30
1.盒子 内边距的百分比数值 下面这条规则把段落的内边距设置为父元素width的10%。
1.1元素盒子 内边距的百分比数值 下面这条规则把段落的内边距设置为父元素width的10%。 如果一个段落的父元素是div元素，那么它的内边距要根据div的width计算。例如：
31
1.盒子 内边距与外边距在用法上有很大的相似性。但是在使用时应该了解内边距的几不同的特性：
1.1元素盒子 内边距与外边距在用法上有很大的相似性。但是在使用时应该了解内边距的几不同的特性： 当元素没有定义边框时，可以把内边距当作外边距来使用，用来调节元素与其它元素之间的距离。由于外边距相邻时会出现重叠现象，而且比较复杂，使用内边距来调节元素之间的距离往往不用考虑边距重叠的问题。 当为元素定义背景时，对于外边距区域来说，背景图像是不显示的，它永远表现为透明状态；而内边距区域却可以显示背景。 行内元素的内边距能够影响元素边框的大小，而外边距不存在这样的问题。
32
现场演示： 案例10-03：内边距
33
1.盒子 1.1元素盒子 宽和高：width/height 这里要讲的宽和高，指的是元素内容区域的宽和高，不是盒子的实际宽度和高度。如下图中，白色部分表示元素的宽和高。 元素的宽度指width的属性值，高度指height的属性值。属性值单位可以为长度单位（px、pt、em、ex、in）或百分比，取值为正值。
34
1.盒子 1.2尺寸 W3C标准盒子模型 目前浏览器大部分元素都是基于此模型，在内容区外面，依次围绕着 padding区，border区，margin区。盒子的宽度和高度计算公式如下： 盒子的宽度=margin-left + border-left + padding-left + width + pdding-right + border-right + margin-right。 盒子的高度=margin-top + border-top + padding-top + height + pdding-bottom + border-bottom + margin-bottom。
35
盒子的尺寸
36
1.盒子 IE传统盒子模型 这种盒子模型主要存在于IE6以下版本浏览器（不包括IE6或QuirksMode下IE5.5+）。
1.2尺寸 IE传统盒子模型 这种盒子模型主要存在于IE6以下版本浏览器（不包括IE6或QuirksMode下IE5.5+）。 虽然市面上用IE6以下的浏览器应该相当少，但是由于form中部分元素还基于传统的盒子模型此种模型依然被CSS3保留使用。盒子的宽度和高度计算公式如下： 盒子的宽度=margin - left + width + margin - right。 盒子的高度=margin - top + height + margin - bottom。
37
2.盒子类型 2.1盒子的基本类型 CSS提供了display属性来控制盒子的类型，盒子的基本类型如表所示。
39
2.盒子类型 2.1盒子的基本类型 none display属性可指定为none值，用于设置目标对象隐藏，一旦该对象隐藏，其占用的页面空间也会释放。与此类似的还有visibility属性，该属性也可用于设置目标对象是否显示。与display属性不同，当通过visibility隐藏某个HTML元素后，该元素占用的页面空间依然会被保留。visibility属性的两个常用值为visible和hidden，分别用于控制目标对象的显示和隐藏。
40
现场演示： 案例10-04： display属性值none
41
2.盒子类型 2.1盒子的基本类型 block block类型的盒子会占据一行，允许通过CSS设置高度和宽度。一些元素默认就是block类型，比如div、p等。 inline inline类型的盒子不会占据一行（默认允许在一行放置多个元素），即使用CSS设置宽度和高度也不会起作用。一些元素默认就是inline类型，比如span、a。
42
现场演示： 案例10-05：display属性值block与inline
43
2.盒子类型 2.1盒子的基本类型 inline-block 通过为display属性设置inline-block，即可实现这种盒子类型，它是inline和block的综合体，inline-block类型既不会占据一行，也支持width和height指定宽度和高度。
44
现场演示： 案例10-06：display属性值inline-block
45
2.盒子类型 list-item list-item可以将目标元素转换为类似ul的列表元素，也可以同时在元素前添加列表标志。
2.1盒子的基本类型 list-item list-item可以将目标元素转换为类似ul的列表元素，也可以同时在元素前添加列表标志。
46
现场演示： 案例10-07：display属性值list-item
47
2.盒子类型 2.1盒子的基本类型 inline-table 在默认情况下，table元素属于block类型，也就是说，该元素默认占据一行，它的左边不允许出现其他内容，它的右边也不允许出现其他内容。 CSS为table元素提供了一个inline-table类型，它允许设置表格的width、height值，而且允许它的左边、右边出现其他内容。
48
现场演示： 案例10-08：display属性值inline-table
49
2.盒子类型 表格相关的盒子类型 除inline-table类型外，CSS3还为display提供了如下属性值。
2.1盒子的基本类型 表格相关的盒子类型 除inline-table类型外，CSS3还为display提供了如下属性值。 table：此元素会作为块级表格来显示，表格前后带有换行符。 table-row-group：此元素会作为一个或多个行的分组来显示。 table-header-group：此元素会作为一个或多个行的分组来显示。 table-footer-group：此元素会作为一个或多个行的分组来显示。 table-row：此元素会作为一个表格行显示。 table-column-group：此元素会作为一个或多个列的分组来显示。 table-column：此元素会作为一个单元格列显示。 table-cell：此元素会作为一个表格单元格显示。 table-caption：此元素会作为一个表格标题显示。
50
现场演示： 案例10-09：表格相关的盒子类型
51
2.盒子类型 2.1盒子的基本类型 run-in run-in类型有点相似与inline类型，run-in类型的元素希望显示在他后面的元素内部；如果run-in类型的元素后面紧跟一个block类型的元素，那么run-in类型的元素将被放入后面的元素中显示。
52
现场演示： 案例10-10：display属性值run-in
53
2.盒子类型 2.2 CSS3新增的类型 CSS3对display的属性值进行了补充，CSS3新增的类型如表所示。
54
2.盒子类型 2.2 CSS3新增的类型 ruby ruby相关的盒子类型是CSS3新增的盒子类型，常用在文本注释或标注文本的发音，Chrome中暂不支持该类型，可在IE8及IE8以上版本浏览器中测试ruby相关的盒子类型。
55
现场演示： 案例10-11：ruby相关的盒子类型
56
2.盒子类型 2.2 CSS3新增的类型 box box类型还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。 box类型盒子的属性说明如表所示。
57
2.盒子类型 2.2 CSS3新增的类型 box-align有start、end、center、baseline、stretch五种属性值。
58
2.盒子类型 2.2 CSS3新增的类型 box-pack有 start、end、center、justify四种属性值。
59
现场演示： 案例10-12：属性box-align和box-pack
60
2.盒子类型 2.2 CSS3新增的类型 box-direction有normal、reverse、inherit三种属性值。
61
现场演示： 案例10-13：属性box-direction
62
2.盒子类型 2.2 CSS3新增的类型 box-flex属性规定框的子元素是否可伸缩其尺寸。
63
现场演示： 案例10-14：属性box-fiex
64
2.盒子类型 box-ordinal-group属性规定框中子元素的显示次序，值更低的元素会显示在值更高的元素前面显示，其取值只能为整数。
2.2 CSS3新增的类型 box-ordinal-group属性规定框中子元素的显示次序，值更低的元素会显示在值更高的元素前面显示，其取值只能为整数。
65
现场演示： 案例10-15：属性box-ordinal-group
66
2.盒子类型 2.3浏览器对盒子的支持情况 各浏览器对盒子的支持情况如表所示。
68
3.盒子的属性 3.1内容溢出 如在样式中指定了盒子的宽度和高度，就可能出现内容在盒子中容纳不下的情况，可以使用overflow属性来指定如何显示盒子中容纳不下的内容。同时，与overflow属性相关的还有overflow-x属性、overflow-y属性及text-overflow属性。
69
3.盒子的属性 3.1内容溢出 overflow 使用overflow属性来指定对于盒子中容纳不下的内容的显示方法。overflow有visible、hidden、scroll、auto、inherit五种属性值。
70
现场演示： 案例10-16：属性overflow
71
3.盒子的属性 overflow-x和overflow-y
3.1内容溢出 overflow-x和overflow-y 使用overflow-x属性或overflow-y属性，可以单独指定在水平方向上或垂直方向上内容超出盒子的容纳范围时的显示方法，使用方法与overflow属性的使用方法相似。
72
3.盒子的属性 overflow-x和overflow-y
3.1内容溢出 overflow-x和overflow-y overflow-x和overflow-y有visible、hidden、scroll、auto、no-display、no-content六种属性值，如表所示。
73
现场演示： 案例10-17：属性overflow-x和属性overflow-y
74
3.盒子的属性 3.1内容溢出 text-overflow 当通过把overflow属性的属性值设为“hidden”的方法，将盒子中容纳不下的内容隐藏起来时，如果使用text-overflow属性，可以在盒子的末尾显示一个代表省略的符号“…”。但是，text-overflow属性只在当盒子中内容水平方向上超出盒子的容纳范围时有效。 text-overflow有clip、ellipsis、string三种属性值，如表所示。
75
现场演示： 案例10-18：属性text-overflow
76
3.盒子的属性 为了增强用户体验，CSS增加了一个非常实用的属性resize，它允许用户通过拖动的方式来修改元素的尺寸，改变元素的大小。
3.2自由缩放 为了增强用户体验，CSS增加了一个非常实用的属性resize，它允许用户通过拖动的方式来修改元素的尺寸，改变元素的大小。 resize有none、both、horizontal、vertical、inherit五种属性值，如表所示。
77
现场演示： 案例10-19：属性resize
78
3.盒子的属性 3.3外轮廓 外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 外轮廓有outline-color、outline-style、outline-width、outline-offset、inherit五种属性，如表所示。
79
3.盒子的属性 3.3外轮廓 outline-color 定义外轮廓线的颜色，默认值为黑色。属性值为CSS中定义的颜色值。可以为颜色值为颜色名称（比如 red、blue）、十六进制值（比如 #ff0000、#cccccc）、rgb 代码（比如 rgb(255,0,0)、rgb（167、167、167）。
80
3.盒子的属性 3.3外轮廓 outline-style 定义外轮廓线的样式，在实际应用中，省略此参数外轮廓默认值为none,不绘制外轮廓线。outline-style的属性值如表所示。
81
3.盒子的属性 3.3外轮廓 outline-width 定义外轮廓的宽度。在实际应用中，省略此参数外轮廓默认值为medium，表示绘制中等宽度的外轮廓线。outline-width的属性值如表所示。
82
3.盒子的属性 3.3外轮廓 outline-offset 定义外轮廓的偏移位置，此值可以为负值。当此参数的值为正数值，表示外轮廓向外偏离多少个像素；当此参数的值为负数值，表示外轮廓向内偏移了多少像素。
83
现场演示： 案例10-20：外轮廓
84
3.盒子的属性 3.4阴影 在CSS3中，可以使用box-shadow属性让盒子在显示时产生阴影效果。
85
3.盒子的属性 box-shadow属性 box-shadow属性可以为所有盒子模型的元素整体增加阴影，是一个复合属性。该属性值如表所示。
3.4阴影 box-shadow属性 box-shadow属性可以为所有盒子模型的元素整体增加阴影，是一个复合属性。该属性值如表所示。
86
现场演示： 案例10-21：属性box-shadow
87
3.盒子的属性 对第一个文字或第一行使用阴影 使用first-letter选择器或first-line选择器可以只让第一个文字具有阴影效果。
3.4阴影 对第一个文字或第一行使用阴影 使用first-letter选择器或first-line选择器可以只让第一个文字具有阴影效果。
88
现场演示： 案例10-22：对第一个文字实阴影
89
3.盒子的属性 3.4阴影 对表格及单元格使用阴影。 使用box-shadow属性可以让表格及表格内的单元格产生阴影效果。
90
现场演示： 案例10-23：对表格及单元格使用阴影
91
4.浏览器的盒子调试 在Internet Explorer浏览器中进行盒子调试
92
盒子的样式 盒子的布局
93
4.浏览器的盒子调试 在Firefox浏览器中进行盒子调试
94
盒子元素模型
95
4.浏览器的盒子调试 在Google Chrome浏览器中进行盒子调试
96
盒子元素的样式和模型
97
现场演示： 案例10-24：浏览器中的盒子调试
98
Thanks.
Similar presentations
