week7---10月23日 DIV布局定位（一）

一、复习

1、div边框的设置属性

2、属性不同个数属性值的赋值方式

二、新课

（一）布局定位属性position

布局就是将元素放置在页面的指定位置，联合使用定位、浮动可创建按列布局、重叠、表格等多种布局效果。

    CSS有三种布局机制：

• 普通文档流布局(默认)
• 定位布局
• 浮动布局

    普通文档流就是由浏览器自动定位，默认从上到下依次排列html文档中的元素。

• <div>、<p>等盒状块级框元素在普通流中只能整体设置样式，如边框、边距等，不能改变它在页面中的位置。
•  单独的一行文本称为“行框”，只能设置行高度。
•  <span>、<strong>等行内元素称为“行内框”，只能设置在行中的水平内外边距，不能设置垂直的内外边距—设置无效。 

1、元素的定位样式

CSS可以对任何元素进行定位，可以按浏览器窗口或父元素的坐标定位，也可以相对自己原来的位置定位。 

样式属性

取值和描述

position:定位方式;

应配合left、right、top、bottom使用

static(默认)自动定位

relative 相对定位

absolute绝对定位

fixed      固定定位

left:      左侧偏移量或坐标;

必须配合position使用

right:   右侧偏移量或坐标;

必须配合position使用

top:      顶端偏移量或坐标;      

必须配合position使用

bottom:下端偏移量或坐标;

必须配合position使用

clip:裁剪形状;

       —仅用于绝对定位元素

auto不裁剪(默认)

rect(top, right, bottom, left) 指定矩形

1）自动定位 static

    自动定位(默认方式)：position:static;

    自动定位就是元素在页面普通文档流中由html自动定位，普通文档流中的元素也称为流动元素。

    自动定位的块级元素若不设置大小，则宽度默认为浏览器页面宽度、高度自适应所包含内容的高度。

    自动定位时top、bottom、left、right设置无效。

2）绝对定位 absolute

绝对定位：position:absolute;

        绝对定位是将元素依据已经定位(绝对、固定或相对定位)的父元素进行定位，父元素没有定位或没有父元素则默认依据body浏览器窗口定位。

        绝对定位的元素不论本身是什么类型，定位后都将成为一个新的块级盒框，如果未指定宽度高度默认自适应实际包含的内容区域(不再默认浏览器宽度)。定位后将重叠覆盖新位置的原有元素，它原来在正常文档流中所占的空间同时被关闭，就是说绝对定位的元素不占据页面空间，原空间被后继元素使用。

        绝对定位必须用left、right、top、bottom属性之一激活，用于指定元素左、右、上、下外边距距离已定位父元素(或浏览器)左、右、上、下内边框的距离，或者说用已定位父元素对应边框向中心的偏移量作为定位元素对应边的位置。

       如果定义多个属性，当left、right冲突时以left为准，当top、bottom冲突时以top为准，如果一个也不指定则元素仍按普通文档流布局，但它自己不再占据空间，后续元素上移与其重叠。

绝    对定位元素定位后相对父元素的位置不再变化，若页面内容较多拖动页面滚动时，定位元素会随页面一起滚动。

        绝对定位元素重叠覆盖其他元素时可用z-index属性设置它们的叠放次序。

        注意：若直接父元素不定位时，子元素将依据再上级已定位的某个父元素（或浏览器）绝对定位，页面调整时定位子元素相对直接父元素的位置将会发生变化。因此如果直接父元素不需要定位，而子元素必须根据直接父元素绝对定位时，可将父元素设置为相对定位但不设偏移量（不失去空间也不影响位置）即可保证子元素依据直接父元素准确定位。 

3）绝对定位元素的裁剪clip

clip:裁剪形状;

        clip属性仅对绝对定位的元素设置被裁剪时的形状，裁剪掉不需要的部分或指定显示区域，当元素(如图像)实际尺寸大于clip指定区域时只显示clip区域的内容，等同于指定区域并设置overflow:hidden的效果。

        裁剪形状属性值：

        auto    不裁剪(默认)由浏览器设置元素的形状  

        rect(top, right, bottom, left)指定矩形区域为裁剪后保留区域

        inherit  指定从父元素继承clip属性—直到IE8目前都不支持

        clip属性目前只能指定按矩形区域裁剪，top, right, bottom, left分别为显示区域按顺时针对应四边距离被裁剪元素左上角(0,0)的距离，或者理解为元素显示的矩形区域左上角(left, top)及右下角(right, bottom)坐标。

        top, right, bottom, left可以是任意带单位的数值、也可以是被裁剪元素对应边长的百分比%，取值0或auto表示该边不裁剪。如果指定的剪裁区域大于元素实际区域则不裁剪。

4）固定定位fixed

固定定位：position:fixed;

    固定定位与绝对定位absolute相似，定位后元素也生成为新块级盒框、覆盖新位置原有元素，在正常文档流中所占的原空间关闭—被后继元素使用。

    固定定位与绝对定位absolute的区别是定位的元素无论父元素是否定位都会直接在浏览器窗口中定位—不会随滚动条拖动页面而滚动，固定定位用left、right、top、bottom指定浏览器左、右、上、下各边向中心的偏移量作为定位元素外边距位置

    例如在浏览器四个角各放置一个width:40px; height:40px;的矩形盒框：

position:fixed;top:50px; left:50px;           左上角定位

position:fixed;top:50px; right:50px;        右上角定位

position:fixed;bottom:50px; right:50px; 右下角定位

position:fixed;bottom:50px; left:50px;     左下角定位

注意：IE6及以下版本不支持position:fixed固定定位。

5）相对定位relative

相对定位：position:relative;

    相对定位是让元素(可以是行内元素)相对于它在正常文档流原位置按left、right、top和bottom偏移量移动到新位置。

    相对定位的元素移动后保持原外观样式大小、移动定位后不会占据新空间会覆盖新位置原有元素，原位置空间被保留，其他元素相对它原来的位置不变。

    left、right、top和bottom指定相对原位置移动的偏移量，可以使用带单位数值、相对父元素的百分比%

    left       正值：左边向内—向右移动，负值：左边向外—向左

    right    正值：右边向内—向左移动，负值：右边向外—向右

    top       正值：上边向内—向下移动，负值：上边向外—向上

    bottom正值：下边向内—向上移动，负值：下边向外—向下   

    例如：left:20px;  元素左边框右移20像素

                left:-20px; 元素左边框左移20像素。

    例如：position:relative; left:350px; bottom:150px;

    相对原始位置左边右移350、下边上移150像素—原空间保留。