中职 网页设计与制作案例教程第9章 .pptx

《中职 网页设计与制作案例教程第9章 .pptx》由会员分享，可在线阅读，更多相关《中职 网页设计与制作案例教程第9章 .pptx（30页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、中职 网页设计与制作案例教程第9章 工信版第9 章 盒子模型WEB39.1 基础项目：根据布局图创建简单的盒模型页面9.2 知识库：盒子模型的理解与应用9.3 拓展项目：使用盒子模型创建网页布局目录WEB49.1 基础项目：根据布局图创建简单的盒模型页面5（1）掌握盒子模型的基本概念。（2）能够根据结构图或效果图建立盒子模型。（3）能够计算每个元素所占的宽度和高度。知识技能目标9.1 基础项目：根据布局图创建简单的盒模型页面WEB6内边距p adding内容cont ent边框bor der标准W3C 盒子模型9.2 知识库：盒子模型的理解与应用外边距mar ginWEB79.2.1 盒子模型

2、的概念9.2.1 盒子模型的概念一个标准的W3C 盒子模型由cont ent、p adding、bor der和mar gin 这4 个属性组成。content（内容）盒子的内容，显示文本和图像padding（内边距）内容与边框之间的距离。会受到框中填充的背景 颜色影响。margin（外边距）盒子与其它盒子间的距离。margin 是完全透明的，没有背景色。border（边框）盒子的边框，它具有border-style、border-width、border-color 属性。边框是受到盒子的背景颜色影响的。9.2.1 盒子模型的概念在 CSS 的 标 准 盒 子 模 型 中，width 和 h

3、eight 指 的 是 内 容 区 域（cont ent）的 宽 度 和 高 度，不 是 盒 子 的 实 际 大 小。增 加 内 边距、边 框 和 外 边 距 不 会 影 响 内 容 区 域 的 尺 寸，但 是 会 增 加 元 素框的总尺寸。注意：IE 的盒子模型与标准的W3C 盒子模型有区别，IE 的盒子模型中，width 和height 指的是内容区域+border+padding 的宽度和高度。在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。9.2.2 盒子模型的计算在标准的W3C 盒子模型中：元素框的总宽度=元素的width+p adding 的左右边距的值+mar

4、 gin 的左右边距的值+bor der 的左右宽度；元素框的总高度=元素的height+p adding 的上下边距的值+mar gin 的上下边距的值 bor der 的上下高度。9.2.2 盒子模型的计算width:250p x;height:300p x;p adding:10p x;mar gin:10p x;bor der:5p xsolidgray;请按照W3C 标准计算一下这个元素实际占用的空间9.2.2 盒子模型的计算算一下，以下两个盒子实际占用的宽度是多少（默认外边距为0）？.box1 width:100px;height:100px;padding:100px;borde

5、r:1px solid red;.box2 width:250px;height:250px;padding:25px;border:1px solid red;9.2.2 盒子模型的计算在实际开发中，如何解决IE 的盒子模型width/height 计算方法和标准的W3C 盒子模型width 计算方法不同的问题？统一布局的烦恼9.2.3bo x-sizing 属性介绍bo x-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。语法格式：bo x-sizing:cont ent-bo x|bor der-bo x|inherit;属性值 描述c on t en t-bo x默认值。

6、这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。bor der-bo x为元素设定的宽度和高度决定了元素的边框盒。就 是 说，为 元 素 指 定 的 任 何 内 边 距 和 边 框 都 将 在 已 设 定 的 宽 度 和高 度 内 进 行 绘 制。通 过 从 已 设 定 的 宽 度 和 高 度 分 别 减 去 边 框 和 内 边距才能得到内容的宽度和高度。inherit 规定应从父元素继承 box-sizing 属性的值。9.2.3bo x-sizing 属性介绍比较下面两段代码bo x-sizing 属性值及其带来的不同结果

7、（mar gin:0）.test1 box-sizing:content-box;width:200px;padding:10px;border:15px solid#eee;.test2 box-sizing:border-box;width:200px;padding:10px;border:15px solid#eee;9.2.4 伪元素用于向某些选择器设置特殊效果语法格式：select or:pseudo-elementpr oper ty:v alue;9.2.4 伪元素1:fir st-line 伪元素用于向文本的首行设置特殊样式p:fir st-linecolor:#ff0000

8、;font-v ariant:small-caps;Y oucanusethe:fir st-linepseudo-elementt oaddaspecialeffectt othefir stlineo fat ext!只能用于块级元素9.2.4 伪元素2:fir st-lett er 伪元素用于向文本的首字母设置特殊样式p:fir st-lett ercolor:#ff0000;font-size:xx-lar ge;Y oucanusethe:fir st-lett erpseudo-elementt oaddaspecialeffectt othefir stlett ero fat

9、ext!只能用于块级元素9.2.4 伪元素3 伪元素和类伪元素可以与CSS 类配合使用p.ar ticle:fir st-lett ercolor:#FF0000;Thisisap aragraphinanar ticle。Thisisap aragraphinanar ticle。select or.class:pseudo-elementpr oper ty:v alue;9.2.4 伪元素4 多重伪元素可以结合多个伪元素来使用p:fir st-lett ercolor:#ff0000;font-size:xx-lar ge;p:fir st-linecolor:#0000ff;font-

10、v ariant:small-caps;Y oucancombinethe:fir st-lett erand:fir st-linepseudo-elementst oaddaspecialeffectt othefir stlett erandthefir stlineo fat ext!9.2.4 伪元素4 多重伪元素当文字在浏览器窗口显示在一行内时当文字在浏览器窗口中超过一行显示时9.2.4 伪元素5:befor e 伪元素可以在元素的内容前面插入新内容h1:befor econt ent:url(images/befor e.gif)ThisisaheadingThe:befor e

11、pseudo-elementinser tscont entbefor eanelement.9.2.4 伪元素6:af t er 伪元素可以在元素的内容之后插入新内容h1:af t ercont ent:url(images/af t er.gif)ThisisaheadingThe:af t erpseudo-elementinser tscont entaf t eranelement.9.2.5 实际开发中遇到的和盒子模型相关的应用及小问题1 mar gin 越界第 一 个 子 元 素 的margin-top 和 最 后 一 个 子 元 素 的margin-bottom的越界问题。当父

12、元素没有边框border 时，设置第一个子元素的margin-top 值的时候，会出现margin-top 值加在父元素上的现象。9.2.5 实际开发中遇到的和盒子模型相关的应用及小问题1 mar gin 越界解决方法（1）给父元素加边框bor der（副作用）（2）给父元素设置p adding 值（副作用）（3）父元素添加ov er flow：hidden（副作用）（4）父元素加前置内容生成。（推荐）9.2.5 实际开发中遇到的和盒子模型相关的应用及小问题2 浏览器间的盒子模型ul 标签在Mozilla 中默认是有p adding 值的，而在IE 中只有mar gin 有值。标准盒子模型与IE 模型之间的差异：标准的盒子模型就是前述介绍的那种，而IE 模型更像是bo x-sizing:bor der-bo x；其内容宽度还包含了bor der 和p adding。解决办法：在html 模板中加doctype 声明。9.2.5 实际开发中遇到的和盒子模型相关的应用及小问题3 用盒子模型画三角形将盒子的width 和height 设置为0，利用bor der 属性可以绘制出三角形。299.3 拓展项目：使用盒子模型创建网页布局