前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS常用布局方式

CSS常用布局方式

作者头像
Javanx
发布2019-09-04 15:50:42
8380
发布2019-09-04 15:50:42
举报
文章被收录于专栏:web秀

前言

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

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

居中

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

单列布局

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

第一种
代码语言:javascript
复制
<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常用布局方式
CSS常用布局方式
第二种
代码语言:javascript
复制
<header style="background-color: red;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow;">尾部</footer>
CSS常用布局方式
CSS常用布局方式

两列布局

float + margin

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

代码语言:javascript
复制
<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常用布局方式
CSS常用布局方式

position: absolute + margin

左边栏

代码语言:javascript
复制
<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常用布局方式
CSS常用布局方式

右边栏

代码语言:javascript
复制
<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常用布局方式
CSS常用布局方式

三列布局

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

圣杯布局

代码语言:javascript
复制
<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常用布局方式
CSS常用布局方式

双飞翼布局

代码语言:javascript
复制
<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>
代码语言:javascript
复制
*{
    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常用布局方式
CSS常用布局方式

flex布局

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年11月6日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 居中
  • 单列布局
    • 第一种
      • 第二种
      • 两列布局
        • float + margin
          • position: absolute + margin
          • 三列布局
            • 圣杯布局
              • 双飞翼布局
              • flex布局
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档