CSS3新技能学习笔记

　　说来惭愧自认为对css了解，但在项目中却很少有正确的使用css，如果面向对象的css吧，其实也不是不想用而是css天生就是面向对象的，高度可重用，但是如果把每个都单独提取，难免会有过多的class以及自己也比较懒。

　　你要干嘛就选择什么样的标签，命名也一样。从内容本质出发，它是干什么的。

　　微型格式，如果某些内容需要的标签没有，可以使用class来代替 class="vcard"联系信息。

　　

　　通过需求和流程图可以事先考虑如何布局使用什么元素。

标签的使用：
　　ul无序列表
　　ol有序列表
　　dl>dt+dd描述内容 可以用在商品之类的描述上
　　blockquote描述,q短描述 cite引用 可以用在用户评论上
　　em强调

css属性
　　用outline替代border这样就不用再减border的值了或者使用box-sizing:border-box;

　　又想设置高度有想高度自适应可以使用min-height

　　box-sizing
　　　　表示width宽度包含哪些,默认值是content-box表示width只包括内容宽度

媒体查询

　　@media screen and (min-width:640px)
　　　　screen屏幕(width:xx)包括浏览器滚动条

　　　　only对不支持该语法的浏览器隐藏此规则
　　　　not如果浏览器不满足设置的条件可以通过not来设置

• 通过device-width可以获取设备宽和高不包括浏览器滚动条。
• 通过orientation特性可以根据屏幕的宽度和高度的比较设计不同样式。orientation:landscape当浏览器宽度大于高度的时候会被匹配成功，而portrait则相反。我们可以用它来实现响应式的导航。
• touch-enabled可以匹配触摸屏

通过媒体查询和rem实现响应式字体大小

html{
　　font-size:10px;
}
@media only device-width and (min-width:360px) {
　　html{
　　　　font-size: 11px!important;
　　}
}
@media only device-width and (min-width:400px) {
　　html{
　　　　font-size: 13px!important;
　　}
}
@media only device-width and (min-width:1000px) {
　　body{
　　　　max-width:640px;
　　　　margin:0 auto;
　　}
}

　　iPhone、iPad，和Android等设备会通过四个屏幕侧边中较短的一对去测量device-width。也就是说，给定尺寸为320×480的设备，不管是以纵向还是横向模式去查看，device-width都会是320px。

网页字体

　　@font-face定义字体规则

　　@font-face{
　　　　font-family:字体名;
　　　　src:local('字体名'),url('你要导入的字体路径') format('字体类型')
　　}

local使用源字体的名称去检查字体是否已经安装在用户的机器上；url提供一个指向字体的路径，当字体在本地不可用时使用；而format指定字体的类型

通过font-family:字体名,来使用，并且可以覆盖字符。

兼容IE9以下

src:url('xx.eot')；
ie9以下支持eot格式，不支持local

为了兼容强制下载所定义的字体
local('☺')

可以指定多个url路径以,分割达到兼容的效果。

更简单的兼容方法

@font-face{
　　font-family:name;
　　src:url('filename.eot?') format(eot),
　　url('filename.woff') format('woff'),
　　url('filename.otf') format ('opentype'),
　　url('filename.svg#filename') format('svg');
}

　　@font-face生成器（http://www.fontsquirrel.com/fontface/generator/）。只要简单上传你要使用的字体文件，@font-face生成器就会将其转化为所有相关的格式——而且还可以生成需要在页面中使用的CSS。

font-stretch属性，它告诉浏览器显示的字体风格要比当前更窄一些。

使用font-size-adjust属性。该属性可以动态修改font-size属性。

文本效果

　　text-shadow:x y blur-radius color
　　文字阴影,支持多重阴影用，分割

　　-webkit-text-stroke:width color
　　描边

　　-webkit-text-fill-color:color
　　填充，对字符的轮廓进行描边

　　text-overflow:ellipsis
　　用省略号替换超出的文字
　　white-space:nowrap;
　　防止文本被折叠成多行

　　注意还需要加overflow:hidden;并且宽度。

　　resize:both;
　　改变元素大小

　　text-align:justify;
　　文本两端对齐
　　text-align-last
　　设置最后一段文本的对齐方式

多列布局

　　column-count:number
　　要分成几列

　　column-width:单位
　　根据屏幕宽度自动分列

　　column-gap:单位
　　边界间隔

　　column-rule:1px solid red;
　　分界线

背景

　　一个元素支持多个背景图片以,分割

　　background-size
　　对背景图片进行缩放

　　

　　background-clip:border-box、content-box、padding-box
　　背景裁剪,它会设置盒模型的那一部分成为背景（颜色或图片）显示的界限

　　

　　background-origin:border-box、content-box、padding-box
　　设置背景开始计算的点

　　

　　background-repeat:space、round
　　space:平铺且不被裁剪或缩放的最大数量的图片，并且在显示时会有空白区域出现在它们中间
　　round:水平和垂直填充包含元素的图片的最大完整数量

　　background-image:image-rect(url,top,right,bottom,left)
　　背景图片裁剪,解决图片精灵问题

　　mask:url repeat x y;
　　遮罩

　　border-radius

　　边框

　　border-image
　　边框图片

　　box-shadow:inset x y radius spread color
　　盒子阴影,radius:模糊半径,spread:阴影扩散的距离

　　rgba值只能应用到它指定的元素上,所以子元素可以否决所有的继承。

　　currentColor表示当前color颜色值

　　appearance:button、radio-button、password...
　　使用来自操作系统的不同地方的颜色。

2D变换-transform

　　允许多重变换以空格隔开 transform:rotate(10deg) skew();

　　transform:rotate(10deg);
　　旋转

　　transform-origin:x y;
　　改变原点,transform属性中默认的原点是水平垂直中心

　　translate(x,y)
　　平移,该函数可将元素从它的默认位置进行移动

　　translate非常类似于使用相对定位以及left和top属性，但请记住，经过变换的元素会保留它的位置，只是从显示上看起来像被移动过，被变换的是元素的图像，而不是元素本身。

　　skew(x,y)
　　倾斜

　　scale(x,y)
　　缩放

　　matrix
　　矩阵

　　box-reflect:direction offset image;
　　反射

　　transition:property time ease、linear、ease-in、ease-out、ease-in-out delay

　　过渡

动画
　　@keyframes声明关键帧

@keyframes 'name'{
　　keyframes{
　　　　property:value;
　　}
}

　　通过animation来调用

　　animation:name time ease、linear、ease-in、ease-out、ease-in-out delay count direction
　　名字 持续时间 运动方式 延迟 执行次数(infinite重复播放) 方向(normal或者alternate反向播放)

　　播放状态
　　animation-play-state:running|paused
　　running表示动画正在播放，而paused表示动画未在播放

　　允许多重动画。

3D变换
　　transform-style:preserve-3d;

　　perspective
　　透视

　　perspective-origin

　　transform-origin
　　变换原点