CSS布局（等宽、圣杯、双飞翼、底部固定）

最新推荐文章于 2023-10-04 18:16:52 发布

Sandy_Star

最新推荐文章于 2023-10-04 18:16:52 发布

阅读量342

点赞数 2

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_48931875/article/details/121587578

版权

1. 全背景等宽内容居中布局

即将元素左右padding设置为父元素宽度的50%减去等宽内容的一半，不需要设置width。

要点：使用**calc()**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全背景等宽居中布局</title>
    <style>
        .title{
     
            margin-top:1em;
            margin-bottom: 1em;
        }
        header{
     
            background-color: blueviolet;
            color: white;
        }
        footer{
     
            background-color: cadetblue;
        }
        header,section,footer{
     
            padding: .1em calc(50% - 400px);
            text-align: justify;
            hyphens: auto; /*通知浏览器在换行时如何使用连字符连字*/
        }
    </style>
</head>
<body>
    <header>
        <h2 class="title">这是一个标题</h2>
    </header>
    <section>
        <p>
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
            江城子，春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。
        </p>
    </section>
    <footer>
        <p>&copy; 2021 sandy</p>
        <p>这是一个footer</p>
    </footer>
</body>
</html>