zoukankan      html  css  js  c++  java
  • css3

    CSS中::after和:after的区别

    ::after表示法是在CSS3中引入的,::符号是指伪元素,:符号是指伪类。
              element:after        {style properties}              /*CSS2语法*/
              element::after       {style properties}              /*CSS3语法*/
    用于向渲染的元素后添加内容。

    box-sizing

    div
    {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    50%;
    float:left;
    }

    具体参考:https://www.w3school.com.cn/cssref/pr_box-sizing.asp

    (全) flex布局兼容性 兼容新老浏览器、移动端浏览器

    /* 父元素-flex容器 */
    .flex{
        display: flex;
        display: -moz-box; /* Firefox 17- */  
        display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
        display: -moz-flex; /* Firefox 18+ */  
        display: -ms-flexbox; /* IE 10 */ 
    }
    /* 父元素-纵向排列(主轴) */
    .flex-column{
        -webkit-box-orient: vertical;
        flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        -moz-flex-direction: column;
        -o-flex-direction: column;
    }
    /* 子元素-平均分栏 */
    .flex1{
        -webkit-flex: 1; /* Chrome */
        -ms-flex: 1; /* IE 10 */
        flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
        -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1; /* OLD - Firefox 19- */
    }
    /* 父元素-横向换行 */
    .flex-wrap{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    /* 父元素-竖直居中(主轴是横向才生效) */
    .align-center{
        -webkit-box-align: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .align-start{
        -webkit-box-align: start;
        -moz-align-items: flex-start;
        -ms-align-items: flex-start;
        -o-align-items: flex-start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    .align-end{
        -webkit-box-align: end;
        -moz-align-items: flex-end;
        -ms-align-items: flex-end;
        -o-align-items: flex-end;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }
    /* 父元素-水平居中(主轴是横向才生效) */
    .justify-center{
        -webkit-box-pack: center;
        -ms-justify-content: center;
        -moz-justify-content: center;
        -o-justify-content: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .justify-between{
        -webkit-box-pack: justify;
        -ms-justify-content: space-between;
        -moz-justify-content: space-between;
        -o-justify-content: space-between;
        -webkit-justify-content: space-between;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .justify-around{
        -webkit-box-pack: justify;
        -ms-justify-content: space-around;
        -moz-justify-content: space-around;
        -o-justify-content: space-around;
        -webkit-justify-content: space-around;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }
    .justify-end{
        -webkit-box-pack: end;
        -ms-justify-content: flex-end;
        -moz-justify-content: flex-end;
        -o-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }
  • 相关阅读:
    pytorch-第一章基本操作-基本使用方法 (1.torch.empty, 2.torch.rand, 3.torch.zeros, 4.torch.tensor, 5.x.new_ones,6.torch.rand_like, 7.torch.randn, 8.torch.from_numpy, 9.x.view(改变维度))
    mysql学习入门-数据库中库,表和内容操作
    校园客户端(DR)启动后提示我们缺失packet.dll,无法正常启动(7)
    DR客户端一直连接服务器....(6)
    优盘提示插入多卷集的最后一卷解决办法(5)
    apt-get默认下载路径
    Qt嵌入式开发环境搭建
    Ubuntu重启关机命令使用
    Linux如何修改网络环境参数
    VMware内部错误解决办法
  • 原文地址:https://www.cnblogs.com/jiangxiaobo/p/14001634.html
Copyright © 2011-2022 走看看