css常见布局

最新推荐文章于 2024-09-06 15:37:30 发布

原创最新推荐文章于 2024-09-06 15:37:30 发布 · 5.2k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #css

HTML&CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了网页设计中的常见布局方法，包括两列布局与三列布局的不同实现方式，从基础的浮动和绝对定位到现代的Flex布局，并探讨了圣杯布局与双飞翼布局等高级技巧。

基础版

1.两列布局

两列布局是一侧固定，另一侧自适应。一般一个浮动，另一个设置margin，或者一个绝对定位，另一个设置margin，代码如下（浮动方法)

<style>
  .left{
     float: left;
     width: 200px;
     background: green;
     height: 200px;
  }
  .right{
      margin-left:200px;
      background: red;
      height: 200px;
  }
</style>
<body>
<div class="left">左边左边左边左边左边左边</div>

<div class="right">右边右边右边右边右边右边</div>
</body>

效果如下：
这里写图片描述

2.三列布局

三列布局特点是其中两列宽度固定，剩下一个自适应，方法是两个浮动自适应那个设置margin，比如左右固定，中间自适应可以左右分别设置float为left，right，然后中间那个设置margin left right分别为左右两栏宽度。代码如下

<style>
    .left{
        float: left;
        width: 200px;
        background: green;
        height: 200px;
    }
    .center{
        margin: 0 300px 0 200px;
        background: yellow;
        height: 200px;
    }
    .right{
        float: right;
        width:300px;
        background: red;
        height: 200px;
    }
    </style>
<body>
<div class="left">左边左边左边左边左边左边</div>

<div class="right">右边右边右边右边右边右边</div>

<div class="center">中间中间中间中间中间中间</div>
</body>

效果如下：
这里写图片描述
其他三列布局思路和这个差不多，注意文档顺序即可。或者将浮动换成绝对定位，这样不需要注意文档顺序。

进阶版

1.两列布局
还是那个效果，这次改用flex布局来写，代码如下：

<style>
    body{
        display: flex;
        justify-content: flex-end;
    }
    .left{
        flex: 1;
        background: green;
        height: 200px;
    }
    .right{
        width:300px;
        background: red;
        height: 200px;
    }
    </style>
<body>
<div class="left">自适应自适应自适应自适应</div>

<div class="right">固定固定固定固定固定固定</div>
</body>

效果如下：
这里写图片描述
对父元素设置flex布局主轴右对齐，有点类似文本的右对齐，这里为了让左边自动填充满屏幕，设置了一个flex
2.三列布局
不多说，代码如下：

<style>
    body{
        display: flex;
        justify-content: space-between;
    }
    .left{
        width:200px;
        background: green;
        height: 200px;
    }

    .right{
        width:100px;
        background: red;
        height: 200px;
    }
    .center{
         flex: 1;
         background: yellow;
         height: 200px;
     }
    </style>
<body>
<div class="left">固定固定固定固定固定固定</div>

<div class="center">自适应自适应自适应自适应</div>

<div class="right">固定固定固定固定固定固定</div>
</body>

效果如下：
这里写图片描述

存在于面试中的版本

1.圣杯布局
特点是有个头部底部，中间是主要内容区，主要内容区又分成左中右三块，其中中间是最主要内容区，思路是朝一个方向浮动，再用负margin把挤下去的两侧给拉上来再设置相对定位，为了避免中间里面内容被拉上来的挡住再对中间内容设置padding。代码如下：

<style>
   header{
       background: cadetblue;
   }
   footer{
       background: antiquewhite;
   }
   .center{
       width: 100%;
       background: coral;

   }
   .main{
        float: left;
        width: 100%;
        background: yellow;
        height: 200px;
    }
   .main p{
       padding: 0 100px 0 200px;
   }
    .left{
        float: left;
        margin-left: -100%;
        width:200px;
        position: relative;
        left: 0;
        background: green;
        height: 200px;
    }
    .right{
        float: left;
        margin-left: -100px;
        width:100px;
        position: relative;
        right: 100px;
        background: red;
        height: 200px;
    }
    </style>
<body>
<header>我是头部</header>

<div class="center">
    <div class="main"><p>我最重要</p></div>
    <div class="left">左边边</div>
    <div class="right">右边边</div>
</div>

<footer>我是底部</footer>
</body>

效果如下：
这里写图片描述

2.双飞翼布局
与圣杯布局类似，只是在中间内容区加了个父元素，这样可以省略对左右栏设置相对定位。代码如下：

<style>
    header{
        background: cadetblue;
    }
    footer{
        background: antiquewhite;
    }
    .center{
        width: 100%;
        background: coral;

    }
    .main-father{
        width: 100%;
        float: left;
        background: blueviolet;
    }
    .main{
        padding: 0 100px 0 200px;
        background: yellow;
        height: 200px;
    }
    .left{
        float: left;
        margin-left: -100%;
        width:200px;
        background: green;
        height: 200px;
    }
    .right{
        float: left;
        margin-left: -100px;
        width:100px;
        background: red;
        height: 200px;
    }
</style>
<body>
<header>我是头部</header>

<div class="center">
    <div class="main-father">
        <div class="main">我最重要</div>
    </div>
    <div class="left">左边边</div>
    <div class="right">右边边</div>
</div>

<footer>我是底部</footer>
</body>

效果如下：
这里写图片描述