《CSS盒子模型(2h)讲解课件》由会员分享，可在线阅读，更多相关《CSS盒子模型(2h)讲解课件（63页珍藏版）》请在金锄头文库上搜索。
1、,第 2 章 CSS盒子模型,盒子模型是CSS控制页面时一个很重要的概念。 只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。 本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。,所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容大。 换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。,一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。 (1)理解一个孤立的盒子的内部结构； (2)理解多个盒子之间的相互关系。,下面首先讲解独立的盒子相关的
2、性质，然后介绍在普通情况下盒子的排列关系。,2.1 “盒子”与“模型”的概念探究,图2.1 画框示意图,图2.2 盒子模型,注意： 1.并不仅仅是用div定义的网页元素才是盒子，事实上所有的网页元素本质上都是以盒子的形式存在的； 2.在浏览器看来，网页上的所有元素是由许多盒子排列在一起或者相互嵌套； 3.一个盒子实际的宽度（或高度）由 content+padding+border+margin组成。 其中content所占矩形的大小由width和height的值来控制。,2.2 长 度 单 位,1.px：像素，由于它会根据显示设备的分辨率的多少而代表不同的长度，因此属于相对类型。比如，同样10
3、0px，在800*600的分辨率中和1024*768的分辨率中显示的大小不同。 2.em：设置以目前字符的高度为单位。比如h1margin:2em,就会以目前字符的两倍高度来显示，注意是以font-size的属性为参考依据，如果没有指定font-size属性，则以浏览器默认的字符高度作为参考。,2.3 边框border,图4.3 border,1对不同的边框设置不同的属性值,使用CSS时，可以分别对4条边框设置不同的属性值。 方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：,如果给出2个属性值，那么前者表示上下边框的属性，后者表示左右边框的属性。 如果给
4、出3个属性值，那么前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。 如果给出4个属性值，那么依次表示上、右、下、左边框的属性，即顺时针排序。 border-color:red green border-width:1px 2px 3px; border-style:dotted dashed solid double,2在一行中同时设置边框的宽度、颜色和样式,要把border-width、border-color和border-style这3个属性合在一起，还可以用border属性来简写。 例如： border: 2px green dashed,3对一条边框设置与其
5、他边框不同的属性,在CSS中，可以单独对某一条边框在一条CSS规则中设置属性，例如： border: 2px green dashed; border-left: 1px red solid,4同时制定一条边框的一种属性,有时，还需要对某一条边框的某一个属性进行设置，例如仅希望设置左边框的颜色为红色，可以写作： border-left-color:red,5. 设置边框样式border-style,border-style每个属性取值的含义： none: 无 hidden：隐藏 dashed：虚线 dotted：点线 double：双线 groove：凹槽 inset：内陷 outset：外凸
6、 ridge：突脊 solid：实线,5. 设置边框样式border-style,注意：当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。,2.4 设置内边距padding,1.内边距用于控制内容与边框之间的距离； 2.同边框类似，padding属性也可以设置1、2、3或4个属性值。,设置1个属性值时，表示上下左右4个padding均为该值。 设置2个属性值时，前者为上下padding的值，后者为左右padding的值。 设置3个属性值时，第1个为上padding的值，第2个为左右padding的值，第3个为下padding的值。 设置4个属性值时，按照顺时针方向，依次为
7、上、右、下、左padding的值。,如果需要专门设置某一个方向的padding，可以使用padding-left、padding-right、padding-top或者padding-bottom来设置。,例如有如下代码，实例文件为“02-04.html”。,2.5 设置外边距margin,1.外边距指的是元素与元素之间的距离。 2.打开文件02-03.html:,注意： 1.边框在默认情况下会定位在浏览器窗口的左上角，但是并没有紧贴着浏览器窗口的边框。 2.这是因为body本身也是一个盒子，在默认情况下，body会有一个若干像素的margin，具体数值因各个浏览器而不尽相同。 3.因此在bo
8、dy中的其他盒子就不会紧贴着浏览器窗口的边框了。,2.6 盒子之间的关系,2.6.1 HTML与DOM 2.6.2 标准文档流 2.6.3 标签与标签,2.6 盒子之间的关系,1.一个盒子内部的关系不难理解，实际上网页比较复杂，一个网页中可能存在大量的盒子，并且以各种关系相互影响着； 2.为了能够方便地组织各种盒子有序排列和布局，CSS规范的思路是，首先确定一种标准的排版模式，各种网页元素构成的盒子按照这种标准的方式排列布局，这种标准就是“标准流”方式。 3.但是仅仅通过标准流方式，很多版式无法实现，限制了布局的灵活性，因此CSS规范中又给出了另外若干种对盒子进行布局的手段，包括float和p
9、osition属性。,图2.15 DOM树与页面布局的对应关系,2.6.2 标准文档流,1.“标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素默认的排列规则。 2.以02-05.html为例，一共有4层结构，这4种元素又可以分为以下两类：,1块级元素（block level）,li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level），即它
10、们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。,2行内元素（inline）,对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。 比如标签，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。,2行内元素（inline）,注意： 1.行内元素在DOM树中和块级元素一样，是一个节点。从DOM的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点； 2. 但是从CSS的角度看，二者有很大的区别，块级元素拥有自己的区域，行内元素则没有（display:block或者
11、inline）； 3.标准流就是CSS规定的默认的块级元素和行内元素的排列方式；,小结：,2.7 盒子在标准流中的定位原则,如果要精确地控制盒子的位置，就必须对margin有更深入的了解； padding只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。 margin则用于调整不同的盒子之间的位置关系，因此必须对margin在不同情况下的性质有非常深入的了解。,2.7 盒子在标准流中的定位原则,2.7.1 行内元素之间的水平margin 2.7.2 块级元素之间的竖直margin 2.7.3 嵌套盒子之间的margin 2.7.4 margin属性可以设置为负值,2
12、.7.1 行内元素之间的水平margin,1.当两个行内元素相邻时，它们之间的距离为第一个元素的margin-right加上第2个元素的margin-left。,图2.18 行内元素之间的margin,2.7.1 行内元素之间的水平margin,实例文件为04-08.html。,2.7.2 块级元素之间的竖直margin,如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。 两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图2.20所示。,图2.20 块元素之间的margin,1.这个现象称为margin的“塌陷
13、”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。 2.这个特性在制作网页时要特别注意，否则常常会被增加了margin-top或者margin-bottom值时发现块“没有移动”的假象所迷惑。 2.示例文件02-09.html。,示例文件02-09.html。,2.7.3 嵌套盒子之间的margin,除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。,当一个块包含在另一个块中时，便形成了典型的父子关系。 其中子块的margin将以父块的内容为参考，如图2.22所示。,图2
14、.22 父子块的margin,1.在标准流中，一个块级元素的盒子水平方向的宽度会自动延伸，直到上一级盒子的限制位置。 2.实例文件02-10.html,说明： 1.外层的盒子的宽度会自动延伸，直到浏览器窗口的边界为止； 2.内层div宽度也会自动延伸，直到父div的边界为止。 3.子div距离父div上边框为40px；,4.上面所说的自动延伸是指宽度。对于高度，div都是以里面的内容的高度来确定的，也就是会自动收缩到能够包容下内容的最小高度； 5.宽度方向自动延伸，高度方向自动收缩，都是在没有设定width和height属性的情况下的表现； 6.width(height)=content 盒子
15、占用的宽度或者高度=content+padding+border+margin,2.7.4 margin属性可以设置为负值,上面提及margin的时候，它的值都是正数。 其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多，这里先分析margin设为负数时产生的排版效果。,当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。 实例文件为“02-12.html”。,Display用法示例：创建基于列表的导航菜单,示例文件：导航菜单.html。P140 注意：display:block语句使得超链接被设置成了块元素。当鼠标指针进入该块的任何部分时都会
16、被激活，而不是仅在文字上方时才被激活。,Display用法示例：创建基于列表的导航菜单,第一步：建立html基本结构，将菜单的各个项用项目列表表示。,Display用法示例：创建基于列表的导航菜单,第二步：设置CSS样式，首先把页面的背景色设置为浅色：,Display用法示例：创建基于列表的导航菜单,第三步：设置整个块的宽度为固定150px，并设置文字字体为Arial,大小为14px，文字右对齐。,Display用法示例：创建基于列表的导航菜单,第四步：取消的项目符号标记。 注意：display:block语句使得超链接被设置成了块元素。当鼠标指针进入该块的任何部分时都会被激活，而不是仅在文字上方时才被激活。,Display用法示例：创建基于列表的导航菜单,第五步：在标记下添加分割线，以分割开各个超链接。 修改标签，不显示下划线，并在左侧添加蓝色竖条，右侧增加阴影部分，内部字体增大间距；,Display用法示例：创建基于列表的导航菜单,第六步：设置超链接的LoVe & HAte(lin
