经典布局（flex和传统两种实现）—上中下一栏式

最新推荐文章于 2023-09-24 19:54:13 发布

jiaojsun

最新推荐文章于 2023-09-24 19:54:13 发布

阅读量3k

点赞数

分类专栏：经典布局（flex和传统两种实现）

本文链接：https://blog.csdn.net/jiaojsun/article/details/92830943

版权

经典布局（flex和传统两种实现）专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.传统方式

简言之：就是按照每个块元素占一行的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
            font-size:20px;
            text-align: center;
        }
        .warp{
            width: 900px;
            margin:0 auto;
        }
        #header{
            height:100px;
            background: #6cf;
        }
        #main{
            height:500px;
            background: #ccffff;
        }
        #footer{
            height:80px;
            background: #99ccff;
        }
    </style>
</head>
<body>

<header id="header" class="warp">#header</header>
<section id="main" class="warp">#section</section>
<footer id="footer" class="warp">#footer</footer>

</body>
</html>

效果

2.flex 方式

关键代码

父级：display: flex; flex-direction: column;

子级：设置为flex:1(则高度由字体撑起来) ，设置为flex: 0 0 500px(则高度为500px，设置height无效)

知识点

flex: 1 =? 1 1 0%

flex: auto => 1 1 auto

flex: none => 0 0 auto;

flex-basis优先级自身设定 > 0%(flex:1按字体的高度) > auto(采用height)

<!DOCTYPE html>
<html lang="en">
  <!-- 此处参考阮一峰实例篇中圣杯布局
    （中间部分看做一体） -->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
            font-size:20px;
            text-align: center;
        }

        .warp{
            margin:0 auto;
        }

        .holy {
          display: flex;
          flex-direction: column;
        }
        #header{
            width: 900px;
            /* height无效 */
            height:400px;
            background: #6cf;
            flex: 1;
        }
        #main{
            width: 900px;
            background: #ccffff;
            flex: 0 0 500px
        }
        #footer{
            width: 900px;
            /* height无效 */
            height:180px;
            background: #99ccff;
            flex: 1;
        }

        /* .
          flex: 1 =? 1 1 0%
          flex: auto => 1 1 auto
          flex: none => 0 0 auto;

          flex-basis优先级 自身设定 > 0%(flex:1按字体的高度) > auto(采用height)
        */
    </style>
</head>
<body>
<div class="holy">
  <header id="header" class="warp">#header</header>
  <section id="main" class="warp">#section</section>
  <footer id="footer" class="warp">#footer</footer>
</div>

</body>
</html>

jiaojsun

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
经典布局（flex和传统两种实现）—上中下一栏式

1.传统方式简言之：就是按照每个块元素占一行的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ ...
复制链接

扫一扫