CSS盒子模型教程PPT学习教案

1、会计学1CSS盒子模型教程盒子模型教程 “盒子模型盒子模型”的概念的概念1 1设置边框设置边框设置内边距设置内边距设置外边距设置外边距第1页/共27页盒子之间的关系盒子之间的关系2 2盒子在标准流中的定位原则盒子在标准流中的定位原则3 3盒子模型概念的案例盒子模型概念的案例4 4第2页/共27页第3页/共27页本节主要介绍盒子模型的基本概念，并本节主要介绍盒子模型的基本概念，并讲解讲解CSS定位的基本方法。定位的基本方法。第4页/共27页画框示意图画框示意图第5页/共27页图图2 盒子模型盒子模型第6页/共27页参考教材，掌握组合属性的写法：参考教材，掌握组合属性的写法： 方法是按照规定的顺序

2、，给出方法是按照规定的顺序，给出2个、个、3个个或者或者4个属性值，它们的含义将有所区别，具个属性值，它们的含义将有所区别，具体如下。体如下。第7页/共27页比如：padding: 10px 20px;（2）如果给出）如果给出3个属性值，那么前者个属性值，那么前者表表示上示上padding的属性，中间的数值表示左右平的属性，中间的数值表示左右平padding的属性，后者表示下的属性，后者表示下padding的属性。的属性。（3）如果给出）如果给出4个属性值，那么依次个属性值，那么依次表表示上、右、下、左示上、右、下、左padding的属性，即顺时的属性，即顺时针排序。针排序。第8页/共27页第

3、9页/共27页第10页/共27页调整网页中的对齐方式，目标：1、理解盒子的各个属性2、理解空格的影响3、理解body标记的margin属性4、如何利用css控制页面特定的元素 （注意id和class属性的区别）5、在dreamweaver中如何创建css第11页/共27页第12页/共27页DOM树与页面布局的对应关系树与页面布局的对应关系第13页/共27页所谓标准流，就是指在不使用其他与所谓标准流，就是指在不使用其他与排排列和定位相关的特殊列和定位相关的特殊CSS规则时，各种元素规则时，各种元素的排列规则。的排列规则。第14页/共27页第15页/共27页XHTML常见的块级元素有哪些呢？ di

4、v 通用块级元素 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 定义变量 第16页/共27页第17页/共27页第18页/共27页第19页/共27页 行内元素之间的行内元素之间的margin 第20页/共27页块元素之间的块元素之间的margin第21页/共27页父子块的父子块的margin第22页/共27页IE与与Firefox浏览器对待父元素高度的不同处理浏览器对待父元素高度的不同处理第23页/共27页父子块设置父子块设置margin为负数为负数第