网页布局全攻略！悬浮、固定、排版、弹性，一篇get

亲们，哈喽！给大家科普个好玩儿的事儿，感兴趣就跟我往下瞅！

你们有没有试过这种情况呀？就是希望网页两边固定宽，然后给中间放个东西能随着屏幕大小自动调节。搞定这个小麻烦可不容易

    
left
    
right
    
center
   
//此处注意要先渲染左、右浮动的元素才到中间的元素。元素浮动后剩余兄弟块级元素会占满父元素的宽度

   .box{
        height:200px;
    }    
    .left{
        float:left;
        width:300px;
    }
    .right{
        float:right;
        width:300px;
    }

马上来看第一招，超级简单直白的——悬浮布局。简单来说，就是让元素浮起来而已。别担心HTML结构搞不定，记得用悬浮就对！不过要提醒下，这种方式在大部分浏览器里效果挺好哒。

    
left
    
right
     
center
 
//和浮动布局同理，先渲染左右元素，使其定位在父元素的左右两端，剩余的中间元素占满父元素剩余宽度。

    .box{
        position: relative;
      }
      .left{
        position: absolute;
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
        position: absolute;
        right: 0;
      }
      .center{
        margin: 0 100px;
        background: red;
      }

接下来，说说第二招儿吧—稳住位置的诀窍！就这么办—给要定住的元素上设置个 fixed 属性就得了！HTML什么的不用管那么多，这样设置就成！这法子可是稳妥稳当，适合各类平台！

咱瞅瞅后面，第三招儿是表格排版。（意思就是说）把爸爸型的东西设为table类型，孩子型的设置为table-cell型，这样它们就可以美美哒摆在一起。另外这个办法还特别棒的一点在于，其实用性很高呢

  

    left
  
  

    center
  
  

    right
  


    .box{
        display: table;
        width: 100%;
      }
      .left{
        display: table-cell;
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
        display: table-cell;
      }
      .center{
        width: 100%;
        background: red;
      }

让我们来聊聊第四个技巧 – 弹性布局！这个方法超级简单，只要把父元素设为display: flex就能让所有孩子们乖乖挨在一起。悄悄告诉你个秘诀，如果给子元素设定flex: n（n是个数字），那么它的宽度会自动变成父元素的宽度除以n~不过记得提醒下大家，这招IE浏览器可能用不了！

聊到这，咱们得说说网格布局这个事儿了！其实，就是给父级元素给上一个display: grid属性，再用grid-template-columns来控制子元素宽度。比如，你可以把第一个子元素搞成100px宽，第二个随他去，第三个也设置为100px就行了。用起来说白了就是这么简单，在父级上加点style就能搞定底儿掉！不过要记得目前这种方式还没有全部浏览器都支持呢～

好，我给的几个方法就这么多，希望有用！不论选择哪种，记得看下是否跟你常用的浏览器兼容！毕竟现在已经是2024年了，可能有的浏览器还不支持这个新的排版。所以，选个适合工程的方案才重要！

  

    left
  
  

    center
  
  

    right
  


    .box{
        display: flex;
        width: 100%;
      }
      .left{
      
        width: 100px;
        left: 0;
      }
      .right{
        width:100px;
      }
      .center{
        flex:1;
      }

好，本期节目就到这儿！觉得有用别忘了点赞分享给你的小伙伴也挺好！有啥想说的就在评论区聊！下次再见咯！