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

网页设计与制作案例教程(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

相关文章:
网页设计与制作案例教程(HTML5+CSS3) 第9章 盒子模型_图文.ppt
网页设计与制作案例教程(HTML5+CSS3) 第9章 盒子模型_计算机软件及应用_IT/计算机_专业资料。第9章 盒子模型 9.1 基础项目:根据布局图创建简单的盒模型页面 ...
网页设计与制作案例教程(HTML5+CSS3)_图文.ppt
网页设计与制作案例教程(HTML5+CSS3)_计算机软件及应用_IT/计算机_
网页设计与制作案例教程(HTML5+CSS3) 第3章 CSS样式基....ppt
网页设计与制作案例教程(HTML5+CSS3) 第3章 CSS样式基础_计算机软
HTML5+CSS3网页设计基础 第六章 CSS盒子模型_图文.ppt
掌握综合应用设置盒子属性制作页面的方法。第6章 CSS盒子模型 HTML5+CSS3网页设计基础 第3页 主要内容 6.1 盒模型简介 6.2 盒子外观属性 6.3 背景属性 6.4 ...
网页设计与制作案例教程(HTML5+CSS3) 第2章 HTML语言基....ppt
网页设计与制作案例教程(HTML5+CSS3) 第2章 HTML语言基础_计算机
网页设计与制作案例教程(HTML5+CSS3) 第11章 CSS浮动布....ppt
网页设计与制作案例教程(HTML5+CSS3) 第11章 CSS浮动布局_计算机
HTML5+CSS3网页设计与制作案例教程_图文.pdf
HTML5+CSS3网页设计与制作案例教程_互联网_IT/计算机_专业资料。We
网页设计与制作(HTML5+CSS3+JavaScript) 第10章:综合小....ppt
网页设计与制作(HTML5+CSS3+JavaScript) 第10章:综合小案例_计算机软件及应用_IT/计算机_专业资料。第10章 综合小案例 HTML、CSS、JavaScript三者共同构成了丰富...
网页设计与制作案例教程(HTML5+CSS3) 第10章 CSS标准流....ppt
网页设计与制作案例教程(HTML5+CSS3) 第10章 CSS标准流布局_计算
网页设计与制作案例教程(HTML5+CSS3) 第5章 使用CSS设....ppt
网页设计与制作案例教程(HTML5+CSS3) 第5章 使用CSS设置图像样式_
网页设计与制作(HTML5+CSS3+JavaScript) 第5章:CSS3基....ppt
网页设计与制作(HTML5+CSS3+JavaScript) 第5章:CSS3基
网页设计与制作教程(HTML5+CSS3+JavaScript+jQuery)_图文.ppt
第1章 HTML5基础知识 网页设计与制作教程( HTML5+CSS3+Java
网页设计与制作(HTML5+CSS3+JavaScript) 第1章:初识前....ppt
网页设计与制作(HTML5+CSS3+JavaScript) 第1章:初识前端开
HTML5+CSS3网页设计实例教程 第11章 页面布局与媒介查....ppt
HTML5+CSS3网页设计实例教程 第11章 页面布局与媒介查询 第3页 主要内容 11.1 11.2 11.3 11.4 11.5 11.6 盒子模型 使用CSS定位与布局 构建页面布局实例...
网页设计与制作(HTML5+CSS3+JavaScript) 第2章:HTML5基....ppt
网页设计与制作(HTML5+CSS3+JavaScript) 第2章:HTML5
《基于Web标准的网页设计与制作》第4章 CSS盒子模型_图文.ppt
《基于Web标准的网页设计与制作》第4章 CSS盒子模型...CSS盒子模型 CSS盒子模型 ?每个HTML元素都可以...3</a> <div>这是无名块<p>这是盒子中的盒子<...
《网页设计与制作(HTML+CSS)》教学大纲_图文.doc
网页设计与制作(HTML+CSS)》教学大纲_职业技术...(课程英文名称)课程编号:201409210011 学学分:5 学...? ? ? ? 盒子模型(6 学时) 盒子模型理论知识 ...
2018网页设计与制作教程(div+css布局技术)_图文.ppt
网页设计与制作教程 Div+CSS布局技术 1 Div布局理念 2 CSS盒模型 3 盒子的定位 4 盒子的浮动 5 CSS常用布局样式 6 实训什锦果园水果沙拉页面的布局 1 ...
HTML5+CSS3网页设计与制作实用教程单元5 网页布局与制....ppt
单元5 网页布局与制作商品筛选页面 HTML5+CSS3网页设计与制作实用教程 本章导读 The chapter’s introduction CSS 样式能更加方便有效地布局网页结构、控制网页元素...
HTML5+CSS3网页设计与制作实用教程单元8 网站整合与制....ppt
单元8 网站整合与制作购物网站首页 HTML5+CSS3网页设计与制作实用教程 本章导读 The chapter’s introduction 本单元以整合“购物网站”与制作购物网站首页为例全面...