计算机文化

Size: px

Start display at page:

Download "计算机文化"

钦花
5 years ago
Views:

1 1 Web 前端开发技术与实践第 10 章 : 盒子模型阮晓龙 / rxl@hactcm.edu.cn 河南中医学院管理信息工程学科河南中医学院网络信息中心

2 2 本章主要内容盒子盒子类型盒子的属性浏览器的盒子调试

3 3 1. 盒子 1.1 元素盒子盒子是一个概念, 也可以说是容器, 可以在里面放置网页中需要显示的内容, 文档中每一个元素都会产生一个盒子, 盒子拥有很多属性, 如 width height padding border 和 margin 等元素盒子的最内部分是实际的内容, 直接包围内容的是内边距内边距可以呈现元素的背景内边距的边缘是边框, 边框以外是外边距, 外边距默认是透明的, 因此不会遮挡其后的元素

4 4 元素盒子的组成

5 5 1. 盒子 1.1 元素盒子盒子的内边距边框和外边距的宽度都是可选的, 其默认值是零许多元素将会由浏览器自身设置不同的外边距和内边距, 可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式, 已实现元素在不同浏览其中样式的统一

6 6 1. 盒子 1.1 元素盒子外边距外边距相当于文档中的页边距, 是元素边框边缘与相邻元素之间的距离, 主要用来分割各种元素, 设置元素之间的距离如下图中, 浅灰色部分表示盒子的外边距

7 7 1. 盒子 1.1 元素盒子外边距使用 margin 属性来定义元素外边距, 属性值单位可以为长度单位 (px pt em ex in) 或百分比, 取值可以为正值或负值同时外边距还有专门设置某一方向上外边距的属性 :margin-top margin-right margin-bottom margin-left 五种属性

8 8 1. 盒子 1.1 元素盒子 margin 属性 margin 可以设置为 auto 常见的做法是为外边距设置固定的长度值还可以为 margin 设置一个百分比数值百分比数是相对于父元素的 width 计算的

9 9 1. 盒子 1.1 元素盒子值复制在 Web 前端开发中, 有时需要输入一些重复的值例如 : 这种情况下可以使用值复制, 不必重复地键入相同的数字上面的规则与下面的规则是等价的

10 10 1. 盒子 1.1 元素盒子值复制的规则如下 : 如果缺少左外边距的值, 则使用右外边距的值如果缺少下外边距的值, 则使用上外边距的值如果缺少右外边距的值, 则使用上外边距的值

11 11 1. 盒子 1.1 元素盒子值复制的规则如下 : 如果为外边距指定了 3 个值, 则第 4 个值 ( 即左外边距 ) 会从第 2 个值 ( 右外边距 ) 复制得到如果给定了 2 个值, 第 4 个值会从第 2 个值复制得到, 第 3 个值 ( 下外边距 ) 会从第 1 个值 ( 上外边距 ) 复制得到如果只给定一个值, 那么其他 3 个外边距都由这个值 ( 上外边距 ) 复制得到

12 12 1. 盒子 1.1 元素盒子值复制的规则如下 : 利用这个简单的机制, 只需指定必要的值, 而不必全部都应用 4 个值例如 :

13 13 1. 盒子 1.1 元素盒子单边外边距属性使用单边外边距属性可以为元素单边上的外边距设置值例如把 p 元素的左外边距设置为 20px

14 14 1. 盒子 1.1 元素盒子外边距合并外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

15 15 1. 盒子 1.1 元素盒子外边距合并当一个元素出现在另一个元素上面时, 第一个元素的下外边距与第二个元素的上外边距会发生合并

16 16 1. 盒子 1.1 元素盒子外边距合并当一个元素包含在另一个元素中时 ( 假设没有内边距或边框把外边距分隔开 ), 它们的上和 / 或下外边距也会发生合并

17 17 1. 盒子 1.1 元素盒子外边距合并一个空元素, 它有外边距, 但是没有边框或填充, 这种情况下, 上外边距与下外边距就碰到了一起, 就会发生合并

18 18 1. 盒子 1.1 元素盒子外边距合并如果空元素外边距遇到另一个元素的外边距, 也会发生合并

19 19 1. 盒子 1.1 元素盒子外边距合并初看上去可能有点奇怪, 但实际上, 它是有意义的如下图所示, 段落之间的上外边距和下外边距就合并在一起, 这样各处的距离就一致了注 : 只有普通文档流中块框的垂直外边距才会发生外边距合并行内框浮动框或绝对定位之间的外边距不会合并

20 20 现场演示 : 案例 10-01: 外边距示例

21 21 1. 盒子 1.1 元素盒子边框 :border 边框在网页布局中就是用来分割模块如下图中, 黑色表示盒子的边框

22 22 1. 盒子 1.1 元素盒子边框可以指定样式颜色或宽度宽度属性值可以指定长度值, 比如 2px 或 0.1em; 或者使用 3 个关键字 (thin medium( 默认值 ) 和 thick) 之一边框颜色可以省略, 浏览器就会根据默认值来解析当元素各边框定义不同颜色时, 边角会平分来划分颜色的分布

23 23 1. 盒子 1.1 元素盒子 border 常用属性边框有 border border-style border-width border-color border-top border-right border-bottom border-left 八种常用属性

24 24 现场演示 : 案例 10-02: 边框

25 25 1. 盒子 1.1 元素盒子内边距 :padding 内边距就是元素包含的内容与元素边框内边沿之间的距离如下图中, 深灰色表示盒子的内边距

26 26 1. 盒子 1.1 元素盒子内边距 :padding 定义内边距使用 padding 属性, 属性值单位可以为长度单位 (px pt em ex) 或百分比, 取值可以为正值, 但不允许使用负数值内边距有 padding padding-top padding-right paddingbottom padding-left 五种属性

27 27 1. 盒子 1.1 元素盒子内边距 :padding

28 28 1. 盒子 1.1 元素盒子 padding 属性设置 h1 元素的各边都有 10 像素的内边距按照上右下左的顺序分别设置各边的内边距, 各边均可以使用不同的单位或百分比值, 例如 :

29 29 1. 盒子 1.1 元素盒子单边内边距属性通过使用单边内边距属性, 可以分别设置上右下左内边距例如 :

30 30 1. 盒子 1.1 元素盒子内边距的百分比数值下面这条规则把段落的内边距设置为父元素 width 的 10% 如果一个段落的父元素是 div 元素, 那么它的内边距要根据 div 的 width 计算例如 :

31 31 1. 盒子 1.1 元素盒子内边距与外边距在用法上有很大的相似性但是在使用时应该了解内边距的几不同的特性 : 当元素没有定义边框时, 可以把内边距当作外边距来使用, 用来调节元素与其它元素之间的距离由于外边距相邻时会出现重叠现象, 而且比较复杂, 使用内边距来调节元素之间的距离往往不用考虑边距重叠的问题当为元素定义背景时, 对于外边距区域来说, 背景图像是不显示的, 它永远表现为透明状态 ; 而内边距区域却可以显示背景行内元素的内边距能够影响元素边框的大小, 而外边距不存在这样的问题

32 32 现场演示 : 案例 10-03: 内边距

33 33 1. 盒子 1.1 元素盒子宽和高 :width/height 这里要讲的宽和高, 指的是元素内容区域的宽和高, 不是盒子的实际宽度和高度如下图中, 白色部分表示元素的宽和高元素的宽度指 width 的属性值, 高度指 height 的属性值属性值单位可以为长度单位 (px pt em ex in) 或百分比, 取值为正值

34 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 35 盒子的尺寸

36 36 1. 盒子 1.2 尺寸 IE 传统盒子模型这种盒子模型主要存在于 IE6 以下版本浏览器 ( 不包括 IE6 或 QuirksMode 下 IE5.5+) 虽然市面上用 IE6 以下的浏览器应该相当少, 但是由于 form 中部分元素还基于传统的盒子模型此种模型依然被 CSS3 保留使用盒子的宽度和高度计算公式如下 : 盒子的宽度 =margin - left + width + margin - right 盒子的高度 =margin - top + height + margin - bottom

37 37 2. 盒子类型 2.1 盒子的基本类型 CSS 提供了 display 属性来控制盒子的类型, 盒子的基本类型如表所示

38 38

39 39 2. 盒子类型 2.1 盒子的基本类型 none display 属性可指定为 none 值, 用于设置目标对象隐藏, 一旦该对象隐藏, 其占用的页面空间也会释放与此类似的还有 visibility 属性, 该属性也可用于设置目标对象是否显示与 display 属性不同, 当通过 visibility 隐藏某个 HTML 元素后, 该元素占用的页面空间依然会被保留 visibility 属性的两个常用值为 visible 和 hidden, 分别用于控制目标对象的显示和隐藏

40 40 现场演示 : 案例 10-04: display 属性值 none

41 41 2. 盒子类型 2.1 盒子的基本类型 block block 类型的盒子会占据一行, 允许通过 CSS 设置高度和宽度一些元素默认就是 block 类型, 比如 div p 等 inline inline 类型的盒子不会占据一行 ( 默认允许在一行放置多个元素 ), 即使用 CSS 设置宽度和高度也不会起作用一些元素默认就是 inline 类型, 比如 span a

42 42 现场演示 : 案例 10-05:display 属性值 block 与 inline

43 43 2. 盒子类型 2.1 盒子的基本类型 inline-block 通过为 display 属性设置 inline-block, 即可实现这种盒子类型, 它是 inline 和 block 的综合体,inline-block 类型既不会占据一行, 也支持 width 和 height 指定宽度和高度

44 44 现场演示 : 案例 10-06:display 属性值 inline-block

45 45 2. 盒子类型 2.1 盒子的基本类型 list-item list-item 可以将目标元素转换为类似 ul 的列表元素, 也可以同时在元素前添加列表标志

46 46 现场演示 : 案例 10-07:display 属性值 list-item

47 47 2. 盒子类型 2.1 盒子的基本类型 inline-table 在默认情况下,table 元素属于 block 类型, 也就是说, 该元素默认占据一行, 它的左边不允许出现其他内容, 它的右边也不允许出现其他内容 CSS 为 table 元素提供了一个 inline-table 类型, 它允许设置表格的 width height 值, 而且允许它的左边右边出现其他内容

48 48 现场演示 : 案例 10-08:display 属性值 inline-table

49 49 2. 盒子类型 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 50 现场演示 : 案例 10-09: 表格相关的盒子类型

51 51 2. 盒子类型 2.1 盒子的基本类型 run-in run-in 类型有点相似与 inline 类型,run-in 类型的元素希望显示在他后面的元素内部 ; 如果 run-in 类型的元素后面紧跟一个 block 类型的元素, 那么 run-in 类型的元素将被放入后面的元素中显示

52 52 现场演示 : 案例 10-10:display 属性值 run-in

53 53 2. 盒子类型 2.2 CSS3 新增的类型 CSS3 对 display 的属性值进行了补充,CSS3 新增的类型如表所示

54 54 2. 盒子类型 2.2 CSS3 新增的类型 ruby ruby 相关的盒子类型是 CSS3 新增的盒子类型, 常用在文本注释或标注文本的发音,Chrome 中暂不支持该类型, 可在 IE8 及 IE8 以上版本浏览器中测试 ruby 相关的盒子类型

55 55 现场演示 : 案例 10-11:ruby 相关的盒子类型

56 56 2. 盒子类型 2.2 CSS3 新增的类型 box box 类型还没有得到 firefox Opera chrome 浏览器的完全支持, 但可以使用它们的私有属性定义 firefox(-moz-) opera(-o-) chrome/safari(-webkit-) box 类型盒子的属性说明如表所示

57 57 2. 盒子类型 2.2 CSS3 新增的类型 box-align 有 start end center baseline stretch 五种属性值

58 58 2. 盒子类型 2.2 CSS3 新增的类型 box-pack 有 start end center justify 四种属性值

59 59 现场演示 : 案例 10-12: 属性 box-align 和 box-pack

60 60 2. 盒子类型 2.2 CSS3 新增的类型 box-direction 有 normal reverse inherit 三种属性值

61 61 现场演示 : 案例 10-13: 属性 box-direction

62 62 2. 盒子类型 2.2 CSS3 新增的类型 box-flex 属性规定框的子元素是否可伸缩其尺寸

63 63 现场演示 : 案例 10-14: 属性 box-fiex

64 64 2. 盒子类型 2.2 CSS3 新增的类型 box-ordinal-group 属性规定框中子元素的显示次序, 值更低的元素会显示在值更高的元素前面显示, 其取值只能为整数

65 65 现场演示 : 案例 10-15: 属性 box-ordinal-group

66 66 2. 盒子类型 2.3 浏览器对盒子的支持情况各浏览器对盒子的支持情况如表所示

67 67

68 68 3. 盒子的属性 3.1 内容溢出如在样式中指定了盒子的宽度和高度, 就可能出现内容在盒子中容纳不下的情况, 可以使用 overflow 属性来指定如何显示盒子中容纳不下的内容同时, 与 overflow 属性相关的还有 overflow-x 属性 overflow-y 属性及 text-overflow 属性

69 69 3. 盒子的属性 3.1 内容溢出 overflow 使用 overflow 属性来指定对于盒子中容纳不下的内容的显示方法 overflow 有 visible hidden scroll auto inherit 五种属性值

70 70 现场演示 : 案例 10-16: 属性 overflow

71 71 3. 盒子的属性 3.1 内容溢出 overflow-x 和 overflow-y 使用 overflow-x 属性或 overflow-y 属性, 可以单独指定在水平方向上或垂直方向上内容超出盒子的容纳范围时的显示方法, 使用方法与 overflow 属性的使用方法相似

72 72 3. 盒子的属性 3.1 内容溢出 overflow-x 和 overflow-y overflow-x 和 overflow-y 有 visible hidden scroll auto nodisplay no-content 六种属性值, 如表所示

73 73 现场演示 : 案例 10-17: 属性 overflow-x 和属性 overflow-y

74 74 3. 盒子的属性 3.1 内容溢出 text-overflow 当通过把 overflow 属性的属性值设为 hidden 的方法, 将盒子中容纳不下的内容隐藏起来时, 如果使用 text-overflow 属性, 可以在盒子的末尾显示一个代表省略的符号但是,textoverflow 属性只在当盒子中内容水平方向上超出盒子的容纳范围时有效 text-overflow 有 clip ellipsis string 三种属性值, 如表所示

75 75 现场演示 : 案例 10-18: 属性 text-overflow

76 76 3. 盒子的属性 3.2 自由缩放为了增强用户体验,CSS 增加了一个非常实用的属性 resize, 它允许用户通过拖动的方式来修改元素的尺寸, 改变元素的大小 resize 有 none both horizontal vertical inherit 五种属性值, 如表所示

77 77 现场演示 : 案例 10-19: 属性 resize

78 78 3. 盒子的属性 3.3 外轮廓外轮廓 outline 在页面中呈现的效果和边框 border 呈现的效果极其相似, 但和元素边框 border 完全不同, 外轮廓线不占用网页布局空间, 不一定是矩形, 外轮廓属于一种动态样式, 只有元素获取到焦点或者被激活时呈现外轮廓有 outline-color outline-style outline-width outline-offset inherit 五种属性, 如表所示

79 79 3. 盒子的属性 3.3 外轮廓 outline-color 定义外轮廓线的颜色, 默认值为黑色属性值为 CSS 中定义的颜色值可以为颜色值为颜色名称 ( 比如 red blue) 十六进制值 ( 比如 #ff0000 #cccccc) rgb 代码 ( 比如 rgb(255,0,0) rgb( )

80 80 3. 盒子的属性 3.3 外轮廓 outline-style 定义外轮廓线的样式, 在实际应用中, 省略此参数外轮廓默认值为 none, 不绘制外轮廓线 outline-style 的属性值如表所示

81 81 3. 盒子的属性 3.3 外轮廓 outline-width 定义外轮廓的宽度在实际应用中, 省略此参数外轮廓默认值为 medium, 表示绘制中等宽度的外轮廓线 outline-width 的属性值如表所示

82 82 3. 盒子的属性 3.3 外轮廓 outline-offset 定义外轮廓的偏移位置, 此值可以为负值当此参数的值为正数值, 表示外轮廓向外偏离多少个像素 ; 当此参数的值为负数值, 表示外轮廓向内偏移了多少像素

83 83 现场演示 : 案例 10-20: 外轮廓

84 84 3. 盒子的属性 3.4 阴影在 CSS3 中, 可以使用 box-shadow 属性让盒子在显示时产生阴影效果

85 85 3. 盒子的属性 3.4 阴影 box-shadow 属性 box-shadow 属性可以为所有盒子模型的元素整体增加阴影, 是一个复合属性该属性值如表所示

86 86 现场演示 : 案例 10-21: 属性 box-shadow

87 87 3. 盒子的属性 3.4 阴影对第一个文字或第一行使用阴影使用 first-letter 选择器或 first-line 选择器可以只让第一个文字具有阴影效果

88 88 现场演示 : 案例 10-22: 对第一个文字实阴影

89 89 3. 盒子的属性 3.4 阴影对表格及单元格使用阴影使用 box-shadow 属性可以让表格及表格内的单元格产生阴影效果

90 90 现场演示 : 案例 10-23: 对表格及单元格使用阴影

91 91 4. 浏览器的盒子调试在 Internet Explorer 浏览器中进行盒子调试

92 92 盒子的样式盒子的布局

93 93 4. 浏览器的盒子调试在 Firefox 浏览器中进行盒子调试

94 94 盒子元素模型

95 95 4. 浏览器的盒子调试在 Google Chrome 浏览器中进行盒子调试

96 96 盒子元素的样式和模型

97 97 现场演示 : 案例 10-24: 浏览器中的盒子调试

98 98 Thanks.

大漠伪前端, 就职于淘宝

大漠伪前端, 就职于淘宝 CSS Grid Layout 2016-12-17 @ 大漠. #CSSConf https://www.flickr.com/photos/19139526@n00/8331063530/ 大漠伪前端, 就职于淘宝古老的 table 布局现代 Web 布局 Float inline-block display: table position (absolute 或 relative)