CSS盒子模型教程ppt课件

,第四讲：DIV+CSS布局-CSS盒子模型,1,2,3,网页上的各个元素（图片、段落、单元格。）均是以“盒子”的形式存在的。在浏览器看来网页就是许多盒子排列在一起或相互嵌套。,4,盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。,本节主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。,5,1.1“盒子”与“模型”的概念,画框示意图,6,图2盒子模型,7,1.2盒子属性值的简写形式（组合属性）,参考教材，掌握组合属性的写法：方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体如下。,8,（1）如果给出2个属性值，那么前者表示上下padding的属性，后者表示左右padding的属性。,比如：padding:10px20px;,（2）如果给出3个属性值，那么前者表示上padding的属性，中间的数值表示左右平padding的属性，后者表示下padding的属性。,（3）如果给出4个属性值，那么依次表示上、右、下、左padding的属性，即顺时针排序。,9,1.3在一行中同时设置边框的宽度、颜色和样式,要把border-width、border-border-color和border-style这3个属性合在一起，还可以用border属性来简写。,10,例如：border:2pxgreendashed这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写方便多了。,11,案例a,调整网页中的对齐方式，目标：1、理解盒子的各个属性2、理解空格的影响3、理解body标记的margin属性4、如何利用css控制页面特定的元素（注意id和class属性的区别）5、在dreamweaver中如何创建css,12,2盒子之间的关系,2.1HTML与DOM（文档对象模型）1HTMLHTML标记是嵌套的层次式结构，每个标记表示的元素可以视为“盒子”，即盒子是嵌套关系。2DOM树用树形结构表示各个元素（对象）的关系。,13,DOM树与页面布局的对应关系,14,2.2标准文档流,新的概念“标准文档流”（NormalDocumentStream），或简称“标准流”。,所谓标准流，就是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。,15,如果要了解浏览器对元素的处理规则，必须了解两类元素（标记）：1块级元素2行内元素不管是哪种元素，同样可以视为一个盒子，不同的是块级元素浏览器显示时在该元素的前后会自动换行，因此多个块级元素不会排在一行。而行内元素则默认显示在一行内，只有在最右端才自动换行。,16,常见的块级元素和行级元素,XHTML常见的块级元素有哪些呢？div通用块级元素form交互表单h1大标题h2副标题h33级标题h44级标题h55级标题h66级标题hr水平分隔线ol排序表单p段落table表格ul非排序列表,XHTML常见的行内元素有哪些呢？a锚点b粗体(不推荐)br换行font字体设定(不推荐)i斜体img图片input输入框select项目选择span通用行级元素strong粗体强调textarea多行文本输入框var定义变量,17,举例演示行级元素和块级元素的区别1、举例常见的标记2、分析案例c,18,2.3分析案例b的处理过程,19,3盒子在标准流中的定位原则,3.1行内元素之间的水平margin,20,行内元素之间的margin,21,3.2块级元素之间的竖直margin,块元素之间的margin,22,3.3嵌套盒子之间的margin,父子块的margin,23,IE与Firefox浏览器对待父元素高度的不同处理,24