CSS盒子模型教程.ppt

1、a,1,第四讲： DIV+CSS布局- CSS盒子模型,a,2,a,3,a,4,网页上的各个元素（图片、段落、单元格。）均是以“盒子”的形式存在的。在浏览器看来网页就是许多盒子排列在一起或相互嵌套。,a,5,盒子模型是CSS控制页面时一个很重要 的概念。 只有很好地掌握了盒子模型以及其中每 个元素的用法，才能真正地控制好页面中的 各个元素。,本节主要介绍盒子模型的基本概念，并 讲解CSS定位的基本方法。,a,6,1.1 “盒子”与“模型”的概念,画框示意图,a,7,图2 盒子模型,a,8,1.2 盒子属性值的简写形式（组合属性）,参考教材，掌握组合属性的写法： 方法是按照规定的顺序，给出2个、

2、3个 或者4个属性值，它们的含义将有所区别，具 体如下。,a,9,（1）如果给出2个属性值，那么前者表示上下padding的属性，后者表示左右padding的属性。,比如：padding: 10px 20px;,（2）如果给出3个属性值，那么前者表 示上padding的属性，中间的数值表示左右平padding的属性，后者表示下padding的属性。,（3）如果给出4个属性值，那么依次表 示上、右、下、左padding的属性，即顺时针排序。,a,10,1.3 在一行中同时设置边框的宽度、颜色和样式,要把border-width、border-border- color和border-style这

3、3个属性合在一起， 还可以用border属性来简写。,a,11,例如： border: 2px green dashed 这行样式表示将4条边框都设置为2像素 的绿色虚线，这样就比分为3条样式来写方便 多了。,a,12,案例a,调整网页中的对齐方式，目标： 1、理解盒子的各个属性 2、理解空格的影响 3、理解body标记的margin属性 4、如何利用css控制页面特定的元素 （注意id和class属性的区别） 5、在dreamweaver中如何创建css,a,13,2 盒子之间的关系,2.1 HTML与DOM（文档对象模型） 1HTML HTML标记是嵌套的层次式结构，每个标记表示的元素可以

4、视为“盒子”，即盒子是嵌套关系。 2DOM树 用树形结构表示各个元素（对象）的关系。,a,14,DOM树与页面布局的对应关系,a,15,2.2 标准文档流,新的概念“标准文档流”（Normal Document Stream），或简称“标准流”。,所谓标准流，就是指在不使用其他与排 列和定位相关的特殊CSS规则时，各种元素 的排列规则。,a,16,如果要了解浏览器对元素的处理规则，必须了解两类元素（标记）： 1块级元素 2行内元素 不管是哪种元素，同样可以视为一个盒子，不同的是块级元素浏览器显示时在该元素的前后会自动换行，因此多个块级元素不会排在一行。 而行内元素则默认显示在一行内，只有在最右

5、端才自动换行。,a,17,常见的块级元素和行级元素,XHTML常见的块级元素有哪些呢？ div 通用块级元素 form 交互表单 h1 大标题 h2 副标题 h3 3级标题 h4 4级标题 h5 5级标题 h6 6级标题 hr 水平分隔线 ol 排序表单 p 段落 table 表格 ul 非排序列表,XHTML常见的行内元素有哪些呢？ a 锚点 b 粗体(不推荐) br 换行 font 字体设定(不推荐) i 斜体 img 图片 input 输入框 select 项目选择 span 通用行级元素 strong 粗体强调 textarea 多行文本输入框 var 定义变量,a,18,举例演示行级元素和块级元素的区别 1、举例常见的标记 2、分析案例C,a,19,2.3 分析案例b的处理过程,a,20,3 盒子在标准流中的定位原则,3.1 行内元素之间的水平 margin,a,21,行内元素之间的margin,a,22,3.2 块级元素之间的竖直margin,块元素之间的margin,a,23,3.3 嵌套盒子之间的margin,父子块的margin,a,24,IE与Firefox浏览器对待父元素高度的不同处