1. pointer-events:none;

2. flex

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

使用方法：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6.     <style>
  7.     *{margin:0;padding:0;}
  8.     body{
  9.         width:1000px;
  10.     }
  11.     .parent{
  12.         -webkit-display:flex;
  13.         -moz-display:flex;
  14.         display:flex;
  15.         height:300px;
  16.         border:1px solid #CCC;
  17.     }
  18.     .child{
  19.         width:100px;
  20.         height:100px;
  21.         margin:auto;
  22.     }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="parent">
  27.         <div class="child"></div>
  28.         <div class="child"></div>
  29.         <div class="child"></div>
  30.     </div>
  31. </body>
  32. </html>

旧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-width: 375px){

html{ font-size:37.5px;}

}

@media （min-device-width: 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 ;    //可显示行数

CSS3 日常小结的更多相关文章

  1. CSS3选择器小结

    CSS3 选择器小结 一 通用选择器 1  *{}通配选择符(CSS2):适合所有元素对象. 2  E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3  E#myid是id ...

  2. IT兄弟连 HTML5教程 CSS3揭秘 小结及习题

    小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...

  3. CSS3 学习小结

    写样式时有时遇到浏览器兼容问题:-webkit-transition:chrome和safari-moz-transition:firefox-ms-transition:IE-o-transitio ...

  4. css3属性小结

    /*border-radius*/ .demo2{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300 ...

  5. C语言 日常小结

    1.当数组当作函数参数的时候会退化为指针 #include<stdio.h> #include<stdlib.h> void sort(int a[]){ int num = ...

  6. CSS3 变形小结

    为原始大小 b:纵向扭曲,0为不变 c :横向扭曲,0不变 d:垂直伸缩量,1为原始大小 e:水平偏移量,0为初始位置 f  :垂直偏移向,0是初始位置 Ø原点 transform-origin() ...

  7. html5 日常小结

    HTML5新标签汇总 1.  html5新的 (input type=类型) 元素 <input type="number" name="quantity" ...

  8. CSS3选择器使用小结

    CSS3 选择器小结 一 通用选择器 1  *{}通配选择符(CSS2):适合所有元素对象. 2  E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3  E#myid是id ...

  9. 小结css2与css3的区别

    CSS3引进了一些新的元素新的特性,我收集以下,自己做了一个小结: animation(基础动画)eg:  div{animation: myfirst 5s linear 2s infinite a ...

随机推荐

  1. Linux安装Nignx基于域名的多虚拟主机实战

    看这个文章之前,要保证你的Nginx已经安装成功! 如果没有,请移步到下面这个文章,看完后再回来看! https://www.cnblogs.com/apollo1616/p/10214531.htm ...

  2. ExtJS4.2.1与Spring MVC实现Session超时控制

    假设你的项目使用ExtJS作为表现层.你会发现,SESSION超时控制将是一个问题. 本文将就自己的经验.来解决这一问题.当然,解决这个问题并不是仅仅有一种方法,我仅仅是提出我的方法. 首先.做超时控 ...

  3. VMware下所有的系统网卡启动不起来

    昨天新装了一台Linux,装好之后网络起不来,搞了半天也没弄好,总是报错: Failed to start LSB: Bring up/down networking.... 我以为是我的设置出了问题 ...

  4. 【leetcode刷题笔记】Binary Tree Level Order Traversal(JAVA)

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  5. 【四】MongoDB索引管理

    一.索引介绍 在mongodb中,索引用来支持高效查询.如果没有索引,mongodb必须在整个集合中扫描每个文档来查找匹配的文档.但是如果建立合适的索引,mongodb就可以通过索引来限制检查的文档数 ...

  6. python 3 面向过程编程

    python 3 面向过程编程 核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就像设计好一条工业流水线,是一种机械式的思维方式. 1.优点:程序结构清晰,可以把复杂的问题简单化,流程 ...

  7. Spring Cloud之Feigin客户端重构思想

    应该重构接口信息(重点) toov5-parent  存放共同依赖信息 toov5-api       api的只有接口没有实现 toov5-api-member toov5-api-order to ...

  8. 大话设计模式--访问者模式 Visitor -- C++实现实例

    1. 访问者模式: 表示一个作用于某对象结构中的和元素的操作,它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作. 访问者模式把数据结构和作用于结构上的操作之间的耦合脱开,使得操作集合可以 ...

  9. 在eclipse中引入jquery.js文件报错的解决方案

    从官方下载的jquery.js在myeclipse始终用个大大的红叉,看着很不爽,如何解决呢:jquery.js在myeclipse中报错:jquery.js -> 鼠标右键 -> MyE ...

  10. eclipse自动提示功能没了的解决办法

    由于重新配置了环境,并且eclipse也是装的4.2的,今天用的时候发现了,居然没有自动提示功能,也就是当一个对象居然点不出他的相关方法.后来网上搜索了下,成功的 办法是. 1.我window-> ...