week8---10月28日 div 布局

一、复习

1、浮动的设置

2、浮动清除

3、外边距为负数

 

二、新课

（一）页面布局应用

利用CSS可实现任意布局方式，创建各种布局类型，这里介绍几种常用的单行布局类型，这些布局的重复使用可实现任意的按列布局。

1、单行单列布局

单行单列布局可以用带单位的数字值设置为固定宽度布局，页面内容宽度不随浏览器窗口大小变化，若浏览器窗口宽度小于页面内容时自动增加滚动条。也可以用占父元素(浏览器窗口)宽度的百分比%设置为自适应宽度布局，页面内容宽度随浏览器窗口宽度变化而自动改变，但浏览器窗口宽度较小时页面内容也会被压缩的很窄。

    单行单列布局页面内容一般在浏览器居中显示：

    margin:0 auto;

    单行单列布局可以指定页面内容的固定高度，也可以不指定以页面内容自适应高度。

2、单行两列

单行两列布局一般将两个单行单列<div>元素放在一个<div>元素内，使用定位或浮动实现两列布局，即可以是固定宽度也可以是自适应宽度。

    使用定位布局时一般子元素绝对定位(不占空间)、父元素相对定位(不失去空间)但不设偏移量以保证子元素依据父元素定位。

    如果两个子元素都使用绝对定位(一般左侧用top:0; left:0;右侧用top:0; right:0;)，则必须对父元素(空元素)设置高度以防止后续元素上移。

    如果只对右侧第二个子元素绝对定位，父元素可不设置高度自适应左侧不定位子元素的高度(但不能小于右侧定位元素的高度，否则定位元素超出部分与后续元素重叠)。

    使用浮动布局时两列子元素应同时浮动，父元素(空元素)可以同时浮动自适应子元素高度但必须考虑后续元素，也可以不浮动但必须设置高度防止后续元素上移。如果考虑兼容IE6及以下浏览器最好不浮动也不设高度，而在最后增加一个空子元素并设置为禁止浮动，这样即可以自适应浮动子元素的高度又不影响后续元素。

3、单行三列布局

单行三列通常左右较窄样式大致相同，可以绝对定位布局，也可以浮动布局，可以固定宽度，也可以自适应宽度布局。

4、多行多列综合布局