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>

旧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. iOS框架你了解多少？

    1.iOS 系统可以分为以下四层,每个框架对应IOS系统里的一层,每层建立在它下面层的上面.应该尽量使用上层的框架来代替下面的框架.更高层次的框架是对底层框架基于对象的抽象.以下列出几个iOS开发的常 ...

  2. python基础-第六篇-6.4模块混战

    我们之前接触多的编程方式就是函数式编程,而且喜欢就一个文件里写完所有的程序代码,这样做在前期感觉还不错,不过一旦你的程序变复杂,在易读性和排错方面就感觉好吃力,功能界限不明显,那今天我们就来讲讲怎么用 ...

  3. LOJ#10064. 「一本通 3.1 例 1」黑暗城堡

    LOJ#10064. 「一本通 3.1 例 1」黑暗城堡 题目描述 你知道黑暗城堡有$N$个房间,$M$条可以制造的双向通道,以及每条通道的长度. 城堡是树形的并且满足下面的条件: 设$D_i$为如果 ...

  4. Django APP之contenttypes简单应用

    Conttenttypes介绍 当你看到contenttype你是不是想到了请求头的contenttype? 但是 此contenttypes不是请求头Content-Type而是Django自带的a ...

  5. redis持久化AOF详细操作步骤

    1.切换到redis目录下面,创建文件 s3-redis.conf 2.编辑文件s3-redis.conf 3.终止当前redis服务端 4.登录redis客户端失败,说明服务端已停止 5.重启red ...

  6. zip 解压脚本

    zip 解压脚本 gpk-unzip.py #!/usr/bin/env python # -*- coding: utf-8 -*- # unzip-gbk.py import os import ...

  7. python __name__及__main()__的妙处

    #hello.py def sayHello(): str="hello" print(str); if __name__ == "__main__": pri ...

  8. wap网站即手机端网页SEO优化注意事项及方法

    定位和页面设计: 无论是PC端还是移动端,网站 都要考虑清楚消费群体的定位问题.虽然智能手机用户数量非常普及,但是要明白中国的大部分手机用户使用的还是2G网络,一直高 喊的3G.4G手机用户只有大约1 ...

  9. UI组件之Button

    UIButton:按钮,可以实现用户和app的交互,父类是UIControl,事件驱动型的组件的父类都是UIControl.一般使用类方法创建一个对象,创建时指定button的类型, iOS7.0后采 ...

  10. Data Structure Array: Largest subarray with equal number of 0s and 1s

    http://www.geeksforgeeks.org/largest-subarray-with-equal-number-of-0s-and-1s/ #include <iostream& ...