HTML17CSS布局.pptVIP

17. DIV + CSS布局基础 网页设计与制作实例教程 Static Top、left、bottom、right不起作用。 相当于不设置position属性。(默认情况) Static原点相对于父标签的原点。 举例 Absolute 绝对定位 CSS中 的写法是：position:absolute; ，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT进行定位，绝对相对与最近的已定位父元素（postion属性设置为absolute或者relative），如没有相对与body。 绝对定位脱离原来的文档流（位置被占用） 如果使用绝对定位进行页面布局，除第一个层外的各个层的top和left需要计算得出。例7-1（布局时不推荐使用） Relative：相对定位 首先要知道relative的意思是什么。我们知道，是相对的意思。相对谁呢？相对position为static时的位置，也就是不设置position属性时的位置。 相对仍在原来的文档流中占据位置 使用相对定位布局除第一个层外的各个层的top和left需要计算得出。（例7-3）（布局时不推荐使用） 三种定位机制总结 Css三种定位机制：普通流，浮动，和绝对定位，除非特别指定，否则均在普通流。 块级框默认从上倒下依次排列。 Static属性：默认位置，默认原点是父标签原点，定位属性无效（top，left） Position属性：relative；相对元素原来的初始位置。（相对仍在原来的文档流中占据位置） Position属性：absolute;绝对相对与最近的已定位祖先元素，如没有相对与body。（脱离原来的文档流） float CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对 象，默认分为两种：块元素(block?element)、内联元素(inline?element)，虽然也存在着可变元素，但只是随上下文关系确定该 元素是块元素或者内联元素。其实CSS的float属性，作用就是改变块元素(block?element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。 使用浮动（float)的时候经常会使用一个容器(层）把各个浮动的层组织在一起，使一个层中包含多个层，达到更好的布局效果。 浮动取值：左对齐，右对齐，无；浮动层左右移动，直到碰到包含框边缘或另一个浮动框边缘。如果浮动层宽度大于容器层剩余宽度，则另起一行。P224-225 浮动应用测试1： !-- #left { background-color: #FF0000; float: left; height: 300px; width: 300px; } #right { background-color: #0000FF; float: left; height: 550px; width: 300px; } #main { height: 800px; width: 800px; } -- /style div id=main div id=left/div div id=right/div /div 浮动应用测试2： style type=text/css !-- #left { background-color: #FF0000; float: left; height: 300px; width: 400px; } #right { background-color: #0000FF; float: left; height: 200px; width: 200px; } #main { height: 800px; width: 800px; } #middle { float: left; height: 200px; width: 300px; background-color: #FFFF00; } -- /style Clear（去除浮动，另起一行） 语法：clear : none | left | right | both 取值：none?? : 默认值。允许两边都可以有浮动对象 left?? : 不允许左边有浮动对象 right?? : 不允许右边有浮动对象 both?? : 不允许有浮动对象 基于浮动的网页布局 （1）、两列的浮动布局 （2）基于三列的浮动布局 总结：1、容器包含浮动列， 优点一：保证页面在任何浏览器宽度下显示效果相同 优点二：整个布局页面居中 2、多列布局容器内只装盒子，不装文字。 3、容器盒子居中:容器的M