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 ...
随机推荐
- 像使用linux一样使用mac
1 不能像使用windows一样使用mac 因为mac卸载不方便. 2 gcc的问题 就使用系统默认的gcc,即clang,要想使用原声的gcc是不行的,mac本身不支持.
- CSS 布局实例系列（一）总结CSS居中的多种方法
使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...
- centos7安装 go
1 下载 - Golang中国 2:解压 tar -xzf go1.0.3.linux-amd64.tar.gz 3:环境 变量 : 把 /usr/local/go/bin 增加到 PATH 环 ...
- Web Service概念辨析
Web Service包含两个概念. 其一是Web Service标准体系,由SOAP.WSDL.UDDI三要素组成,是平台和语言无关的.在这个概念里和WCF做比较是错误的,因为前者是行业标准,后者是 ...
- MySQL的information_schema库
information_schema数据库是MySQL自带的,它提供了访问数据库元数据的方式. 什么是元数据呢?元数据是关于数据的数据,如数据库名或表名.列的数据类型,或访问权限.有些时候用于表述该信 ...
- mutation与action
mutation 作用: 更改state的状态 说明: 每个mutation对象都有字符串类型(type)与回调函数,在回调函数内进行状态修改,回调函数的第一个参数为state eg: mutatio ...
- 斯坦福机器学习视频笔记 Week3 逻辑回归与正则化 Logistic Regression and Regularization
我们将讨论逻辑回归. 逻辑回归是一种将数据分类为离散结果的方法. 例如,我们可以使用逻辑回归将电子邮件分类为垃圾邮件或非垃圾邮件. 在本模块中,我们介绍分类的概念,逻辑回归的损失函数(cost fun ...
- 次小生成树 POJ 2728
#include <cstdio>#include <cstring>#include <iostream>#include <algorithm>us ...
- Spring Cloud之Swagger集群搭建
在微服务中,Swagger是每个服务 比如会员服务,订单服务,支付服务 进行继承. 如何将整个微服务中的Swagger进行合成,同一台服务器上. 使用Zuul+Swagger实现管理整个微服务API文 ...
- 机器学习——支持向量机（SVM）
机器学习--支持向量机(SVM) 支持向量机(Support Vector Machine)广泛地应用于分类问题,回归问题和异常检测问题.支持向量机一个很好的性质是其与凸优化问题相对应,局部最优解就是 ...