css页面布局基础

容器块：

1、根元素（html）创建的容器块叫做“初始化容器块”；

2、对于被设置为静态或者相对定位的非根元素，容器块是它最近的父级元素、表格单元的内容区的边缘；

3、对于如果祖先元素是内嵌元素，容器块为内容区的边缘。

相对定位：

使用position：relative；声明

当设置了position：relative时，层的层叠级别高于默认的文本流级别；同等级别下将会按照文本流的顺序层叠显示。

绝对定位：

1、使用position：absolute；声明；

2、默认被设置为auto；

3、绝对定位的元素完全从文档流中脱离出来，所占据的空间不保留，不再影响其他元素。

指定裁剪区域

绝对定位的元素溢出时可以设置overflow属性为hidden、scroll或者auto

裁剪图片：

img{
position:absolute;
clip:rect(50px 200px auto auto
}

处理溢出：

1、overflow属性的取值有：visible是默认的，不裁剪内容，不添加滚动条，强制显示元素内容

2、hidden表示裁剪内容，并不显示超出对象尺寸的内容

3、scroll表示裁剪内容，同时提供滚动条

4、auto表示只有在必要时才裁剪内容并添加滚动条

设置元素的可见性：

display属性的取值包括：

1、none元素在页面上隐藏起来，元素也将退出当前的页面布局层，不占用任何的空间；

2、强制将XHTML中的内嵌元素变为块级元素；

3、inline：块级元素变为内嵌元素