css-布局和定位

来源：互联网发布：mysql数据库修复工具编辑：程序博客网时间：2024/06/04 18:42

flow

首先，我们说一下flow，实际上就是从HTML在上面开始，从上到下沿着元素流逐个显示。
对于块元素，从上到下布局。对于块元素中的內联元素，从左上方流向右下方。

对于內联元素我们需要注意间距问题：
1. 对于并排放置的两个內联元素，中间外边距不会重叠。所以最终两个元素中间相差两个外边距之和。
2. 对于上下放置的两个內联元素，外边距会重叠。所以最终两个元素中间相差为最大外边距。
3. 对于內联元素，我们一般不会设置外边距。我们这里主要指img。
4. 对于嵌套元素，只要上下放置，就会重叠。

布局种类

1. float浮动布局

浮动布局：只允许将一个元素向左或向右浮动。

元素设置为浮动布局，我们必须为他设置宽度。
html流中的元素，会按照顺序流出，包括浮动元素。內联元素会避开浮动元素，围绕流出。
因为浮动元素按照顺序流出，所以其在html中顺序很重要。
浮动元素以外元素会按照浏览器大小进行扩展。

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

对于重叠问题，例如块元素中，部分被浮动元素遮挡，部分没有。对于修正，我们经常使用clear，这样可以使整个元素避开浮动元素。
例如：当元素流入页面时，这个元素右边不允许有浮动元素。

#footer {    clear: right;}

对于并排的修正，我们使用外边距，防止遮挡。或者说是栏间中缝。

#main {    margin: 0px 280px 0px 0px;}

2. 冻结设计

将body下所有元素放在一个div中，设置div的大小即固定了整个布局的大小。但是丢于浏览器如何调整大小，他都不会移动，比较死板。

<body>    <div id="all">        ...    </div></body>

#all {    width: 800px;}

3. 凝胶布局

凝胶布局会锁定页面中间内容区的宽度，不过会将其居中显示。

#all {    width: 800px;    margin-right: auto;    margin-left: auto;}

4. 绝对定位absolute

绝对定位可以在页面上进行精准定位。

指定元素position：absolute；根据top，bottom，left，right进行定位。
绝对定位的元素会在流中删除，所以不影响其他元素的布局。
流元素中其他元素不会围绕绝对元素，因为绝对元素和其他元素不在一个z层上。根据z-index指定在虚拟z轴上位置。

#sidebar {    position: absolute;    left: 20px;    top: 20px;}

对于绝对定位位于上层，遮挡其他元素问题，可以使用margin外边距进行避开。

5. 表格布局table

使用table进行表格的显示，相当于把元素分别放在一个表格的行和列中，对于排版会很方便。

首先，要为html增加结构，使其符合表格布局结构：

对于要放在table表格中的所有内容放在一个大的<div class="tableContainer">中。
对于要放在表格同一行中的所有内容放在一个<div class="tableRow">中，位于div#tableContainer中。
对于一行中的每一列我们分别放在<div class="col1">中，位于div#tableRow中。

接下来，设置css样式：

对于class=”tableContainer”，display设置为table。同时设置表格间距border-spacing，表格间距同时也会设置边界周围的空间并且不会与margin叠加。
对于class=”tableRow”，display设置为table-row。
对于每个列元素，display设置为table-cell。同时设置vertical-align（对齐格式）。

#tableContainer {    display: table;    border-spacing: 10px;}#tableRow {    display: table-row;}#col1 {    display: table-cell;    vertical-align: top;}

6. 固定布局fixed

固定布局总是在屏幕的一个位置，即使滚动页面也不改变。

固定元素会在流中删除，所以不影响其他元素布局。
固定元素通过设置position：fixed；和left，top，right，bottom设置位置。

#sidebar {    position: fixed;    left: 20px;    top: 20px;}

7. 相对布局relative

相对位置，是指相对于元素在流中原本的位置进行偏移。设置与绝对位置相似。

#sidebar {    position: relative;    left: 20px;    top: 20px;}

注意

position选项有：

absolute（绝对定位）
relative（相对定位）
fixed（固定定位）
static（静态定位）：正常流入界面，默认选项。

阅读全文

0 0