• 移动端利用webkitbox水平垂直居中


    首先,必须要在父元素上用display:-webkit-box.

    一、box的属性:

    1.box-orient 用于父元素,用来确定父容器里子容器的排列方式,是水平还是垂直。

    horizontal在水平行中从左向右排列子元素;vertical从上向下垂直排列子元素。

    horizontal:    vertical:

    <!DOCTYPE html>
    <html lang="en"> <head> <meta charset="UTF-8"> <title>webkit-box</title> <style> .father
    { display: -webkit-box; -webkit-box-orient:horizontal; background-color: #f4f4f4; height: 800px; }
    /*vertical*/ .father{ display: -webkit-box; -webkit-box-orient:vertical; background-color: #f4f4f4; height: 800px; }
    .child1{ background-color: red; color: #f4f4f4; font-size: 100px; } .child2{ background-color: yellow; color: green; font-size: 200px; } .child3{ background-color: blue; color: #f4f4f4; font-size: 100px; } </style> </head> <body> <div class="father"> <div class="child1">1</div> <div class="child2">2</div> <div class="child3">3</div> </div> </body> </html>

    2.box-pack 用于父元素,用来确定父容器里子容器的水平对齐方式。

    start水平居左对齐;end水平居右对齐;center水平居中;justify两端对齐。

    start:    end: 

    center:     justify:

    .father{
                display: -webkit-box;
                -webkit-box-orient:horizontal;
                -webkit-box-pack: center;
                background-color: #f4f4f4;
                height: 800px;
            }

    3.box-align 用于父元素,用来确定父容器里子容器的垂直对齐方式。

    start居顶对齐;end居底对齐;center垂直居中;stretch拉伸到与父容器等高。

    start:    end:

    center:    stretch:

    .father{
                display: -webkit-box;
                -webkit-box-orient:horizontal;
                -webkit-box-align: stretch;
                background-color: #f4f4f4;
                height: 800px;
            }

    4.box-flex 用于子元素,用来让子容器针对父容器的宽度按一定规则进行划分。

    .father{
                display: -webkit-box;
                -webkit-box-orient:horizontal;
                -webkit-box-align: stretch;
                background-color: #f4f4f4;
                height: 800px;
            }
            .child1{
                background-color: red;
                color: #f4f4f4;
                font-size: 100px;
                -webkit-box-flex: 1;
            }
            .child2{
                background-color: yellow;
                color: green;
                font-size: 200px;
                -webkit-box-flex: 2;
            }
            .child3{
                background-color: blue;
                color: #f4f4f4;
                font-size: 100px;
                -webkit-box-flex: 3;
            }

    二、水平垂直居中

    .father{
                display: -webkit-box;
                -webkit-box-orient:horizontal;
                -webkit-box-pack: center;
                -webkit-box-align: center;
                background-color: #f4f4f4;
                height: 800px;
            }
            .child1{
                background-color: red;
                color: #f4f4f4;
                font-size: 100px;
            }
            .child2{
                background-color: yellow;
                color: green;
                font-size: 200px;
            }
            .child3{
                background-color: blue;
                color: #f4f4f4;
                font-size: 100px;
            }
  • 相关阅读:
    Set the Welcome Page in SharePoint through Code
    调试工具
    Sublime Text 3编译Sass
    js储存参数的数组arguments
    js 判断客户端浏览器
    手机设计尺寸
    required
    前端工具HBuilder安装Sass插件
    apache极简配置虚拟机
    跳转输入框按键操作
  • 原文地址:https://www.cnblogs.com/mywaystrech/p/4849260.html
Copyright © 2020-2023  润新知