css常见布局实现

最新推荐文章于 2023-04-15 21:01:35 发布

weixin_47207556

最新推荐文章于 2023-04-15 21:01:35 发布

阅读量111

点赞数

分类专栏：其他文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_47207556/article/details/120400582

版权

其他专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近面试呢总虐在css这块，然后总结了面试中常问的两栏、三栏布局的实现

一、两栏布局

左边固定宽度，右边自适应
1.设置浮动
在这里插入图片描述
设置浮动可以有三种实现
两个div，左边都一样。左边：左边设置宽度和float:left
右边可以1.什么也不做，2.overflow:hidden，3.margin-left:左边宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左边float，右边什么也不做</title>
    <style>
        div{
            height: 300px;
        }
        .left{
            width: 200px;
            background-color: #6ab3f8;
            float: left;
        }
        .right{
            background-color: pink;
            /*overflow: hidden;*/
            /*margin-left: 200px;*/
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

2.相对+绝对实现

三个div，父容器包裹左右子容器
父：相对定位
子左：position:absolute
子右：position:absolute; left:左宽; right:0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对+绝对</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            /*position: relative;*/
        }
        .left{
            position: absolute;
            width: 200px;
            background-color: #6ab3f8;
        }
        .right{
            position: absolute;
            left: 200px;
            right: 0;
            background-color:pink ;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

3.flex布局
三个div，父容器包裹子容器
父：display:flex;
子左：设置宽度
子右：flex:1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex实现</title>
    <style>
        .container{
            display: flex;
            height: 200px;
        }
        .left{
            width: 200px;
            background-color: #6ab3f8;
        }
        .right{
            flex: 1;
            background-color: pink;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

三栏布局

1.设置浮动
在这里插入图片描述

三个div。
左：float:left
右：float:right
中间：overflow:hidden; 或者中间：margin-left:左边宽度; margin-right:右边宽度或者什么都没有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏-float</title>
    <style>
        div{
            height: 300px;
        }
        .left{
            width: 200px;
            background-color: #6ab3f8;
            float: left;
        }
        .right{
            width: 200px;
            background-color: #FFB866;
            float: right;
        }
        .main{
            margin-left: 200px;
            margin-right: 200px;
            background-color: pink;
            /*overflow: hidden;*/
        }

    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>

</body>
</html>

但是这种方法有缺点：注意main在html中需要放在最后，会使得左右两边先加载，中间最后加载。这也是后面双飞翼布局出现的原因

2…双飞翼布局
需要四个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            float: left;
            width: 100vw;
        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
            background-color: pink;
        }
        .right{
            float: left;
            margin-left: -200px;
            width: 200px;
            background-color: #FFB866;
        }
        .left{
            float: left;
            margin-left: -100vw;
            width: 200px;
            background-color: #6ab3f8;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

3.绝对定位
四个div，父容器包裹三个子容器
左边position：absolute，left:0，top:0
右边position：absolute，right：0，top：0
中间margin-left：左边宽度，margin-right：右边宽度。注意margin设置为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏-绝对定位</title>
    <style>
        body{
            margin: 5px 0 0 0;
        }
        div{
            height: 200px;
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
        }
        .left{
            position: absolute;
            left: 0;
            top: 5px;
            width: 200px;
            background-color: #6ab3f8;
        }
        .center{
            margin-left: 200px;
            margin-right: 200px;
            background-color: pink;

        }
        .right{
            position: absolute;
            right: 0;
            top: 5px;
            width: 200px;
            background-color: #FFB866;

        }
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

4.flex布局
四个div，父容器包裹三个子容器
父：display：flex
子左：width：200px
子右：width：200px
子中间：flex：1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏flex</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            display: flex;
        }
        .left{
            background-color: #FFB866;
            width: 200px;
        }
        .center{
            background-color: pink;
            flex: 1;
        }
        .right{
            background-color: #6ab3f8;
            width: 200px;
        }
        
    </style>
</head>
<body>

    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
        
    </div>
</body>
</html>

5.table布局
四个div，父容器包裹子容器
父：display：table
三个子display：table-cell
左右定宽：width：200px
中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏table布局</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            display: table;
            width: 100vw;
        }
        .left,.center,.right{
            display: table-cell;
        }
        .left{
            width: 200px;
            background-color: #6ab3f8;
        }
        .right{
            width: 200px;
            background-color: #FFB866;
        }
        .center{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

圣杯布局
四个div，父容器包裹三个子容器
父margin-left：左边子宽度，mergin-right：右边子宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        div{
            height: 200px;
        }
        .container{
            margin-left: 200px;
            margin-right: 200px;
        }
        .center{
            float: left;
            width: 100%;
            background-color: pink;
        }
        .left{
            float: left;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
            background-color: #6ab3f8;
        }
        .right{
            float: left;
            margin-left: -200px;
            right: -200px;
            position: relative;
            width: 200px;
            background-color: #FFB866;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

总结：
两栏布局
1.浮动设置：float+overflow和float+margin-left
2.绝对定位 position:absolute和left
3.flex布局右边设置flex：1
三栏布局
1.浮动设置float+overflow：hidden和float+margin-left+margin-right（注意此时html中间区域最后加载）
2.绝对定位两边absolute，设置top和right，中间设置margin-left和mergin-right
3.双飞翼布局（为了解决浮动设置时中间内容后加载的缺点，双飞翼布局是先加载中间区块）
4.圣杯布局
5.flex布局中间设置flex：1
6.table布局，父display：table，子设置display：table-cell

weixin_47207556

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css常见布局实现

最近面试呢总虐在css这块，然后总结了面试中常问的两栏、三栏布局的实现一、两栏布局左边固定宽度，右边自适应1.设置浮动设置浮动可以有三种实现两个div，左边都一样。左边：左边设置宽度和float:left右边可以1.什么也不做，2.overflow:hidden，3.margin-left:左边宽度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt
复制链接

扫一扫