CSS 布局

CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。

CSS float 属性

float浮动属性，用于设置标签对象（如：div、span、a、em等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。

float的作用：通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。

设置模块向左浮动：

.box {float:left;}

float语法：float : none | left |right |inherit，分别是对象不浮动、浮在左边、浮在右边、从父元素继承。

CSS clear 属性

clear 属性规定元素的哪一侧不允许其他浮动元素。

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

图像的左侧和右侧均不允许出现浮动元素：

img{
  float:left;
  clear:both;
  }

clear语法：clear : none | left|right| both 。对应参数值为：允许两边都可以有浮动对象、不允许左边有浮动对象、不允许右边有浮动对象、不允许有浮动对象

我们常常用于使用了float css样式后产生浮动，最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动，大对象背景或边框不能正确显示，这个时候我们就需要clear:both清除浮动。

CSS overflow 属性

overflow 属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

设置overflow属性：

div{
  width:150px;
  height:150px;
  overflow:scroll;
  }

overflow语法：overflow : visible | auto | hidden | scroll

visible :不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto :此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条，DIV默认情况也是这个值，但需要设置时候设置即可
hidden :不显示超过对象尺寸的内容
scroll :总是显示滚动条

overflow可以单独设置X（overflow-x ）和Y（overflow-y）方向的滚动条样式其值与应用与overflow语法用法结构相同

div{
  width:150px;
  height:150px;
  overflow-x:hidden;
  }

CSS display 属性

display 属性规定元素应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

使段落生出行内框：

p.inline{
  display:inline;
  }

参数：
block : 　CSS1　块对象的默认值。用该值为对象之后添加新行
none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行
compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象
marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器
list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志
run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象
table : 　CSS2　将对象作为块元素级的表格显示
table-caption : 　CSS2　将对象作为表格标题显示
table-cell : 　CSS2　将对象作为表格单元格显示
table-column : 　CSS2　将对象作为表格列显示
table-column-group : 　CSS2　将对象作为表格列组显示
table-header-group : 　CSS2　将对象作为表格标题组显示
table-footer-group : 　CSS2　将对象作为表格脚注组显示
table-row : 　CSS2　将对象作为表格行显示
table-row-group : 　CSS2　将对象作为表格行组显示

CSS visibility 属性

visibility 属性规定元素是否可见。(即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。)

这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。

设置h2元素不可见：

p.inline{
  visibility:hidden;
  }

语法：
visibility : inherit | visible | collapse | hidden

参数：
inherit : 　继承上一个父对象的可见性
visible : 　对象可视
hidden : 　对象隐藏
collapse : 　主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。

实例

下面举一个div+css网页布局的简单实例

html代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页</title>
</head>
<body>
<div id="container">
<div id="header">此处显示 id "header" 的内容</div>
<div id="nav">此处显示 id "nav" 的内容</div>
<div id="maincontent clearfix">
<div id="main">此处显示 id "main" 的内容</div>
<div id="side">此处显示 id "side" 的内容</div>
</div>
<div id="footer">此处显示 id "footer" 的内容</div>
</div>
</body>
</html>

css代码如下：

.clearfix:after{ content:""; height:0; visibility:hidden; display:block; 
clear:both;}
.clearfix{ zoom:1;}
/*body*/
#container { width:900px; margin:0 auto;}

/*header*/
#header { height:70px; background:#CCFFCC; margin-bottom:8px;}
#nav { height:30px; background:#CCFFCC; margin-bottom:8px;}

/*main*/
#maincontent { margin-bottom:8px;}
#main { float:left; width:664px; height:500px; background:#FFFF99;}
#side { float:right; width:228px; height:500px; background:#FFCC99;}

/*footer*/
#footer { height:70px; background:#CCFFCC;}

页面效果如下

习题

习题1 | 习题2 | 习题3