盒子模型课件.ppt

《盒子模型课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS网页设计标准教程第1部分CSS核心原理第4章CSS盒子模型“盒子”与“模型”的概念探究4.1长度单位4.2边框4.3设置内边距4.4设置外边距4.5盒子之间的关系4.6盒子在标准流中的定位原则4.7上一章介绍了CSS设计的代码编写和编辑方式，从本章开始将深入讲解CSS的核心原理。盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内

2、容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。本章首先讲解独立的盒子相关的性质，然后介绍在普通情况下盒子的排列关系。下一章将更深入地讲解浮动和定位的相关内容。4.1“盒子”与“模型”的概念探究图4.1画框示意图图4.2盒子模型4.2长度单位1．相对类型2．绝对类型4.3边框图4.3border4.3.2属性值的简写形式CSS中可以用简单的方式确定边框的属性值。1．对不同的边框设置不同的

3、属性值使用CSS时，可以分别对4条边框设置不同的属性值。方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：如果给出2个属性值，那么前者表示上下边框的属性，后者表示左右边框的属性。如果给出3个属性值，那么前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。如果给出4个属性值，那么依次表示上、右、下、左边框的属性，即顺时针排序。2．在一行中同时设置边框的宽度、颜色和样式要把border-width、border-border-color和border-style这3个属性合在一起，还可以用border属性来

4、简写。例如：border:2pxgreendashed这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写更方便。3．对一条边框设置与其他边框不同的属性在CSS中，可以单独对某一条边框在一条CSS规则中设置属性，例如：border:2pxgreendashed;border-left:1pxredsolid4．同时制定一条边框的一种属性有时，还需要对某一条边框的某一个属性进行设置，例如仅希望设置左边框的颜色为红色，可以写作：border-left-color:red5．实例在上面讲解的基础上，给出下述实例，实例文件为“04-02.html”。

5、ml>#outerBox{width:200px;height:100px;border:2pxblacksolid;border-left:4pxgreendashed;border-color:redgrayorangeblue;/*上右下左*/border-right-color:purple;}