web标准页面布局应用(七)课件

1、web标准页面布局应用 第七课主讲：刘静邮箱：目标浮动布局定位布局常见的DIV+CSS布局方式css布局方式css布局有三种方式：1、默认文档流方式以默认的html元素的结构顺序显示2、浮动布局方式通过设置html元素的float属性显示3、定位布局方式通过设置html元素的position属性显示浮动float什么是浮动？浮动（float）是CSS实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。值：none:不浮动left:对象向左浮动，而后面的内容流向对象的右侧right:对象向右浮动，而后面的内容流向对象的左侧清除浮动当元素有浮动属性时，会对其父元素或后面的元素产

2、生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决，浮动元素的影响浮动的清理(clear)：值：none :默认值。允许两边都可以有浮动对象left :不允许左边有浮动对象right :不允许右边有浮动对象both :左右两侧不允许有浮动对象清除浮动的方法2、父元素使用overflow的方法 ：通过设置父元素overflow值设置为hidden，是最简单的清除浮动方法，但如果子元素使用了定位布局，就会很难实现*margin:0;padding:0;#main,#footermargin:0 auto;#mainwidth:800px;background:#ccc;overflow:

3、hidden;zoom:1;position:relative;#leftwidth:200px;height:200px; background:blue;position:absolute;left:-100px;top:100px;#rightwidth:300px;height:300px;background:green;float:right;#footerwidth:800px;height:50px;background:red;深入布局技巧CSS 中溢出的使用功能 语法设置当对象的内容超过其指定高度及宽度时如何管理内容overflow: visible默认值。不剪切内容也不添

4、加滚动条 , auto在必需时对象内容才会被裁切或显示滚动条, hidden不显示超过对象尺寸的内容,scroll总是显示滚动条定位：position属性：position 描述：设置对象的定位方式 值： static 静态定位：页面中的每一个对象的默认值。absolute 绝对定位：将对象从文档流中分离出来，通过设置left,right,top,bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。relative 相对定位：对象不从文档流中分离，通过设置left,right,top,bottom四个方向相对于自身位置进行相对定位。清除浮动的方法3、利用伪对象after方法 ：定义一个类，使用伪对象after，控制浮动元素的影响。网上最流行的清除浮动代码： .clearFix:after clear:both; display:block; visibility:hidde