使用流
流实际上就是浏览器在页面上摆放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;/**列*/
...
}