CSS盒子模型教程课件

1、 第四讲：DIV+CSS布局-CSS盒子模型 第四讲： “盒子模型”的概念1设置边框设置内边距设置外边距 “盒子模型”的概念1设置边框设置内边距设置外边距 盒子之间的关系2盒子在标准流中的定位原则3盒子模型概念的案例4 盒子之间的关系2盒子在标准流中的定位原则3盒子模型概念的案 网页上的各个元素（图片、段落、单元格。）均是以“盒子”的形式存在的。在浏览器看来网页就是许多盒子排列在一起或相互嵌套。 网页上的各个元素（图片、段落、单元格。 盒子模型是CSS控制页面时一个很重要的概念。 只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍盒子模型的基本概念，

2、并讲解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的属性，中

3、间的数值表示左右平padding的属性，后者表示下padding的属性。（3）如果给出4个属性值，那么依次表示上、右、下、左padding的属性，即顺时针排序。 （1）如果给出2个属性值，那么前者表示上下pad1.3 在一行中同时设置边框的宽度、颜色和样式要把border-width、border-border-color和border-style这3个属性合在一起，还可以用border属性来简写。1.3 在一行中同时设置边框的宽度、颜色和样式要把b 例如：border: 2px green dashed这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写方便多了。 例如：

4、案例a调整网页中的对齐方式，目标：1、理解盒子的各个属性2、理解空格的影响3、理解body标记的margin属性4、如何利用css控制页面特定的元素 （注意id和class属性的区别）5、在dreamweaver中如何创建css案例a调整网页中的对齐方式，目标：2 盒子之间的关系2.1 HTML与DOM（文档对象模型）1HTML HTML标记是嵌套的层次式结构，每个标记表示的元素可以视为“盒子”，即盒子是嵌套关系。2DOM树 用树形结构表示各个元素（对象）的关系。2 盒子之间的关系2.1 HTML与DOM（文档对象 DOM树与页面布局的对应关系 DOM树与页面布局的对应关系2.2 标准文档流新

5、的概念“标准文档流”（Normal Document Stream），或简称“标准流”。所谓标准流，就是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。2.2 标准文档流新的概念“标准文档流”（Nor 如果要了解浏览器对元素的处理规则，必须了解两类元素（标记）： 1块级元素 2行内元素 不管是哪种元素，同样可以视为一个盒子，不同的是块级元素浏览器显示时在该元素的前后会自动换行，因此多个块级元素不会排在一行。 而行内元素则默认显示在一行内，只有在最右端才自动换行。 常见的块级元素和行级元素XHTML常见的块级元素有哪些呢？ div 通用块级元素 form 交互表单 h1 大

6、标题 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 举例演示行级元素和块级元素的区

7、别 2.3 分析案例b的处理过程2.3 分析案例b的处理过程3 盒子在标准流中的定位原则3.1 行内元素之间的水平margin3 盒子在标准流中的定位原则3.1 行内元素之间的 行内元素之间的margin 行内元素之间的margin 3.2 块级元素之间的竖直margin块元素之间的margin3.2 块级元素之间的竖直margin块元素之间的mar3.3 嵌套盒子之间的margin父子块的margin3.3 嵌套盒子之间的margin父子块的margin IE与Firefox浏览器对待父元素高度的不同处理 IE与Firefox浏览器对待父元素高度的不同处理3.4 margin可以设置为负值父