常见布局

粘连布局

  • 又称作 stick footer布局
  • 如果页面不够长的话 footer粘在视窗的底部
  • 如果页面内容长度超出，footer就会被页面向下推送出去

粘连布局方法1

  • 给inner最小高度是 100%

  • 让footer给margin-top：-50px (自身高度)上去 （main元素和footer重叠）

  • 给main元素一个padding-bottom 50px 就算重叠 文字也显示不到padding中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘连布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .outer{
            height: 100%;
        }
        .inner{
            min-height: 100%;
        }
        .main{
            padding-bottom: 50px;
        }
        footer{
            height: 50px;
            background-color: #5ab3f4;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="main">
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>   
            </div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

粘连布局方法2

  • 给inner设置最小高度是100%
  • 给inner设置padding-bottom是50px
  • 给inner设置为 怪异盒子模型：box-sizing：border-box
  • 让footermargin-top为负 上来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘连布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .outer{
            height: 100%;
        }
        .inner{
            min-height: 100%;
            padding-bottom: 50px;
            /*设置为怪异盒子模型的方式：
            高度就包含了padding  总共加起来是百分百  并且main不会显示在inner的padding中*/
            box-sizing: border-box;
        }
        .main{

        }
        footer{
            height: 50px;
            background-color: #5ab3f4;

            margin-top: -50px;
        }
    </style>
</head>
<body>

    <div class="outer">
        <div class="inner">
            <div class="main">
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
            </div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

粘连布局方法3

  • 直接计算inner的最小高度是 100% - 50px
  • footer在main元素小的时候，刚好跟着inner 在最下边。否则就被inner撑下去
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘连布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .outer{
            height: 100%;
        }
        .inner{
            min-height: calc(100% - 50px);
            /*padding-bottom: 50px;*/
        }
        .main{

        }
        footer{
            height: 50px;
            background-color: #5ab3f4;

            /*margin-top: -50px;*/
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="main">
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
                main区域 <br>
            </div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

 

水平垂直居中

水平垂直居中方法1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01.水平垂直居中方法1</title>
    <style>
        .box{
            width: 700px;
            height: 500px;
            background-color: pink;
            margin: 40px auto;
            position: relative;
        }
        .con{
            width: 300px;
            height: 200px;
            background-color: #009ff2;
            position: absolute;
            /*left: 50%;*/
            /*在已知被居中元素的宽高的时候：
                在定位的时候，直接使用calc方法 计算left的百分之50 减去自身的宽度
                一次性定位结束*/
            left:calc(50% - 150px);
            top:calc(50% - 100px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
</html>

水平垂直居中方法2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01.水平垂直居中方法1</title>
    <style>
        .box{
            width: 700px;
            height: 500px;
            background-color: pink;
            margin: 40px auto;
            position: relative;
        }
        .con{
            width: 300px;
            height: 200px;
            background-color: #009ff2;
            position: absolute;
            /*left: 50%;*/
            /*在已知被居中元素的宽高的时候：
                在定位的时候，定位设置50%   里边元素的左上角在容器的正中心，需要将元素向左和上 移动自身的一半 达到居中
                使用margin负值 将元素移动（需要自己算出来一半是多少）
            */
            left:50%;
            top:50%;
            margin-left: -150px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
</html>

水平垂直居中方法3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中方法3</title>
    <style>
        .box{
            width: 700px;
            height: 500px;
            background-color: pink;
            margin: 40px auto;
            position: relative;
        }
        .con{
            width: 300px;
            height: 200px;
            background-color: #009ff2;
            position: absolute;
            /*left: 50%;*/
            /*在不知道被居中元素的宽高的时候：
                在定位的时候，定位设置50%   里边元素的左上角在容器的正中心，需要将元素向左和上 移动自身的一半 达到居中
               使用变形transform属性里的位移值 translate  translate的百分比是参考自身宽高的，所有不需要知道元素宽高即可
            */
            left:50%;
            top:50%;
            /*transform是变形的属性，里边包含一个位移的值， 百分比是相对自身宽度的*/
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
</html>

水平垂直居中方法4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中方法4</title>
    <style>
        .box{
            width: 700px;
            height: 500px;
            background-color: pink;
            margin: 40px auto;
            position: relative;
        }
        .con{
            width: 300px;
            height: 200px;
            background-color: #009ff2;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="con"></div>
    </div>
</body>
</html>

方法4其他应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法4应用</title>
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        .outer{
            width: 100%;
            height: 100%;
        }
        .outer>header{
            height: 100px;
            background-color: #009ff2;
            line-height: 100px;
            text-align: center;
            font-size: 40px;
            color: #fff;
            position: relative;
        }
        .outer>section{
            /*width: 100%;*/
            background-color: #0ee69c;

            /*当绝对定位元素没有设置宽高的时候，我们设置了left和right  或者同时设置了top和bottom*/
            /*那么元素就会自适应的把自身的宽高撑开，来达到相应的要求*/
            position: absolute;
            top: 100px;
            left: 0;
            bottom: 0;
            right: 0;

            /*因为4周不需要margin*/
            /*margin: auto;*/
        }
    </style>
</head>
<body>
<div class="outer">
    <header>
        header
    </header>
    <section></section>
</div>
</body>
</html>

三列布局

全浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-全浮动方法</title>
    <style>
        .outer{

        }
        .left{
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .center{
            width: calc(100% - 200px);
            height: 200px;
            background-color: #009ff2;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: pink;
            float: left;
        }
    </style>
</head>
<body>
<!--
    方法一：全浮动，使用calc设置宽度
        不推荐使用calc   兼容不好
        并且center不是优先加载
-->
    <div class="outer">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>
</html>

浮动方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-全浮动方法</title>
    <style>
        .outer{

        }
        .left{
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: pink;
            float: right;
        }
        .center{
            height: 200px;
            background-color: #009ff2;
            margin: 0 100px;
        }

    </style>
</head>
<body>
<!--
    方法二：left和right浮动，center不设置宽度

        center必须写在最后，center不是优先加载
-->
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>
</html>

定位方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-全浮动方法</title>
    <style>
        .outer{
            position: relative;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: pink;
            position: absolute;
            right: 0;
            top: 0;
        }
        .center{
            height: 200px;
            background-color: #009ff2;
            margin: 0 100px;
        }

    </style>
</head>
<body>
<!--
    方法三： center位置随便写，左右margin100px，不要设置宽度
        left和right分别定位在两边

        缺点：
            无法进行等高布局
-->
    <div class="outer">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>

    </div>
</body>
</html>

等高布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等高布局</title>
    <style>
        .outer{
            overflow: hidden;
        }
        .left{
            width: 100px;
            background-color: red;
            float: left;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .right{
            width: 100px;
            background-color: pink;
            float: right;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .center{
            background-color: #009ff2;
            margin: 0 100px;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

    </style>
</head>
<body>
    <!--
        等高布局：
            将元素padding-bottom设置很大一个值，
            然后给父级设置overflow：hidden
            给元素设置margin-bottom-很大的值，当小到一定程度，父级就是由其他元素撑开
    -->
    <div class="outer">
        <div class="left">
            left <br>
            left <br>
            left <br>
            left <br>
            left <br>
            left <br>
            left <br>
        </div>
        <div class="right">
            right <br>
        </div>
        <div class="center">
            center <br>
            center <br>
            center <br>
        </div>
    </div>
</body>
</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-圣杯方法</title>
    <style>
        .out{
            overflow: hidden;
        }
        .outer{
            width: auto;
            margin: 0 100px;
        }
        .center{
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: #009ff2;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: #0ee69c;
            float: left;

            margin-left: -100px;
            position: relative;
            right: -100px;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
    </style>
</head>
<body>
<!--
    保证center优先加载，所有center放在第一个

    内容足够小的时候，内容会换行
-->
<div class="out">
    <div class="outer">
        <div class="center">
        </div>
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>

</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06.三列布局-双飞翼方法</title>
    <style>
        .outer{
            overflow: hidden;
        }
        .main{
            float: left;
            width: 100%;
        }
        .center{
            margin: 0 100px;
            /*height: 100px;*/
            background-color: red;

            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .left{
            float: left;
            width: 100px;
            /*height: 100px;*/
            background-color: pink;
            margin-left: -100%;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        .right{
            float: left;
            width: 100px;
            /*height: 100px;*/
            background-color: #009ff2;
            margin-left: -100px;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
    </style>
</head>
<body>
<!--
    1.给center添加一个父级main（main全屏，center添加两边的margin），让main和left right进行排列
    2.给left margin-left -100%  直接到位  ，  right margin-left:-100px  也直接到位
-->

    <div class="outer">
        <div class="main">
            <div class="center">
                <br> center
                <br> center
                <br> center
                <br> center
                <br> center
                <br> center
            </div>
        </div>
        <div class="left">
            <br> center
            <br> center
        </div>
        <div class="right">
            <br> center
            <br> center
        </div>
    </div>


</body>
</html>
posted @ 2023-01-10 22:37  z_bky  阅读(25)  评论(0)    收藏  举报