美文网首页
CSS常见布局总结

CSS常见布局总结

作者: 一许青衫一 | 来源:发表于2019-02-26 22:35 被阅读0次

    前言

      前端重要的就是布局,平时各种各样花样繁多的网页,仔细琢磨,布局也都是那么几种,脱不了樊笼。所以,尝试从概括的角度,梳理一下CSS的常见布局。
      所谓布局,都是为了网页的美观与内容的展览服务的,同时要考虑到不同分辨率的屏幕的情况下,布局需要进行相应的自适应。综合这些,布局主要就分为两栏布局和三栏布局。

    两栏布局

      什么是两栏布局,顾名思义就是只有两列,左边或右边位置固定、宽度固定,另一边内容栏宽度自适应。用于侧边导航栏/广告栏+主体内容栏。


    两栏布局
    1. 浮动布局
      左侧栏固定宽度向左浮动,右侧主要内容栏则用margin-left留出左侧栏的宽度,默认宽度auto,自动填满剩下的宽度。
    // HTML
    <div id="aside">宽度固定</div>
    <div id="main">我是猫🐱</div>
    // CSS
    div {
        height: 500px;
    }
    #aside {
        float: left;
        width: 200px;
        background: yellow;
    }
    #main {
        margin-left: 200px;
        background: aqua;
    }
    
    1. 浮动布局+负外边距
    // HTML
     <div class="aside">宽度固定为200px</div>
     <div class="main">
        <div class="content">我是猫</div>
     </div>
    // CSS
    div{
      height:500px;
    }
    .aside {
      float: left;
      width: 200px;
      background: yellow;
      margin-right: -100%;
    }
    .main {
      float: left;
      width: 100%;
    }
    .content {
      background: aqua;
      margin-left: 200px;
    }
    
    1. 绝对定位
    // HTML
    <div id="aside">宽度固定</div>
    <div id="main">我是猫🐱</div>
    // CSS
    #aside {
        position:absolute;
        left:0;
        width:200px;
    }
    #main{
        margin-left:200px;
    }
    
    1. flex布局
    // HTML
    <div id="container">
        <div id = "aside"></div>
        <div id = "main"></div>
    </div>
    // CSS
    #container{
        display:flex;
    }
    #aside{
        flex:0 0 200px;
    }
    #main{
        flex: 1 1;
    }
    

    三栏布局

      所谓的三栏布局,即有三列,两边定宽,中间宽度自适应。对于圣杯布局和双飞翼布局,还要求优先渲染中间主体部分,这就需要将中间标签写在最前面。


    三栏布局
    1. 绝对定位
      左侧栏和右侧栏分别用绝对定位固定在左侧和右侧,中间栏则利用margin-left和margin-right空出左右栏位置来。
    2. 圣杯布局(双飞翼布局的前身)
    // HTML
      <div id="container">
          <div id="center">center</div>
          <div id="left">left</div>
          <div id="right">right</div>
      </div>
    // CSS
    div{
      height:500px;
    }
    #container {
      padding-left: 200px; // 外部父容器,给两侧栏留出空位
      padding-right: 300px;
    }
    #center {
      float: left;
      width: 100%;
      background: aqua;
    }
    #left {
      position: relative;  // 占据父容器留出的空位
      left: -200px;
      float: left;
      background: yellow;
      width: 200px;
      margin-left: -100%;
    }
    #right {
      position: relative;
      right: -300px;
      float: left;
      background: red;
      width: 300px;
      margin-left: -300px;
    }
    
    1. 双飞翼布局
        双飞翼布局与圣杯布局不同的主要是多一个标签,和处理中间栏内容被两侧栏遮挡的方法。
    // HTML
    <div id="main">
        <div id="content">content</div>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
    // CSS
    div{
      height:500px;
    }
    #main {
      float: left;
      width: 100%;
    }
    #content {
      margin-left: 200px;
      margin-right: 300px;
      background: aqua;
    }
    #left {
      float: left;
      width: 200px;
      background: yellow;
      margin-left: -100%;
    }
    #right {
      float: left;
      width: 300px;
      background: red;
      margin-left: -300px;
    }
    
    1. flex布局
    // HTML
    <div>
      <article></article>
      <nav></nav>
      <aside></aside>
    </div>
    // CSS
    div{
      display:-webkit-flex;
      display:flex;
      margin:0;
      padding:0;
      height:800px;
    }
    article{
      flex:1 1;
      order:2;  
      background-color:yellow;
    }
    
    nav{
      flex:0 0 200px;
      order:1;  
      background-color:blue;
    }
    aside{
      flex:0 0 200px;
      order:3;
      background-color:aqua;
    }
    

    参考文章

    CSS: 两栏布局,三栏布局

    相关文章

      网友评论

          本文标题:CSS常见布局总结

          本文链接:https://www.haomeiwen.com/subject/wsnzyqtx.html