CSS盒子模型教程课件

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,11/7/2009,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,1,*,第四讲：,DIV+CSS,布局,-,CSS,盒子模型,第四讲：,“,盒子模型,”,的概念,1,设置边框,设置内边距,设置外边距,“盒子模型”的概念1设置边框设置内边距设置外边距,盒子之间的关系,2,盒子在标准流中的定位原则,3,盒子模型概念的案例,4,盒子之间的关系2盒子在标准流中的定位原则3盒子模型概念的案,网页上的各个元素（图片、段落、单元格。）均是以“盒子”的形式存在的。在浏览器看来网页就是许多盒子排列在一起或相互嵌套。,网页上的各个元素（图片、段落、单元格。,盒子模型是,CSS,控制页面时一个很重要,的概念。,只有很好地掌握了盒子模型以及其中每,个元素的用法，才能真正地控制好页面中的,各个元素。,本节主要介绍盒子模型的基本概念，并,讲解,CSS,定位的基本方法。,盒子模型是CSS控制页面时一个很重要本节主,1.1,“,盒子,”,与,“,模型,”,的概念,画框示意图,1.1“盒子”与“模型”的概念画框示意图,图,2,盒子模型,图2 盒子模型,1.2,盒子属性值的简写形式（组合属性）,参考教材，掌握组合属性的写法：,方法是按照规定的顺序，给出,2,个、,3,个,或者,4,个属性值，它们的含义将有所区别，具,体如下。,1.2 盒子属性值的简写形式（组合属性）参考教材,（,1,）如果给出,2,个属性值，那么前者表示上下,padding,的属性，后者表示左右,padding,的属性。,比如：,padding:10px 20px;,（,2,）如果给出,3,个属性值，那么前者表,示上,padding,的属性，中间的数值表示左右平,padding,的属性，后者表示下,padding,的属性。,（,3,）如果给出,4,个属性值，那么依次表,示上、右、下、左,padding,的属性，即顺时针排序。,（1）如果给出2个属性值，那么前者表示上下pad,1.3,在一行中同时设置边框的宽度、颜色和样式,要把,border-width,、,border-border-,color,和,border-style,这,3,个属性合在一起，,还可以用,border,属性来简写。,1.3 在一行中同时设置边框的宽度、颜色和样式要把b,例如：,border:2px green dashed,这行样式表示将,4,条边框都设置为,2,像素,的绿色虚线，这样就比分为,3,条样式来写方便,多了。,例如：,案例a,调整网页中的对齐方式，目标：,1,、理解盒子的各个属性,2,、理解空格的影响,3,、理解,body,标记的,margin,属性,4,、如何利用,css,控制页面特定的元素,（注意,id,和,class,属性的区别）,5,、在,dreamweaver,中如何创建,css,案例a调整网页中的对齐方式，目标：,2,盒子之间的关系,2.1 HTML,与,DOM,（文档对象模型）,1,HTML,HTML,标记是嵌套的层次式结构，每个标记表示的元素可以视为“盒子”，即盒子是嵌套关系。,2,DOM,树,用树形结构表示各个元素（对象）的关系。,2 盒子之间的关系2.1 HTML与DOM（文档对象,DOM,树与页面布局的对应关系,DOM树与页面布局的对应关系,2.2,标准文档流,新的概念,“,标准文档流”（,Normal Document Stream,），或简称“标准流”。,所谓标准流，就是指在不使用其他与排,列和定位相关的特殊,CSS,规则时，各种元素,的排列规则。,2.2 标准文档流新的概念“标准文档流”（Nor,如果要了解浏览器对元素的处理规则，必须了解两类元素（标记）：,1,块级元素,2,行内元素,不管是哪种元素，同样可以视为一个盒子，不同的是块级元素浏览器显示时在该元素的前后会自动换行，因此多个块级元素不会排在一行。,而行内元素则默认显示在一行内，只有在最右端才自动换行。,常见的块级元素和行级元素,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,定义变量,常见的块级元素和行级元素XHTML常见的块级元素有哪些呢？X,举例演示行级元素和块级元素的区别,1,、举例常见的标记,2,、分析案例,C,举例演示行级元素和块级元素的区别,2.3 分析案例b的处理过程,2.3 分析案例b的处理过程,3,盒子在标准流中的定位原则,3.1,行内元素之间的水平,margin,3 盒子在标准流中的定位原则3.1 行内元素之间的,行内元素之间的,margin,行内元素之间的margin,3.2,块级元素之间的竖直,margin,块元素之间的,margin,3.2 块级元素之间的竖直margin块元素之间的mar,3.3,嵌套盒子之间的,margin,父子块的,margin,3.3 嵌套盒子之间的margin父子块的margin,IE,与,Firefox,浏览器对待父元素高度的不同处理,IE与Firefox浏览器对待父元素高度的不同处理,3.4 margin,可以设置为负值,父子块设置,margin,为负数,3.4 margin可以设置为负值父子块设置margin,4,盒子模型概念的案例,计算图中各个字母代表的宽度（高度）是多少像素,4 盒子模型概念的案例计算图中各个字母代表的宽度（高度）,案例答案,案例答案,