CSS

CSS常用布局方式

前言

布局是CSS中一个很重要的部分,也是最不好处理的一部分,其他诸如字体大小、颜色等等都是很容易的。总结一下使用过的CSS常用布局,包括水平居中、垂直居中、单列布局、多列布局等,以及flex布局,希望能给前端同学一些帮助。

以下代码,均可复制到在线coding运行。

居中

这里就不做过多的说明了,前面有文章,详细讲过,没有看的小伙伴请点击:《这15种CSS居中的方式,你都用过哪几种?》

单列布局

主要有两种:
- header, content, footer宽度相同,有一个max-width
- header和footer占满浏览器100%宽度,content有一个max-width

第一种

<header style="background-color: red; width: 600px; margin: 0 auto;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

CSS常用布局方式

第二种

<header style="background-color: red;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow;">尾部</footer>

CSS常用布局方式

两列布局

float + margin

用float将边栏与主要内容拉到一行,然后设置主要内容的margin。

<main style="background-color: red;">
  <aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

CSS常用布局方式

position: absolute + margin

左边栏

<main style="background-color: red; position: relative;">
  <aside style="background-color: yellow; position: absolute; left: 0; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

CSS常用布局方式

右边栏

<main style="background-color: red; position: relative;">
<aside style="background-color: yellow; position: absolute; right: 0; width: 50px;">边栏</aside>
<section style="background-color: green; margin-right: 50px;">主要内容</section>
</main>

CSS常用布局方式

三列布局

比较经典有圣杯布局,以及据说是淘宝UED(玉伯)提出的双飞翼布局。

圣杯布局

<header style="background-color: red;">头部</header>
<main style="background-color: black; position: relative; padding: 0 100px 0 90px;">
  <section style="background-color: green; height: 100px; float: left; width: 100%;">主要内容</section>
  <aside style="background-color: yellow; height: 100px; float: left; width: 90px; margin-left: -100%; position: relative; left: -90px;">左边栏</aside>
  <aside style="background-color: yellow; height: 100px; float: left; width: 100px; margin-left: -100px; position: relative; right: -100px;">右边栏</aside>
</main>
<div style="background-color: blue; clear: left;">尾部</div>

CSS常用布局方式

双飞翼布局

<div class="header">header</div>
<div class="container">
    <div class="main">
        <div class="content">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
*{
    margin: 0;
    padding: 0;
    color: #fff
}
body{
    min-width: 700px;
}
.header,
.footer{
    border: 1px solid #333;
    background: #7986db;
    text-align: center;
}
.left,
.main,
.right{
    float: left;
    min-height: 130px;
}
.container{
    border: 2px solid yellow;
    overflow: hidden;
}
.left{
    margin-left: -100%;
    width: 200px;
    background: #f13f84;
}
.right{
    margin-left: -220px;
    width: 220px;
    background: #009988;
}
.main{
    width: 100%;
    background: #008cf4;
}
.content{
    margin: 0 220px 0 200px;
}
.footer{
    clear: both;
}

CSS常用布局方式

flex布局

flex布局目前已经很常用了,浏览器支持得也很好,前面也有文章讲过,请移驾 “flex布局”

以上代码,均可复制到在线coding运行。

(0)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

this is a cache: 0.00623