当前位置:首页 >> 计算机软件及应用 >>

网页设计与制作案例教程(HTML5+CSS3) 第9章 盒子模型_图文

第9章 盒子模型 9.1 基础项目:根据布局图创建简单的盒模型页面 目录 9.2 知识库:盒子模型的理解与应用 9.3 拓展项目:使用盒子模型创建网页布局 WEB 2 9.1 基础项目:根据布局图创建简单的盒模型页面 WEB 3 9.1 基础项目:根据布局图创建简单的盒模型页面 知识技能目标 (1)掌握盒子模型的基本概念。 (2)能够根据结构图或效果图建立盒子模型。 (3)能够计算每个元素所占的宽度和高度。 4 9.2 知识库:盒子模型的理解与应用 标准W3C盒子模型 内容 content 内边距 padding 边框 border 外边距 margin WEB 5 9.2.1 盒子模型的概念 WEB 6 9.2.1 盒子模型的概念 一个标准的W3C盒子模型由content、padding、border 和margin这4个属性组成。 content(内容)——盒子的内容,显示文本和图像 padding(内边距)——内容与边框之间的距离。会受到框中填充的背景 颜色影响。 margin(外边距)——盒子与其它盒子间的距离。margin是完全透明的, 没有背景色。 border(边框)——盒子的边框,它具有border-style、border-width、 border-color属性。边框是受到盒子的背景颜色影响的。 9.2.1 盒子模型的概念 在 CSS 的标准盒子模型中 , width 和 height 指的是内容区域 ( content )的宽度和高度,不是盒子的实际大小。增加内边 距、边框和外边距不会影响内容区域的尺寸,但是会增加元素 框的总尺寸。 注意:IE的盒子模型与标准的W3C盒子模型有区别,IE的盒子模型中, width和height指的是内容区域+border+padding的宽度和高度。 在盒模型中,外边距可以是负值,而且在很多情况下都要使用负值的外边距。 9.2.2 盒子模型的计算 在标准的W3C盒子模型中: 元素框的总宽度 = 元素的width + padding的左右边距的值 + margin的左右边距的值 + border的左右宽度; 元素框的总高度 = 元素的height + padding的上下边距的值 + margin的上下边距的值 + border的上下高度。 9.2.2 盒子模型的计算 请按照W3C标准计算一下这个元素实际占用的空间 width:250px; height:300px; padding:10px; margin:10px; border:5px solid gray; 9.2.2 盒子模型的计算 算一下,以下两个盒子实际占用的宽度是多少(默认外边距为0)? .box1{ .box2{ width:250px; height:250px; padding:25px; border: 1px solid red; } width:100px; height:100px; padding:100px; border: 1px solid red; } 9.2.2 盒子模型的计算 统一布局的烦恼 在实际开发中,如何解决IE的盒子模型width/height计算 方法和标准的W3C盒子模型width计算方法不同的问题? 9.2.3 box-sizing属性介绍 box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。 语法格式:box-sizing: content-box|border-box|inherit; 属性值 描述 默认值。这是由 CSS2.1 规定的宽度高度行为。 content-box 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 为元素设定的宽度和高度决定了元素的边框盒。 border-box 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和 高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边 距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。 9.2.3 box-sizing属性介绍 比较下面两段代码box-sizing属性值及其带来的不同结果(margin:0) .test1{ .test2{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; } } box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; 9.2.4 伪元素 用于向某些选择器设置特殊效果 语法格式:selector:pseudo-element {property:value;} 9.2.4 伪元素 1.:first-line 伪元素 用于向文本的首行设置特殊样式 <html> <head> <style type=text/css> p:first-line{color: #ff0000;font-variant: small-caps;} </style> </head> <body> <p>You can use the :first-line pseudo-element to add a special effect to the first line of a text!</p> </body> </html> 只能用于块 级元素 9.2.4 伪元素 2.:first-letter伪元素 用于向文本的首字母设置特殊样式 <html> <head> <style type=text/css> p:first-letter{color: #ff0000;font-size:xx-large;} </style> </hea