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 ...
随机推荐
- TRansportation ANalysis and SIMulation System
https://www.fhwa.dot.gov/planning/tmip/transims/background.cfm?from=groupmessage
- A visual proof that neural nets can compute any function
http://neuralnetworksanddeeplearning.com/chap4.html In essence, we're using our single-layer neural ...
- 洛谷 P1558 色板游戏
洛谷 题解里面好像都是压位什么的, 身为蒟蒻的我真的不会, 所以就来谈谈我的30颗线段树蠢方法吧! 这题初看没有头绪. 然后发现颜色范围好像只有30: 所以,我就想到一种\(sao\)操作,搞30颗线 ...
- LeetCode：加油站【134】
LeetCode:加油站[134] 题目描述 在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升. 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 个加油站需要 ...
- Linux中cp命令不提示直接覆盖的方法
新做了服务器,cp覆盖时,无论加什么参数-f之类的还是提示是否覆盖,这在大量cp覆盖操作的时候是不能忍受的. 把a目录下的文件复制到b目录 cp –r a/* b 执行上面的命令时,b存在的每个文件都 ...
- 每天一个Linux命令（15）tail命令
tail命令用于输入文件中的尾部内容.tail命令默认在屏幕上显示指定文件的末尾10行. 如果给定的文件不止一个,则在显示的每个文件前面加一个文件名标题. (1)用法: 用法: tail ...
- iOS项目中获取验证码倒计时及闪烁问题解决方案
-(void)startTime{ __block int timeout= 59; //倒计时时间 dispatch_queue_t queue = dispatch_get_global_queu ...
- [转]详解Java解析XML的四种方法
XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM ...
- [算法]找到无序数组中最小的K个数
题目: 给定一个无序的整型数组arr,找到其中最小的k个数. 方法一: 将数组排序,排序后的数组的前k个数就是最小的k个数. 时间复杂度:O(nlogn) 方法二: 时间复杂度:O(nlogk) 维护 ...
- NOIP前的一些计划
一些想法 距离NOIP2018只剩下一个星期的时间了,通过这几天在长郡的考试,渐渐感觉还有好多东西自己还不够熟练,也有些东西到现在还不会,现将NOIP前的一些计划列在这里,希望能在考前把他们全部完成吧 ...