从零开始的毕设--CSS（5）

使用流

流实际上就是浏览器在页面上摆放HTML元素所用的方法。
浏览器从HTML文件最上面开始，从上倒下沿着元素流逐个显示所遇到的各个元素。
我们知道 块元素从上向下流，那么内联元素呢？
内联元素 在水平方向会相互挨着，总体上会从左上方流向右下方。

关于流和盒模型还需要知道

当浏览器并排放置两个内联元素时，外边距相加。
当浏览器上下放置两个块元素时，外边距重叠（取最大值）。
当元素嵌套时，外边距也会重叠。

如何浮动元素

float属性：
可以理解为一块可以移动的石头。所有水流/流会绕开这个石头。
可以如下设置：

#sidebar{
	width:280px;
	float:right;
}

这样可能会有部分元素出现重叠问题。

我们希望页脚在一行显示：

#footer{
	...
	clear:right;
	/**表明右边不允许有浮动的内容*/
}

这个右浮动的缺点就是：
当使用智能手机等较小屏幕的设备时，他的浮动div总是在主内容只上。
所以下面我们想出另一种方法：
对主内容进行左浮动即可。

流体与冻结设计

到目前位置，我们所采用的所有设计都称为流体布局。无论我们将浏览器调整到多大的宽度，布局都会扩展。这个布局很有用，因为它们会填充可用空间。
不过有时候锁定布局更重要，当用户调整大小时，你的设计仍然能保持原样。
对此，我们需要有如下设置：

凝胶布局

介于冻结和流体之间的布局。

使用绝对布局

当一个元素使用绝对布局时，浏览器会将它从流中删除，然后浏览器将这个元素放置在top和right属性指定的位置上（也可以是bottom left指定）。

使用固定布局

一般我们看到的网页上的广告，就是固定布局。

CSS表格显示

就是布局在行列上表格呈现。如图。

div#tableContainer{
	display:table;
}
div#tableRow{
	display:table-row;/**行*/
}
#main{
	display:table-cell;/**列*/
	...
}