CSS常用布局方式

Javanx

发布于 2019-09-04 15:50:42

8390

发布于 2019-09-04 15:50:42

文章被收录于专栏：web秀

前言

布局是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>

第二种

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

两列布局

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>

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>

右边栏

<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>

三列布局

比较经典有圣杯布局，以及据说是淘宝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>

双飞翼布局

<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;
}