您的位置:首页 > Web前端 > > 正文

css布局图解(浅谈CSS三栏布局的N种实现)

更多 时间:2022-01-23 02:58:07 类别:Web前端 浏览量:2289

css布局图解

浅谈CSS三栏布局的N种实现

三栏布局:页面分为左中右三部分。左右固定,中间部分自适应。

1. 绝对定位法

这里的绝对定位是指对左右部分进行绝对定位。

HTML结构。

  • <li class="left">Left</li>
    <li class="main">Main</li>
    <li class="right">Right</li>
    
  • 代码。

  • //简单的进行CSS reset
    body,html{
        height:100%;
        padding: 0px;
        margin:0px;
    }
    //左右绝对定位
    .left,.right{
        position: absolute;
        top:0px;
        background: red;
        height:100%;
    }
    .left{
        left:0;
        width:100px;
    }
    .right{
        right:0;
        width:200px;
    }
    //中间使用margin空出左右元素所占据的空间
    .main{
        margin:0px 200px 0px 100px;
        height:100%;
        background: blue;
    }
    // 上述的高度可以不必进行设置,用内容撑开元素高度即可。
    
    
    
  • css布局图解(浅谈CSS三栏布局的N种实现)

    height:100%

    css布局图解(浅谈CSS三栏布局的N种实现)

    高度由内容撑开

    这种方法有一个弊端,就是如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。

    css布局图解(浅谈CSS三栏布局的N种实现)

    中间栏内嵌一个宽度为200的span元素,发生重叠

    2. 圣杯布局

    3. 双飞翼布局

    浅谈css双飞翼布局和圣杯布局

    4. 自身浮动法

    左栏左浮动,右栏右浮动,中间栏放最后

    DOM结构

  • <body>
        <li class="left"></li>
        <li class="right"></li>
        <li class="main"></li>
    </body> 
    
  • 样式

  •     .left {
            background: red;
            float: left;
            width: 150px;
          }
          .right {
            background: red;
            float: right;
            width: 200px;
          }
          .main {
            background: pink;
            margin: 0 200px 0 150px;
          }
    
    
  • 效果

    css布局图解(浅谈CSS三栏布局的N种实现)

    这种方式需要注意三个li的顺序,左右两栏的顺序不分先后,但是中间一栏必须放在最后。

    优点是代码足够简洁与高效,缺点是中间主体存在克星,即clear:both属性。如果要使用此方法,需避免明显的clear样式,且主要内容无法最先加载,当页面内容较多时会影响用户体验。

    5. flex布局

    DOM结构

  • <li class="container">
          <li class="left">Left</li>
          <li class="main">Main</li>
          <li class="right">Right</li>
    </li>
    
    
  • 样式

  • .container {
              display: flex;
          }
          .main {
              flex-grow: 1;
              height: 300px;
              background-color: red;
          }
          .left {
              order: -1;
              flex: 0 1 200px;
              margin-right: 20px;
              height: 300px;
              background-color: blue;
          }
          .right {
              flex: 0 1 100px;
              margin-left: 20px;
              height: 300px;
              background-color: green;
          }
    
    
  • 效果

    css布局图解(浅谈CSS三栏布局的N种实现)

    6. table布局

    DOM结构

  • <li class="container">
        <li class="left"></li>
        <li class="main"></li>
        <li class="right"></li>
    </li>
    
  • 样式

  • .container {
      display: table;
      width: 100%;
    }
    .left, .main, .right {
      display: table-cell;
    }
    .left {
      width: 200px;
      height: 300px;
      background-color: red;
    }
    .main {
      background-color: blue;
    }
    .right {
      width: 100px;
      height: 300px;
      background-color: green;
    }
    
    
  • 缺点:无法设置栏间距

    End

    差不多总结了网上的几种主流方法,有的太小众的方法就没有整理。

    CSS3的flex教程还是得好好看一看。

    然后还有浮动啊定位啊负边距啊什么的,要深入研究的话估计也是很长的学习笔记。

    CSS真是一门玄学。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:三栏布局 css