css3笔记.txt

inherit可以用在任何css属性中，对于伪元素，则会取生成该伪元素的宿主元素对应的该属性的值
伪元素无法设置内联样式

去除chrome浏览器input黄色背景
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
}
或
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 9999s;
  -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

ios overflow: auto;滚动无惯性
-webkit-overflow-scrolling: touch;

移动设备覆盖系统默认手势
body {
  -ms-touch-action: none;  // 禁止双击放大
  touch-action: none;
  -webkit-touch-callout: none;
}

移动端禁止点击高亮
-webkit-tap-highlight-color: rgba(255,0,0,0);

移动设备禁止横竖屏改变字体大小
body {
  -webkit-text-size-adjust: 100%;
}

input::-webkit-search-cancel-button{
  display: none;  // 去除部分浏览器搜索框中的删除按钮
}

content属性中的特殊字符
content: '\A';  // 代表0x000A(换行符，unicode表示法)，在css中还可以写成\000A，在js中常写成\n
content: '\D';  // 代表回车符，在js中常写成\r，现代浏览器中已经不需要用到这个字符了

appearance: none;  // 控制元素外观，normal, icon, window, button, menu, field
hyphens: auto;  // 连字符断行，none，manual(默认)，auto
white-space: pre;  // 保留源代码中的空白符和换行符，pre，pre-line，pre-wrap，nowrap
tab-size: 2;  // 缩进两个字符，也可以用长度值，如：2em
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;  // 用来控制连字效果的开启和关闭，variant，变体，ligatures，连体字母
unicode-range: U+26;  // 代表&，只能在@font-face规则内部有效，它并不是css属性，可指定一个或多个区间，如：U+400-4FF, U+5??, U+600-6FF
resize: none;  // none, both, horizontal, vertical，适用于任何元素，只要该元素的overflow属性不是visible
pointer-events: none;  // 事件穿透
user-select: none;
max-width: min-content;  // 元素内最大不可换行的元素的宽度，max-content(类似display: inline-block;)，fit-content(类似浮动元素)
table-layout: fixed;  // 该模式下，设置表格的列宽，单元格不会忽视已设置的宽度而根据内容来自动调整宽度，默认auto

column-count: 3;  // 分栏，ie10
column-width: 10em;  // 可以不设置column-count只设置column-width
column-gap: 1em;  // 调整分栏之间的间隔
column-rule: 1px solid red;  // 添加一条垂直的分隔线
column-span: 1;  // 控制元素横跨多列，默认1，目前只能设置为1或all

字体
字体格式
WOFF（web open font format）  // 面向未来，性能最好，ie9及以上已支持
EOT（embedded openType）  // 微软特有，ie9之前的版本支持
TTF（trueTye）、OTF（openType postscript）  // 桌面应用中常用的字体格式，兼容android和旧版的非ie浏览器
SVG（scalable vector graphics）  // 速度慢，文本质量不高，兼容旧版ipad和iphone
@font-face {  // 正式注册字体，使用字体前，必须先注册该字体
  font-family: 'fontname';  // 命名字体
  src: url('test.eot');  // ie9?，必须首先注册eot格式字体，这样老版本ie不理解其它规则，也没关系
  src: local('fontname'),  // 如果用户电脑恰好安装了该字体，浏览器会直接使用该本地字体，要避免误用同名的字体，可以传入一个无意义的字体名
      url('test.eot?#iefix') format('embedded-opentype'),  // ie6-ie8?
      url('test.woff') format('woff'),
      url('test.ttf') format('truetype'),
      url('test.svg') format('svg');
}

filter: drop-shadow() ...;  // 多个效果用空格分隔，滤镜可动画
drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));  // 弥补box-shadow等属性的不足，任何非透明的部分都会被一视同仁的打上投影，如：text-shadow，即使其值设置为none，也会对阴影进行投影
blur(20px);  // 滤镜效果
grayscale();
sepia(1);  // 降饱和度的橙黄色染色效果，几乎所有像素的色相值会被收敛到35~40
saturate(4);  // 给每个像素提升饱和度
hue-rotate(200deg);  // 每个像素的色相以指定的度数进行偏移
mix-blend-mode: luminosity;  // 为整个元素设置混合模式，不可动画

border，不接受百分比值
margin, padding值为百分比时，百分比值都是相对于父元素的宽度

border-radius: 50% / 50%;  // 横向 / 纵向
border-radius: 50%;
border-radius: 10px / 5px 20px; == border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px;  // 左上角开始，顺时针
border-image: 33.34% url(...) stretch;  // stretch，拉伸，round，重复，当背景是svg图时，size可以直接是1，1对应的是svg文件的坐标系统，因此不需要单位

background: url(../demo.png) no-repeat 10px 10px / 2em 2em fixed;  // 10px, background-position, 2em, background-size
background: url('data:image/svg+xml,<svg>...</svg>');  // data URI方式
background: -webkit-image-set(url(...) 1x, url(...) 1.5x, url(...) 2x);  // 目前只适用于webkit内核，1x，像素密度
background-position: right 10px bottom 10px;  // css3支持
background-origin: content-box;  // 默认padding-box
background-clip: content-box;  // 允许背景出现的区域，默认border-box
background-attachment: fixed;  // fixed(相对于视口) / scroll / local(相对于当前元素)
background-blend-mode: multiply;  // 为每层背景指定混合模式，overlay, screen, difference, multiply, normal
background-image:
linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%)  // 可定义多个，y轴，垂直向上为初始0度，顺时针为正方向，from关键字，to关键字，使用webkit前缀时，不需要使用from关键字指定方向，渐变函数会自动赋值，循环渐变不能使用from关键字
radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%)  // 可定义多个，circle和ellipse（椭圆），at关键字，circle at 90% 5%（中心点，位于左边缘90%，上边缘5%），使用webkit前缀时，不能使用at关键字

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);  // 根据路径裁剪，polygon，多边形，可用于动画
clip: rect(0, 0, 0, 0);  // 裁剪

box-shadow: 1px 1px 2px 3px rgba(0, 0, 0, 0.5);  // 2px，模糊半径，不可以为负值，3px，扩张半径，可以为负值，可定义多个投影

display: -webkit-box;  // 2009年的语法，非标准，已经过时，2011年，display: -webkit-flexbox;
display: flex;  // flexbox(伸缩盒)，标准版本，ie10+，此时子元素设置margin: auto;会在垂直和水平方向上都居中，其他模式下，margin: auto;只能实现水平居中
display: inline-flex;  // 行内元素使用flex布局
容器的属性
flex-direction: row;   // 决定主轴方向，row（默认，主轴为水平方向，起点在左端） | row-reverse（主轴为水平方向，起点在右端） | column（主轴为垂直方向，起点在上沿） | column-reverse（主轴为垂直方向，起点在下沿）
flex-wrap: nowrap;  // 定义，如果一条轴线排不下，如何换行，nowrap（默认，不换行） | wrap（第一行在上方） | wrap-reverse（第一行在下方）
flex-flow: row nowrap;  // flex-direction属性和flex-wrap属性的简写形式，默认，row nowrap
justify-content: center;  // 定义元素在主轴上的对齐方式，flex-start（默认，左对齐） | flex-end（右对齐） | center（居中） | space-between（两端对齐，元素之间的间隔都相等） | space-around（每个元素两侧的间隔相等）
align-content: stretch;  // 定义元素在非主轴上的对齐方式，如果元素只有一根主轴线，该属性不起作用，flex-start | flex-end | center | space-between | space-around | stretch
align-items: stretch;  // 定义元素在其所在行上的对齐方式，flex-start（起点对齐） | flex-end（终点对齐） | center（中点对齐） | baseline（元素的第一行文字的基线对齐） | stretch（默认，如果元素未设置高度或设为auto，将占满整个容器的高度）
元素的属性
order： 238;  // 定义元素的排列顺序。数值越小，排列越靠前，默认为0
flex-grow： 2;  // 定义元素的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink: 1;  // 定义元素的缩小比例，默认为1，即如果空间不足，该元素将等比缩小 
flex-basis: 220px;  // 定义了在分配多余空间之前，元素占据的主轴空间，默认值为auto，即元素的本来大小
flex: 1;  // flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self: center;  // 允许单个元素有与其他元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch，auto | flex-start | flex-end | center | baseline | stretch

img
通过width属性缩放图片，只会以图片的左上角为原点进行缩放
通过scale缩放图片，默认以图片的中心点进行缩放，除非重新设置了transform-origin

transform // 内联元素（与标签无关，display: inline）设置transform属性无法生效（包括动画），即使将该元素设置为position:relative等也无法生效，除非将display设置为inline-block、block等
transform-style: preserve-3d;
transform-origin: center center;
perspective: 500;
perspective-origin: center center;
backface-visibility: hidden;
多个变换函数间，使用空格分隔
matrix(a, b, c, d, e, f);  // 3*3矩阵，各坐标相对于中心点，(x, y)每个点变换之前的坐标，(ax + cy + e, bx + dy + f)每个点变换之后的坐标
a c e   x   ax + cy + e
b d f * y = bx + dy + f
0 0 1   1   0  + 0  + 1
scale(a, d);
translate(e, f);
rotate(x); == matrix(cos(x), sin(x), -sin(x), cos(x), 0, 0);  // x，旋转的角度，顺时针为正方向
skew(x, y); == matrix(1, tan(y), tan(x), 1, 0, 0);  // x，x轴倾斜的角度，逆时针为正方向，y，y轴倾斜的角度，顺时针为正方向
perspective(.5em);
matrix3d(); // 4*4矩阵
事件
transformend

animation // animation: name 2s linear 3s forwards 2 normal;
animation-name
animation-duration
animation-timing-function:  // 注意：timing-function作用于每两个关键帧之间，而不是整个动画
  cubic-bezier(x1, y1, x2, y2);  // 反向版本，锚点的水平坐标和垂直坐标互换，水平方向上[0, 1]，垂直方向上(-∞, +∞)
  steps(4, end);  // 根据指定的步数，把每个间隔（两个相邻的keyframe之间的动画）切分为多帧，整个动画会在帧与帧之间硬切，不作插值处理，start/end(指定在每个间隔的起点或是终点发生阶跃变化，默认end，start跳过间隔的起点状态（类似跳过间隔的0%），end跳过间隔的终点状态（类似跳过间隔的100%）
  step-start;  // 单步切换，相当于steps(1, start)的简写
  step-end;  // 相当于steps(1, end)的简写
animation-delay: -20s;  // 负的动画延时可直接跳至动画中对应的时间点  
animation-fill-mode  // 定义动画在播放之前或之后，元素的状态。none | forwards，是否动画在播放之后保留元素的最终(关键帧最后一帧)状态 | backwards，在动画播放之前(延迟播放期间)将元素的初始状态设置为动画关键帧第一帧的状态 | both，相当于同时设置为forwards、backwards
animation-iteration-count // 定义动画的播放次数，n | infinite
animation-direction: alternate;  // normal(正向播放) | alternate(播放次数为偶数时，反向播放) | reverse(反向播放) | alternate-reverse(播放次数为偶数时，正向播放)
animation-play-state: paused;  // 定义动画正在运行还是暂停，可在js中使用该属性，这样就能在播放过程中暂停动画，paused | running

动画事件
w3c/firefox animationstart animation animateionend
webkit webkitAnimationStart webkitAnimationIteration webkitAnimationEnd
ie10 animationstart animationiteration animationend

媒体查询
@media (not max-width: 568px) {  // not关键字，不包含当前像素，如：not max-width: 568px约等于min-width: 569px
}
width  // 显示区域的虚拟宽度
height
min-width  // 虚拟宽度
device-width
min-device-width  // 真实物理宽度
min-device-pixel-ratio: 1.5x  // 1.5x，设备像素密度
aspect-ratio: 1 / 1;
min-aspect-ratio: 1 / 1;  // 宽高比，横屏，aspect，方向
device-aspect-ratio: 1 / 1;
min-device-aspect-ratio: 1 / 1;
orientation: landscape;  // landscape，横向，portrait，纵向
color  // 支持的颜色数量，1，表示黑白，目前主流浏览器都是24位
min-color
通过媒体查询应用样式表
<link rel="stylesheet" type="text/css" media="screen and (max-width: 568px)" href="test.css">  // 该样式表总是被下载，但只会在对应的条件下才会被应用

移动设备浏览器
window.orientation  // 0，纵向，90 | -90，横向
事件
orientationchange  // 一些设备只触发resize事件