html17-css布局

《html17-css布局》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、17.DIV+CSS布局基础网页设计与制作实例教程StaticTop、left、bottom、right不起作用。相当于不设置position属性。(默认情况)Static原点相对于父标签的原点。举例网页设计与制作实例教程Absolute绝对定位CSS中的写法是：position:absolute;，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT进行定位，绝对相对与最近的已定位父元素（postion属性设置为absolute或者relative），如没有相对与body。绝对定位脱离原来的文档流（位置被占用）如果使用绝对定位进行页面布局，除第一个

2、层外的各个层的top和left需要计算得出。例7-1（布局时不推荐使用）网页设计与制作实例教程Relative：相对定位首先要知道relative的意思是什么。我们知道，是相对的意思。相对谁呢？相对position为static时的位置，也就是不设置position属性时的位置。相对仍在原来的文档流中占据位置使用相对定位布局除第一个层外的各个层的top和left需要计算得出。（例7-3）（布局时不推荐使用）网页设计与制作实例教程三种定位机制总结Css三种定位机制：普通流，浮动，和绝对定位，除非特别指定，否则均在普通流。块级框默认从上倒下依次排列。Static属性：默认

3、位置，默认原点是父标签原点，定位属性无效（top，left）Position属性：relative；相对元素原来的初始位置。（相对仍在原来的文档流中占据位置）Position属性：absolute;绝对相对与最近的已定位祖先元素，如没有相对与body。（脱离原来的文档流）网页设计与制作实例教程floatCSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是

4、随上下文关系确定该元素是块元素或者内联元素。其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。使用浮动（float)的时候经常会使用一个容器(层）把各个浮动的层组织在一起，使一个层中包含多个层，达到更好的布局效果。浮动取值：左对齐，右对齐，无；浮动层左右移动，直到碰到包含框边缘或另一个浮动框边缘。如果浮动层宽度大于容器层剩余宽度，则另起一行。P224-225网页设计与制作实例教程浮动应用测试1：