css-Page Layout(页面布局)

文章目录

定位

position属性用于定义盒子是绝对的,相对的,静态的还是固定的:

  • static 是默认值,并按照事物在HTML中的正常显示顺序呈现一个框。
  • relative很像static但框可以从原来的位置偏移与性能toprightbottomleft
  • absolute从HTML的常规流程中拉出一个框,然后将其交付给自己的世界。在这个疯狂的小世界,绝对盒可以在任何地方使用放置在页面上toprightbottomleft
  • 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: leftfloat: 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地址:44.200.27.215,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/css-page-layout-page-layout.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

留下评论

Loading...