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>
旧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 日常小结的更多相关文章
- CSS3选择器小结
CSS3 选择器小结 一 通用选择器 1 *{}通配选择符(CSS2):适合所有元素对象. 2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3 E#myid是id ...
- IT兄弟连 HTML5教程 CSS3揭秘 小结及习题
小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...
- CSS3 学习小结
写样式时有时遇到浏览器兼容问题:-webkit-transition:chrome和safari-moz-transition:firefox-ms-transition:IE-o-transitio ...
- css3属性小结
/*border-radius*/ .demo2{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300 ...
- C语言 日常小结
1.当数组当作函数参数的时候会退化为指针 #include<stdio.h> #include<stdlib.h> void sort(int a[]){ int num = ...
- CSS3 变形小结
为原始大小 b:纵向扭曲,0为不变 c :横向扭曲,0不变 d:垂直伸缩量,1为原始大小 e:水平偏移量,0为初始位置 f :垂直偏移向,0是初始位置 Ø原点 transform-origin() ...
- html5 日常小结
HTML5新标签汇总 1. html5新的 (input type=类型) 元素 <input type="number" name="quantity" ...
- CSS3选择器使用小结
CSS3 选择器小结 一 通用选择器 1 *{}通配选择符(CSS2):适合所有元素对象. 2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3 E#myid是id ...
- 小结css2与css3的区别
CSS3引进了一些新的元素新的特性,我收集以下,自己做了一个小结: animation(基础动画)eg: div{animation: myfirst 5s linear 2s infinite a ...
随机推荐
- office2013安装/激活
ed2k://|file|cn_office_professional_plus_2013_x64_dvd_1134006.iso|914106368|E5FBAE9EE9CB35D5E777EA78 ...
- linux环境下redis安装
本篇文章主要说明的是Linux环境下redis数据库的安装: 首先进入目标目录: 下载安装包,执行命令: wget http://download.redis.io/releases/redis-4. ...
- lua的弱弱引用表
lua有GC.细节无需太关注.知道些主要的即可,能local就一定不要global: 还有在数组里的对象,除非显式=nil,否则非常难回收: 只是能够用弱引用表来告诉GC. 外部引用为0,就不要管我, ...
- 学习Filter
http://www.cnblogs.com/jbelial/archive/2012/07/09/2582638.html Filter 介绍: 它主要用于对用户请求进行预处理,也可以对HttpSe ...
- 关于VMAX中存储资源池（SRP）
Storage Resource Pool中的相关元素 SRP由一个或多个数据池组成,这些数据池包含了预配置的数据(或TDAT)设备,可为创建和呈现给主机与应用程序的精简设备(TDEVS) 提供存储. ...
- 11.23 Eclipse
一.Eclipse Workspace File-->Switch Workspace 编译环境:Window -- Preferences – Java - Compiler 运行环境:Win ...
- ButterKnife 原理解析
一.使用方法 1.添加依赖. implementation 'com.jakewharton:butterknife:8.8.1' annotationProcessor 'com.jakewhart ...
- 小程序 requestAnimationFrame 死循环
小程序没有requestAnimationFrame 这个方法,小游戏有,使用这个方法会造成死循环
- 3.16课·········C#小结
//附加//C#源码,被C#编译器,编译成执念代码(IL)//int16=short.....±32000//int32=int.......±21亿//int64=long......±922亿亿3 ...
- 【leetcode刷题笔记】Valid Number
Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...