zoukankan      html  css  js  c++  java
  • CSS3 日常小结

    1. pointer-events:none;

    2. flex

    今天看到一个牛X的CSS3属性 flex, 称为弹性盒子。  这中属性完全可以替代媒体查询啦

    使用方法:

    父元素使用属性display:flex;  子元素使用margin:auto;  子元素就会自动适应父元素的宽高平均分布在父元素内,并且水平、垂直居中;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style>
        *{margin:0;padding:0;}
        body{
            width:1000px;
        }
        .parent{
            -webkit-display:flex;
            -moz-display:flex;
            display:flex;
            height:300px;
            border:1px solid #CCC;
        }
        .child{
            width:100px;
            height:100px;
            margin:auto;
        }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </body>
    </html>
    View Code

    旧flex布局:

        display: -webkit-flex-box;

        -webkit-flex-box: 1;
        box-pack: center;

        box-align: center;

    新flex布局:

        display: -webkit-flex;

        -webkit-flex: 1;

        justify-content: center;

        align-items: center;

     3. em 长度单位

          之前没做过手机页面,这个单位用的不太多,一直以为他的大小是根据父元素的大小定义的。今天研究了下,就记了下来。

         3.1  任何浏览器body默认的字体大小是16像素,所以页面在没有设置字体大小的情况下,如果设置其大小为1em,那么它的大小就是16px;

         3.2  而手机页面由于本身视口较小,字体也就小了许多,12px的字体就差不多了。这里是换算公式:

             1em = 16px;   1px= 0.0625em;  那么12px = 0.0625*12 = 0.75em; 

         只要把页面的body文字大小设置为font-size:62.5% ,然后在页面内使用1em就能表示是12px大小的文字啦。 

          这个大小同样适用于元素的宽度、高度。

     4. rem 使用详解  以HTML字体大小为基准

       html{font-size: 32px;} //默认320px

      //iphone6

      @media (min-device- 375px){

       html{ font-size:37.5px;}

      }

      @media (min-device- 414px){

       html{ font-size:41.4px;}

      }

     5.  多行文字溢出隐藏

       display: -webkit-box;

       overflow: hidden;

      text-overflow: ellipsis;

      word-break: break-all;

      -webkit-box-orient: vertical;

      -webkit-line-clamp: 2 ;    //可显示行数

      

  • 相关阅读:
    开发新手最容易犯的50个 Ruby on Rails 错误(1)
    Spring Data Redis 让 NoSQL 快如闪电(2)
    为什么每个程序员都应该懂点前端知识?
    如何在 Flickr 上找到又酷,又有趣,且版权自由的照片?
    微服务扩展新途径:Messaging
    为什么现代企业无法真正实现组合式监控?
    开发者和程序员需要关注的42个播客
    战略性情绪分析的5大数据来源
    Spring Data Redis 让 NoSQL 快如闪电 (1)
    对抗告警疲劳的8种方法
  • 原文地址:https://www.cnblogs.com/fanxiaowu/p/4469241.html
Copyright © 2011-2022 走看看