css-Page Layout(页面布局）

定位

该position属性用于定义盒子是绝对的，相对的，静态的还是固定的：

• static 是默认值，并按照事物在HTML中的正常显示顺序呈现一个框。
• relative很像static但框可以从原来的位置偏移与性能top，right，bottom和left。
• absolute从HTML的常规流程中拉出一个框，然后将其交付给自己的世界。在这个疯狂的小世界，绝对盒可以在任何地方使用放置在页面上top，right，bottom和left。
• fixed行为类似于absolute，但是它将绝对将一个框相对于浏览器窗口（而不是网页）定位在浏览器窗口中，因此，即使滚动页面，固定框也应准确保留在屏幕上的位置。

使用绝对定位的布局

如果您具有类似以下HTML的内容，则可以使用绝对位置创建传统的两列布局：

<div id="navigation">
    <ul>
        <li><a href="this.html">This</a></li>
        <li><a href="that.html">That</a></li>
        <li><a href="theOther.html">The Other</a></li>
    </ul>
</div>

<div id="content">
    <h1>Ra ra banjo banjo</h1>
    <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
    <p>(Ra ra banjo banjo)</p>
</div>

我们一直在使用旧div元素并使用元素，以免引入太多新事物，但是Sectioning更加性感。

并且如果您应用以下CSS：

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#content {
    margin-left: 200px;
}

您将看到，这会将导航栏设置在左侧，并将宽度设置为200像素。因为导航是绝对定位的，所以它与页面其余部分的流程无关，因此所需要做的就是将内容区域的左边距设置为等于导航栏的宽度。

而且您不仅仅局限于这种两栏式方法。通过巧妙的定位，您可以根据需要排列任意数量的块。例如，如果要添加第三列，则可以在HTML中添加“ navigation2”块并将CSS更改为：

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#navigation2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}

#content {
    margin: 0 200px; /* setting top and bottom margin to 0 and right and left margin to 200px */
}

绝对定位的盒子的唯一缺点是，由于它们生活在自己的世界中，因此无法准确确定它们的终止位置。如果您使用上面的示例，并且所有页面的导航栏较小且内容区域较大，则可以，但是，特别是当使用相对值作为宽度和尺寸时，您常常不得不放弃放置任何东西的希望，这些框下方的页脚（如页脚）。如果您想做这样的事情，一种方法是浮动您的块，而不是绝对地放置它们。

漂浮的

浮动框会将其移至行的右侧或左侧，周围的内容会在其周围流动。

浮动通常用于在页面中较小的块之间移动，例如将导航链接推到容器的右侧，但是它也可以用于较大的块，例如导航列。

使用float，您可以float: left或float: right。

使用相同的HTML，您可以应用以下CSS：

#navigation {
    float: left;
    width: 200px;
}

#navigation2 {
    float: right;
    width: 200px;
}

#content {
    margin: 0 200px;
}

然后，如果您不希望下一个框环绕浮动对象，则可以应用该clear属性：

• clear: left 将清除左浮动框
• clear: right 将清除右浮动框
• clear: both 将清除左右浮动框。

因此，例如，如果您想在页面中添加页脚，则可以添加大量HTML…

<div id="footer">
    <p>Footer! Hoorah!</p>
</div>

…，然后添加以下CSS：

#footer {
    clear: both;
}

©️李联华的博客网 当前IP地址：3.22.81.151，归属地:俄亥俄州Dublin ，欢迎您的访问！