CSS盒子模型教程.ppt

《CSS盒子模型教程.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

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

2、子模型1.2盒子属性值的简写形式（组合属性）参考教材，掌握组合属性的写法：方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体如下。（1）如果给出2个属性值，那么前者表示上下padding的属性，后者表示左右padding的属性。比如：padding:10px20px;（2）如果给出3个属性值，那么前者表示上padding的属性，中间的数值表示左右平padding的属性，后者表示下padding的属性。（3）如果给出4个属性值，那么依次表示上、右、下、左padding的属性，即顺

3、时针排序。1.3在一行中同时设置边框的宽度、颜色和样式要把border-width、border-border-color和border-style这3个属性合在一起，还可以用border属性来简写。例如：border:2pxgreendashed这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写方便多了。案例a调整网页中的对齐方式，目标：1、理解盒子的各个属性2、理解空格的影响3、理解body标记的margin属性4、如何利用css控制页面特定的元素（注意id和class属性的区别

4、）5、在dreamweaver中如何创建css2盒子之间的关系2.1HTML与DOM（文档对象模型）1．HTMLHTML标记是嵌套的层次式结构，每个标记表示的元素可以视为“盒子”，即盒子是嵌套关系。2．DOM树用树形结构表示各个元素（对象）的关系。DOM树与页面布局的对应关系2.2标准文档流新的概念——“标准文档流”（NormalDocumentStream），或简称“标准流”。所谓标准流，就是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。如果要了解浏览器对元素的处理规则，必须了解

5、两类元素（标记）：1．块级元素2．行内元素不管是哪种元素，同样可以视为一个盒子，不同的是块级元素浏览器显示时在该元素的前后会自动换行，因此多个块级元素不会排在一行。而行内元素则默认显示在一行内，只有在最右端才自动换行。常见的块级元素和行级元素XHTML常见的块级元素有哪些呢？◎div–通用块级元素◎form–交互表单　　◎h1–大标题　　◎h2–副标题　　◎h3–3级标题　　◎h4–4级标题　　◎h5–5级标题　　◎h6–6级标题　　◎hr–水平分隔线　　◎ol–排序表单　　◎p–段落

6、　　◎table–表格　　◎ul–非排序列表XHTML常见的行内元素有哪些呢？◎a–锚点　　◎b–粗体(不推荐)◎br–换行　　◎font–字体设定(不推荐)◎i–斜体　　◎img–图片　　◎input–输入框　　◎select–项目选择◎span–通用行级元素◎strong–粗体强调　　◎textarea–多行文本输入框　　◎var–定义变量举例演示行级元素和块级元素的区别1、举例常见的标记2、分析案例C2.3分析案例b的处理过程3盒子在标准流中的定位原则3.1行内元素之间的水平marg

7、in行内元素之间的margin3.2块级元素之间的竖直margin块元素之间的margin3.3嵌套盒子之间的margin父子块的marginIE与Firefox浏览器对待父元素高度的不同处理3.4margin可以设置为负值父子块设置margin为负数4盒子模型概念的案例计算图中各个字母代表的宽度（高度）是多少像素案例答案