CSS DIV页面布局(补充).ppt

* 1.div与span标记 1.1 概述 在使用CSS排版的页面中，div与span是两个常用的标记。利用这两个标记，加上CSS对其样式的控制，可以很方便地实现各种效果。 div（division）是一个区块容器标记，即div与/div之间相当于一个容器，可以容纳各种HTML元素。可以把div与/div之间的内容视为独立的对象，只要对div进行控制，其中的各标记元素都会因此而改变。 实例： 如果在上例中把div替换成span标记，效果完全一样。span标记的作用也是独立出各个区块。 1.2 div与span的区别 区别： div是一个块级（block-level）元素，它包围的元素会自动换行。 span是一个行内（inline ）元素，在它的前后不会换行。 此外，span标记可以包含于div标记中，成为它的子元素。反过来则不成立，即span标记不能包含div标记。 通常情况下，对于页面中大的区块使用div标记，而span标记仅仅用于需要单独设置样式风格的小元素，例如一个单词、一幅图片或一个超链接等。 2.盒子模型 2.1 概念 什么是“模型”——本质特征的抽象 布局的“模型” 2.1 概念 所有页面中的元素都可以看成一个盒子，占据着一定的页面空间。可以通过调节盒子的边框和距离等参数，来调节盒子的位置。 一个盒子模型由content（内容）、border（边框）、padding（内边距）、margin（外边距）这4个部分组成。 2.2 属性值的简写形式 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。 例如： border-color: red green; border-width:1px 2px 3px; border-style: dotted dashed solid double; 2.3 border border 一般用于分离元素，计算元素实际的宽和高时，要将border也考虑进去。 border的属性主要有3个：color、width、style 实例： 2.3 border 如果希望在某段文字结束后加上虚线用于分割，而不是用border将整段话框起来，可以通过单独设置border-bottom来完成。 实例： 2.4 padding padding用于控制content与border之间的距离，加入padding-bottom的语句，就可以实现如下效果。 实例： 在设置4个方向的padding时也可以简写。 2.5 margin margin是指元素与元素之间的距离。同样加入margin-bottom的语句，实现如下效果。 实例： 2.6 行内元素之间的水平margin 当两个行内元素紧邻的时候，他们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。 实例： span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; } span 2 span 1 margin-right margin-left 2.7 块级元素之间的竖直margin 两个产生换行效果的块级元素的竖直距离不再是margin-bottom与margin-top的和，而是两者中的较大者。 实例： body div style=margin-bottom:50px;块元素1/div div style=margin-top:30px;块元素2/div /body 块元素2 块元素1 块元素1 块元素2 margin-bottom:50px margin-top:30px 2.8 父子关系的margin 当一个div块包含在另一个div块中时，就形成了父子关系，它们的margin值对CSS排版也有重要的作用。其中子块的margin将以父块的content作为参考。 实例： 2.9 负值的margin 当margin设为负数时，会使得被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。 实例： 当块之间是父子关系时，子块的margin设置为负数会使得子块从父块中分离出来，这在CSS排版中有很广泛的应用。 3.元素的定位 3.1 float定位 这里不再用table的方法进行排版，网页中元素的定位都通过CSS来实现。 float定位是CSS排版中非常重要的手段，它的值