css 的伸缩盒布局

2019-02-27 本文已影响2人贵在随心

1、垂直居中^[1]

垂直居中的实现很常见，下面介绍三种比较便捷的实现方案：

1.1 基于绝对定位的解决方案^[2]

优点：以元素自身的高度和宽度为基准进行换算和移动
代码示例：

<div class="vertical-centering-abs">
   <h1>基于绝对定位的解决方案</h1>
</div>

.vertical-centering-abs {
    background-color: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

1.2 基于视口单位的解决方案^[3]

知识点：视口高度 vh 与 transform 属性
代码示例：

<div class="vertical-centering-vh">
    <h1>基于视口单位的解决方案</h1>
</div>

.vertical-centering-vh {
    background-color: yellowgreen;
    width: 38em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

1.3 基于 flexbox 的解决方案^[4]

知识点：FlexBox 中的 align-items 和 justify-content 属性
代码示例：

<div class="vertical-centering-wrap">
    <div class="vertical-centering">
        <h1>基于Flexbox的解决方案</h1>
    </div>
</div>

.vertical-centering-wrap {
    width: 100%;
    height: 16em;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.vertical-centering {
    /*这是对整个div的居中*/
    margin: auto;
    /*下面是对文本的垂直居中*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    width: 50em;
    height: 10em;
    align-items: center;
    justify-content: center;
}

这是最好的垂直居中解决方案，当我们使用 FlexBox 时，margin: auto 不仅在水平上将元素居中，垂直方向也是如此。
借助 FlexBox 规范中的 align-item 和 justify-content 属性，可以实现元素内部文本的居中。

垂直居中的三种解决方案

2、紧贴底部的页脚^[5]

知识点：视口相关的单位，calc() 表达式，min-height，flex-flow 属性
代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>紧贴底部的页脚</title>
    <link rel="stylesheet" type="text/css" href="css/text-3D.css" />
    <style type="text/css">
        body {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            /*子元素竖直排列*/
            flex-flow: column;
            min-height: 100vh;
        }
        
        main {
            flex: 1;
        }
        /*控制文本的高度:：通过css控制元素的显示和隐藏*/
        #contents:checked~p {
            display: none;
        }
        
        body {
            margin: 0;
            font: 100%/1.5 Baskerville, Palatino Linotype, Palatino, serif;
        }
        
        h1 {
            margin: .5em 0 0;
        }
        
        header {
            text-align: center;
            height: 3em;
        }
        
        main,
        footer {
            display: block;
            /*控制元素居中设置*/
            padding: .5em calc(50% - 400px);
        }
        
        footer {
            background: linear-gradient(#222, #444);
            color: white;
        }
    </style>
</head>

<body>
    <header>
        <h1>Site name</h1>
    </header>
    <main>
        <input type="checkbox" id="contents" /><label for="contents">Toggle contents</label>
        <p>Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta. Qui drumstick tail, bacon leberkas shoulder capicola laborum. Minim ipsum bacon, mollit
            laboris t-bone pariatur. Ham hock reprehenderit sint beef, sausage pig eiusmod t-bone shankle strip steak.</p>
        <p>Cow enim excepteur, boudin dolore lorem magna fugiat consequat voluptate. Picanha fugiat chicken, cupim aliquip magna filet mignon prosciutto ut nostrud. Kielbasa rump frankfurter sunt corned beef. Andouille in cillum deserunt, rump et picanha
            landjaeger tongue anim.</p>
        <p>Ad meatball ipsum ground round shank. Quis ipsum meatball exercitation. Laborum swine spare ribs, sunt ball tip magna t-bone venison. Velit doner voluptate non occaecat do ribeye kevin strip steak et. Esse biltong shank ribeye dolor pariatur aute
            deserunt non est eiusmod pork belly pancetta pork chop. Pork chop id consectetur rump, meatball short loin brisket tail andouille deserunt alcatra irure prosciutto do.</p>
        <p>Dolore reprehenderit ex, meatball doner commodo consectetur ea ribeye. Ad aliqua kevin, chuck excepteur minim et cow esse ham hock landjaeger. Alcatra bresaola dolore tempor do, excepteur in velit flank officia dolore meatloaf corned beef picanha.
            Eu pancetta brisket eiusmod ipsum aute sausage, culpa rump shoulder excepteur nostrud venison sed pork loin. Tempor proident do magna ground round. Ut venison frankfurter et veniam dolore. Pig pork belly beef ribs kevin, doner exercitation
            magna esse shankle.</p>
        <p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork
            belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball
            tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.</p>
        <p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork
            belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball
            tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.</p>
        <p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork
            belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball
            tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.</p>
        <p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork
            belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball
            tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.</p>
    </main>
    <footer>
        <p>利用flexbox 弹性布局来实现页脚紧贴底部；这里需要flex 属性；任何元素只要设置了一个大于0的flex值，就将获得可伸缩的特性；flex值负责控制多个可伸缩元素之间的尺寸分配比例。</p>
    </footer>
</body>

</html>

紧贴底部的页脚

3、自适应的内部元素^[6]

知识点：max-width属性，min-content 关键字
min-content 的兼容
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>自适应内部元素</title>
    <link rel="stylesheet" type="text/css" href="css/text-3D.css" />
    <style type="text/css">

        figure {
            max-width: 300px;
            max-width: min-content;
            margin: auto;
            padding: 10px;
            border: 1px solid #000;
        }
        figure > img {
            max-width: inherit;
        }
    </style>
</head>
<body>
    <p>这里需要借助第三版的新规范的关键字：min-content这个属性</p>
    <figure>
        <img src="img/adamcatlace.jpg" alt="" />
        <figcaption>The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.</figcaption>
    </figure>
    <p>使用max-width，是为了给旧的浏览器提供一个平稳的回退样式</p>
</body>
</html>

结果

1、垂直居中 ↩
1.1 基于绝对定位的解决方案 ↩
1.2 基于视口单位的解决方案 ↩
1.3 基于 FlexBox 的解决方案 ↩
2、紧贴底部的页脚 ↩
3、自适应的内部元素 ↩

css 的伸缩盒布局

1、垂直居中^[1]

1.1 基于绝对定位的解决方案^[2]

1.2 基于视口单位的解决方案^[3]

1.3 基于 flexbox 的解决方案^[4]

2、紧贴底部的页脚^[5]

3、自适应的内部元素^[6]

猜你喜欢

热点阅读

css 的 伸缩盒布局

1、垂直居中[1]

1.1 基于绝对定位的解决方案[2]

1.2 基于视口单位的解决方案[3]

1.3 基于 flexbox 的解决方案[4]

2、紧贴底部的页脚[5]

3、自适应的内部元素[6]

猜你喜欢

热点阅读

css 的伸缩盒布局

1、垂直居中^[1]

1.1 基于绝对定位的解决方案^[2]

1.2 基于视口单位的解决方案^[3]

1.3 基于 flexbox 的解决方案^[4]

2、紧贴底部的页脚^[5]

3、自适应的内部元素^[6]