CSS3

概念

css定义：指定文档该如何呈现给用户的语言

文档指的是信息的集合，不等同于文件

用户代理UA：文档呈现给用户的程序（浏览器-视觉、语音浏览器-听觉……）

兼容性

CSS3的兼容性非常友好，尤其是手机端的页面都是用响应式布局，因为对CSS3全面支持。

历史

CSS Working Group

1996.12   CSS1.0发布，解决之前样式混乱的问题

1998.5   CSS2.0 层叠样式

2004.2   CSS2.1 去掉不被浏览器兼容的属性

2010      CSS3.0 推出，还没有被浏览器兼容

css语法

css声明，以分号隔开的每一条css属性设置语句，

css声明块，以大括号的形式被组合起来，里面是一条条的css声明

css规则（规则集合）：

1. 选择器 + 声明块（css规则 | 一般规则）

2. @规则（条件规则组）：@keyframes、@charset、@import、@namespace、@media、@font-face

层叠算法：决定哪个优先级更高

css官方文档语法：

<>尖括号里面的是基本类型，如...

[ ] 和 空格 强调顺序，如bold thin && 等价于 [ bold thin ] && ，合法的顺序是bold thin  或者  bold thin

&& 连接的部分都要出现，但是顺序任意

|| 或，可以出现多个，最少出现一个

| 互斥，只能出现一个

*   [0，infinite]

+  [1，infinite]

？ 0次或1次

{}  表范围

#  [1，infinite]，和+的区别是，值必须要用逗号分开

比较重要的模块如下：

1. 选择器

结构选择器

：root 特指html根标签，权重比html标签选择器高

input：not（[text="text"]）传选择器，取反，无法取到上级的元素；优先级取决于传入的选择器

：empty 子元素是空的元素，有换行、空格都不算空（会被js解释成文本），注释是空的

：only-child 选的是子元素，会找所有层级

：target a标签指定对应的锚点之后，可以通过这个伪类指定样式

:target {
	background-color: #000;
}

<h1 id="one">h1</h1>
<p id="two">p</p>

<a href="#one">first</a>
<a href="#two">second</a>

：nth-last-child（n）倒数第几个，4n+1就是 4个一循环，找循环的第一个

：first-of-type / :last-of-type / nth-of-type / nth-last-of-type 和之前的用法一样，但是这个是找第一次出现的类型，一般会指定类型再找

例：

<span>first-span</span>
<span>second</span>
<span><em>inside-em</em></span>
<span><span>inside-span</span></span>
<em>em</em>
<span>last-span</span>

div：first-child 会找div下面所有层级的第一个元素（first-span、inside-em、inside-span），忽略类型

div：first-of-type 会找div下面所有层级第一次出现的元素类型（第一层：first-span、em；第二层：inside-em、inside-span）

UI元素状态伪类选择器

：hover

：focus input聚焦

：active 元素被激活，鼠标按住不放的状态

：enabled 表单可用（一般状态）时的样式

：disabled 表单禁用时候的样式，不可提交数据

：read-only 只读，同样不可用，但是提交数据的时候回提交默认数据，和禁用不一样

：read-write 读写，禁用状态下仍然可以选到（禁用在功能性上是可以读写的，但是实际上是是不能用的，可以但不被允许）

：checked 被选中状态，用于选框

：default 默认选项的状态（在html中设置的checked，而不是用户勾选的选项），用于选框

文字相关

：：first-letter 块级元素的第一个字母

：：first-line 块级元素的第一行

：：selection 文本被选中时候的状态，还有不允许用户选择的属性user-select：none -> 不允许复制（只允许测试用，最后还是要用js做）

关系选择器

E > F 直接子元素选择器

E + F 相邻兄弟选择器

E ~ F 一般兄弟选择器

两个兄弟都是往下找，后代也可以，不会往上找

2. 背景、边框

background

简写：background：url(img/5.jpg) no-repeat scroll 0 0/100% 100% border-box content-box （顺序是：image、repeat、attachment、position/size、origin、clip）

不同地方顺序可能不一样，但是一定的是，url放最前面，position/size一组，origin、clip一组，组内顺序不变，其他的顺序随便搭

background-position默认是会将背景覆盖到边框的部分的

background-origin就可以解决这个问题：

background-origin：border-box / padding-box / content-box 以哪里为原点进行背景覆盖，但是要是在背景不固定（fixed）的条件下才可以发生改变

**background-attachment **表示附着（相对于谁来定位），fixed是相对于可视窗口（div-content+padding+border），背景固定了之后 background-position和background-origin都不会生效；scroll是相对于元素（div-content+padding）；local才会相对内容（content）

盒子内部设置background-attachment：scroll并不好用，和fixed差不多，不会随滚动条滚动，改成local就可以了

div{
	width: 400px;
	height: 200px;
	padding: 50px;
	overflow: scroll;
	border: 20px solid rgba(123, 123, 123, .1);
	background-image: url(1.jpg);
	background-size: 200px 100px;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

background-clip：border-box / padding-box / content-box 超出指定的部分裁剪掉

border-img

border-img: url('img/border-img.jpg') 70 repeat

div{
	width: 210px;
	height: 210px;
	border: 70px solid #000;
	border-image-source: url('img/border-img.jpg');
	border-image-slice: 70;
	border-image-repeat: repeat;
}

 结果： 

border-image-slice：70 35 70 35 裁剪，按顺序上右下左裁剪图片作为边框，切完之后拉伸到指定边框宽度；默认单位是px，不用写单位

border-image-repeat: repeat（平铺剪切） / stretch（拉伸） / round （平铺）

将边框宽度变为50之后：

 repeat  stretch 

边框70，border-image-slice：10% 20% 30% 40%：

 round

border-image-width 可以替代border设定的宽度

border-image-outset 往外扩充的距离，整个边框会变大

另外要注意的是，如果只有border-image-source的话，四个角都会有完整的图片

如果给出的值大于一半，中间的位置也是会空的border-image-slice: 140

3. 阴影、圆角

border-radius 其实就是两条边对用的圆弧，指定border-top-left-radius：100px 100px其实是和border-top-left-radius：50%一样的（假设宽高都为200px）

border-radius：100px/50px 所有角的宽高比都为100比50；多值 100px 50px / 50px 30px 上下100：50，左右50：30

设置的边角的每一边宽高加起来不应该超过盒子原本的宽高，否则会导致图片的变形

画半圆：假设宽200，高100 ->border-radius：100px 100px 0 0

画叶子：border-radius：97% 3%

box-shadow：x-offset   y-offset  blur-radius（模糊半径） spread-radius（拓展半径，透视远近） #color  inset（向内投影）

多重阴影，就用逗号分隔 box-shadow：4px 2px 1px 1px #f40, -4px -2px 6px #000 inset

box-shadow非常影响性能，最好不要用

4. 文字

text-shadow：用法和box-shadow差不多，就是没有拓展半径和inset

word-wrap（折行）：normal / break-word  / no-wrap

半角是英文的字节，全角是中文的字节，英文换行看的就是半角的空格和连字符；中文在哪都可以换行，中文一个要注意的点是，浏览器不会让标点符号在文字的行首，非要逗号在最前面，就在逗号前面加一个空格

<div>
	ffffffffffffffffffffffffffffffffffffffffffffff

	ddddddddddddddddddddddddddddddddddddddddddddddddddddd
	gggggggggg
</div>

• break-word 处理长单词的时候，当文字超出容器范围，强制让单词打断，会另起一行（和浏览器的处理方式一样）

结果：

word-break：normal / break-all / keep-all

 break-all单词截断的一种处理方式，不会另起一行

keep-all 所有单词都展现完全，不会管超出部分

white-space：normal / pre / nowrap / pre-wrap / pre-line

• normal 换行和多个空格被合并成一个空格，除非有这行放不下的长单词，才另起一行

• nowrap 换行和空格合并为一个，不管是换行还是空格都不折行

• pre 将所有的换行和空格保留下来，和pre标签一样，不会自动换行

• pre-line 保留换行，合并空格，超出容器部分正常换行

• pre-wrap 和pre一样，但是会自动换行

text-overflow：clip（截断）/ ellipsis / 别的值兼容性很差，略

单行文本溢出显示省略号三大件：

overflow：hidden;
white-space：nowrap;
text-overflow：ellipsis;

@font-face

@font-face {
    font-family: 'myFont';
    src: url('font/xxxx.otf'), //浏览器可能不兼容这个字体，那就多写几个备用
         url('font/xxxx.ttp')
         format('otf'); //因为浏览器对字体格式的支持不一致，所以需要指定后缀
}

在哪用，就在哪里用font-family

div {
    font-family: 'myFont';
}

多列布局

columns：200px  3（列）这两个值实际上是有冲突的，能排3列就排，不能排就排到最大值，一般以count为准

column-width：200px

column-count：3

列与列之间的间距是16px，其实就是字体的默认大小，如果更改字体大小也会更改间距，但是这种方式不太适用一些场景，所以就有了column-gap：50px（百分比兼容性不好）

column-rule（文本分割线）：1px solid #000（和border用法一样）

column-span（文本标题）：all（作为标题，占一行） / none（默认，在第一列），在子元素上设置

5. 颜色相关

rgba（0，0，0，.5），a是opacity透明度；直接用opacity会对启用的盒子的所有元素起作用，可能我们只是想要背景透明，而文字不透明，直接用opacity会背景和文字都透明

hsla（90，78%，12%，.5），hue色相 [-360, 360]，图如下，0/360 红色，60黄，120绿色，180青色，240蓝色，300紫色【赤橙黄绿青蓝紫】，值如果大于360，就会取%360的值；saturation饱和度 [0%，100%]，light亮度 [0%，100%]，opacity透明度

渐变：

background-image：linear-gradient（to top，red 0%，green 100%）渐变实际上是图片

兼容性写法：兼容IE10及其以上的版本

background-color：#fff;
background-image：linear-gradient（to top，red 0%，green 100%);
background-image：-webkit-linear-gradient（to top，red 0%，green 100%）;
background-image：-moz-linear-gradient（to top，red 0%，green 100%）;
background-image：-o-linear-gradient（to top，red 0%，green 100%）;

linear-gradient（to top，red 0%，green 100%）线性渐变，方向：to top / bottom right / 45deg，百分比是从哪里开始，哪里结束，不是中间线

重复渐变：background-image: repeating-linear-gradient(pink 0%, pink 10%, orange 10%, orange 20%)

radial-gradient（circle / ellipse 200px 100px [大小 - 长轴、短轴] at 100px center [圆心位置]，red 0%，green 100%）径向渐变

6. 简单的逻辑

计算值：calc（50% - 150px）相当于：left：50% margin-left：-150px

attr拿到标签的属性：

a::after {
    content: "("attr(href)")";
}

<a href="www.baidu.com"></a>

7. transform 变化

transform：rotate（50deg）translateX（150px）translateY（150px）

transform：translateX（150px）translateY（150px）rotate（50deg）

transform渲染是从左往右渲染的，先旋转再平移，和先平移再旋转不一样，因为变化的不仅是元素，还有坐标系，坐标系会跟着变

是复合值，只对块级元素生效！

rotate

transform：rotate / rotateX / rotateY / rotateZ（10deg），默认是rotateZ（Z轴方向，屏幕到眼镜的垂直方向），坐标原点在左上角，x，y和canvas坐标系一样

（沿Z轴旋转）

（X，沿左右的轴转）

（Y，上下）

transform：rotate3d（x，y，z，deg），前三个参数是坐标，坐标和原点连接确定旋转轴，最后一个是旋转的角度

scale 缩放

transform：scaleX / scaleY / scaleZ（2），z只有0会有影响

transform：scale（）只填一个值，xy方向都缩放；两个参数对应 x，y

transform：scale3d（x，y，z）

skew 倾斜

transform：skewX / skewY / skewZ（30deg）逆时针旋转变形

transform：skew（）一个值默认是x轴，两个值xy都斜

translate 平移

transform：translateX / translateY / translateZ （10px）

transform：translate3d（x，y，z）

盒子垂直居中：top：50%；left：50%；transform：translate（-50%，-50%）translate移动的就是元素的内容部分，可以让内容不定的东西达到水平和垂直居中

想要层级往下，z-index不好用的时候， 用translateZ，将元素往里摁，但是一定要设置transform-style（父元素上）：transform-style：preserve-3d；transform：translate3d（-50%，-50%，-1px）

transform-origin

transform-origin：left / left center / 0%  50% 10px，更改原点，第一个值是水平方向，第二个垂直方向（默认center），最后一个值是z轴方向，只能是像素长度

决定动画是以哪里为起点，慢慢变化。transform-origin决定了变化的方式，如果是以中间为原点，就会从中间慢慢向外扩大，以左边为原点，就会从左端开始变化

8. transition 过渡

也是复合属性：transition：transform 2s ease-in 1s，width 2s，height 2s（很长的话，分开写），过渡时间永远在延时前面

transition-property：all（不建议用，动画消耗性能） / transform，需要过渡的属性

transition-duration：2s，过渡时间

transition-timing-function：ease / ease-in-out（都是慢快慢，速度有点差异）/ step，过渡方式

step（1，end），end丢掉最后一帧，start丢掉第一帧，1是步数，如果大于1，就会在两个效果之间自动补帧，丢帧并不意味着动画没结束，只是保留的状态不同。

如果要实现逐帧动画，一般是用end + forward的搭配

animation: move 4s steps (1, end) forwards;

transition-delay：1s，延迟时间

三次贝塞尔曲线 cublc-bezier-timing-function

transition-timing-function：cubic-bezier（0.42，0，1，1）-> ease-in 由慢到快，四个参数是控制点的两个坐标

cubic-bezier（0，0，0.58，1）-> ease-out 由快到慢

cubic-bezier（0，0，1，1）-> linear 线性过渡

9. animation 动画

@keyframes 动画名称 {
    0% {left: -160px; font-size: 18px;}
    50% {left: 50px; font-size: 40px;}
    100% {left: 15px; font-size: 18px;}
}
//如果是0%到100%，可以用from to代替

兼容性：@-webkit- / -moz- / -o-keyframes xxx {...}

animation：name 10s ease-in-out

animation-name：@keyframes定义好的动画名称

animation-duration：10s，一个周期时间的长度

animation-timing-function：ease-in-out

animation-direction：normal / reverse / alternate（正反交替）/ alternate-reverse，是否反向播放动画

animation-fill-mode：none / forwards（动画结束之后，保持最后一帧的样式） / backwards（在等待的时间段内，样式为动画第一帧的样式） / both，动画在播放之前或之后，其动画效果是否可见

animation-iteration-count：infinite / 1（n），动画反复次数

animation-play-state：running / paused，经常用js设置

oBtn.addEventListener('click', funxtion (){
    if(!flag) {
        oBox.style.animationPlayState = 'paused';
        flag = true;
    } else {
        oBox.style.animationPlayState = 'running ';
        flag = false;
    }
}, false);

10. perspective 景深

perspective ：0 / none / 10px，定义3D元素距视图的距离，景深越大，元素反应出来的图像越大，但是景深超过观察者的话，我们就看不到元素了。值永远都是大于0的，跑到屏幕后面，我们也看不到

一般景深设置在最外面的盒子上就好了

有两种设置方式，一种是在父级元素上，transform-style: preserve-3d; perspective：500px，由于观察者只有一个视角，所以观察同一场景下的不同物体有不同的视角，哪怕都设置了一样的角度【看的是场景，场景变了，里面所有的子集元素都变了】

另外一种是在子元素（变形元素上），transform：perspective（500px）rotateX（-100px），指定几个子元素就有几个观察者，每个观察者都在所绑定的元素的c位，如果转同一个角度，看到的效果是一致的

这种方法会将被绑定的子元素平移过来，作为观察者的视角，默认是在c位观察，也可以指定位置，和transform-origin设置值的方式一样perspective-origin：left (center)/ 0% 50%，

backface-visibility：visibility / hidden，元素转到背面的时候可不可见（翻页、翻牌效果）

transform-style：flat（扁平化） / preserve-3d，子元素是否3d显示，否则只能二维运动（纸片），这个属性不能继承（爷爷辈及以上都不行）

3d效果就意味着必然存在元素放大和缩小的问题，元素放大就必然会溢出盒子，设置overflow：非visible 或者 clip：非auto 之后，3d效果就会失效

GPU硬件加速

当用3d效果的时候，渲染引擎不再是webkit渲染引擎了，而是GPU硬件加速，也就是说不再是CPU加速模式了，而是GPU硬件加速模式。

手机端CPU性能有限，当动画元素过多的时候，可能会出现闪烁的情况，所以我们可能会开启硬件加速模式，分担CPU的压力。

一般不建议这么做，因为GPU的使用会对手机的内存造成一定的负担，会造成手机很卡的情况，这就不是浏览器卡的问题了；并且GPU在大量计算，对接DOM树的时候，很可能会造成动画元素丢失的情况

要使用一定要测试，不能滥用

11. webkit私有属性

手机端基本都可以用！

-webkit-appearance：button（有很多属性，但是一般都用对应的标签和图标库，很少用）

-webkit-filter：blur（10%）模糊 | brightness（50%）亮度 | contrast（10%）对比度 | grayscale（10%）灰度 | hue-rotate（60deg）色相 | invert（10%）对比色 | sepla（10%）褐色程度 | url（path.svg#a）设置滤镜效果，通过svg可以实现之前的所有效果

-webkit-line-clamp：2，限制块级元素的文本行数

解决多行文本溢出的问题，要和其他属性结合使用（仅限手机端使用）

display：-webkit-box
-webkit-line-clamp：2
-webkit-box-orient：vertical

 第二行超出的部分显示小圆点，计算好行

-webkit-tag-highlight-color：color，覆盖并显示高亮颜色

-webkit-text-fill-color：color，文字填充色

background:-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font:bold 95px/1.231 georgia,sans-serif;
text-transform:uppercase;

-webkit-text-stroke：1px #f00，文本描边

-webkit-box-reflect：above | below | left | right （方向） 10px | 10%（位置，倒影到文字的间隔） -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3))（渐变色效果）

-webkit-font-smoothing：antialiased，抗锯齿

兼容：-moz-osx-font-smoothing：grayscale

12. 设备像素、设备独立像素和css像素

不同设备物理像素点的大小是不一样的，写网站的时候定义像素都是用同一个像素，不可能会给每一个设备不同的像素比，为了每个设备显示的大小比例一样，会经过一个底层的换算

设备像素（device pixel）：物理像素

设备独立像素：每个设备屏幕的像素大小（最终显示的结果）

css像素：设置的像素大小