css:层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,解决了内容与表现分离的问题，通常存储在css文件中。
目录：
一：css属性，继承，引用等
1. css组成
css由选择器及一条或多条声明组成，每条声明由属性，属性值组成
- 属性：属性是制定选择符所具有的属性，它是css的核心，css2共有150多个属性
- 属性值：属性值包括法定属性值及常见的数值加.
- 单位，如25px，或颜色值等。
2. css继承
继承:父元素的规则也适用于子元素，例如：body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色
- 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform.
- 块状元素可继承：text-indent和text-align。
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
- 表格元素可继承：border-collapse。
3. css引用
- 浏览器缺省设置
- 外部样式表(使用link标签,主流用法)
- 内部样式表（位于 标签内部的style标签中）
- 内联样式（在 HTML 元素内部）
以上权重依次加强
二：选择器 回目录
1. 常用选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| *：通用选择器 | * | 选择所有元素。 |
| .class:类选择器 | .intro | 选择 class=“intro” 的所有元素。 |
| #id：ID选择器 | #firstname | 选择 id=“firstname” 的所有元素。 |
| element：元素选择器 | p | 选择所有 <p> 元素。 |
| element,element：并集选择器 | div,p | 选择所有 <div> 元素和所有 <p> 元素。 |
| element element：后代选择器 | div p | 选择 <div> 元素内部的所有 <p> 元素。 |
| element>element：子代选择器 | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 |
| element+element：相邻兄弟选择器 | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 |
| element1~element2：通用兄弟选择器 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 |
上面的选择器，除ID选择器外，都可以连用
例如.a1.a2:代表class是a1,并且class还有a2的元素,p.a3：代表选择class为a3的p标签
需要注意的是兄弟选择器 + 如果中间有标签相隔，则无法选中，这时可以使用通用兄弟选择器
2. 序选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :first-child | p:first-child | 选择属于其父元素第一个子元素每个 <p> 元素。 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 |
以上带有n的还可以取值odd(奇数标签)，even(偶数标签)，xn+y公式等
3. 属性选择器
| 选择器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| [attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 “flower” 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 “en” 开头的所有元素。 | 2 |
| [attribute^=value] | a[src^=“https”] | 选择其 src 属性值以 “https” 开头的每个 <a> 元素。 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素。 | 3 |
| [attribute*=value] | a[src*=“abc”] | 选择其 src 属性中包含 “abc” 子串的每个 <a> 元素。 | 3 |
属性选择器也常用于选择不同属性的input标签
4. 伪类
CSS 伪类用于向某些选择器添加特殊的效果
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :link | a:link | 选择所有未被访问的链接。 |
| :visited | a:visited | 选择所有已被访问的链接。 |
| :active | a:active | 选择活动链接。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
| :focus | input:focus | 选择获得焦点的 input 元素。 |
| :first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 |
| :first-line | p:first-line | 选择每个 <p> 元素的首行。 |
| :lang(language) | p:lang(it) | 选择带有以 “it” 开头的 lang 属性值的每个 <p> 元素。 |
| :root | :root | 选择文档的根元素。 |
| :empty | p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 |
| :target | #news:target | 选择当前活动的 #news 元素。 |
| :enabled | input:enabled | 选择每个启用的 <input> 元素。 |
| :disabled | input:disabled | 选择每个禁用的 <input> 元素 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 |
| :not(selector) | :not§ | 选择非 <p> 元素的每个元素。 |
| ::selection | ::selection | 选择被用户选取的元素部分。 |
- link,visited,active通常用于链接,hover 必须被置于link和visited之后才是有效的,active也必须放在hover之后
- 伪类名称对大小写不敏感
4. 伪元素
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :before | p:before | 在每个 <p> 元素的内容之前插入内容 |
| :after | p:after | 在每个 <p> 元素的内容之后插入内容 |
伪元素可以和正常元素一样设置宽高，浮动，定位等正常设置css样式，最主要的，可以通过content给伪元素添加内容
伪元素在开发中应用的较多的是小图标Iconfont
三：盒模型 回目录
所有HTML标签的宽/高/内边距/边框/外边距
1、边框属性：
边框：环绕在标签高度和宽度周围的线条
- bord-width:_;
- border-color:_;
- border-style:dashed(虚线)dotted(小圆点)/solid(实线)/transparent(透明)；
- 格式：连写 border：width style color；颜色可省略，默认为黑色，宽度和样式不可省略，
- 四条边分别连写border-top:width style color；border-left：…; …
- 圆角-border-radius：100px/50px;（水平/垂直弧度）
- 可以给每个角单独设置，也可以X轴和Y轴设置，也可以一块设置。
- 单位：px,百分比，50px/15px(水平50px，垂直15px)
- border-shadow：边框阴影
- box-shadow: 10px 10px 5px #888888;
- 共有5个值：偏移量、阴影大小、模糊度、颜色，inset还可以设置内阴影。注意：模糊度不能为负值，外阴影不用设置。
- 设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
- 可以设置多重边框阴影，实现更好的效果，增强立体感。
- border-image:边框图片 其中设置图片平铺的时候，可选参数stretch 为拉升，round 会自动调整缩放比例。
2、内边距：padding
- 连写：padding：上 右 下 左；
- 省略规律：上右下左>上右下（左右内边距一致），上右下左>上右（上下内边距相同，左右内边距相同），上右下左>上（四边内边距相同）
- 分开写：例：padding-top ：30px;
- 盒子增加内边距后，对应的宽度和高度也相应增加。
- padding取值不可以为负数。
- 给元素设置背景后，padding所占范围也会显示背景颜色
3、外边距：margin
- 与padding用法相同，无背景颜色
- 与padding不同的是、margin可以设置负值
外边距合并现象：
- 在默认水平方向上，两个标签之间的中的外边距会叠加
- 垂直方向上，两个标签之间的总外边距取值比较大的那个margin
4、盒子模型的宽度和高度
- 内容宽高：通过height/width设置
- 元素宽高：边框+内边距+内容宽高
- 元素空间宽高：外边距+边框+内边距+内容宽高
5、盒子box-sizing属性
- 定义：可以保证我们给盒子新增padding和margin之后，盒子的宽高不变。box-sizing:border-box/conten-box;
取值：
- border-box：元素宽高=边框+内边距+内容宽高（设置padding和margin之后不变）
- conten-box：元素宽高=width/height
盒模型容易出现的几个问题
1、margin塌陷
当两个盒子在垂直方向上设置margin值时，会出现塌陷现象。
解决方案主要包括:
- 给父盒子添加border;
- 给父盒子添加padding-top;
- 给父盒子添加overflow:hidden;
- 父盒子position:fixed;
- 父盒子display:table;
- 给子元素的前面添加一个兄弟元素 属性为content:"";overflow:hidden;
四：文本属性 回目录
1. 文本大小：{font-size:value;}
属性值为数值必须加单位，单位有px,pt,9px=12pt,1em=16px(默认大小);不加单位是默认单位为em;谷歌支持最小为12px,
2. 文本颜色：{color：颜色值}
- 可用英文单词表示，如red,green,blue,purple等。
- 10进制表示颜色，rgb三原色，如：color：rgb(255 233 176)；单元色取值范围为（0-255）
- rgba.加了一个a，代表透明度，取值（0-1）取值越小越透明，如：color：rgba(200,200,200,0.2);
- 16进制表示颜色（#xxxx xx或#x x x））模式。0-f颜色越来越浅。如：color：#ffee00.
3. 文字字体: font-family
- 格式：font-family:字体1，字体2，字体3；
- 当字体是中文字体时，或英文字体有空格，需要加双引号，如“楷体”、“Times New Roman”.若英文单词只有一个单词组成，不加双引号。
- 中英文字体同时存在、中文放在后面。
- 谷歌和火狐默认字体为“微软雅黑”，但可以设置，Windows中文版操作系统默认字体为宋体或者新宋体（Arial）
- 开发中常见字体：中文：宋体（Sim Sun）/黑体（SIMHeidi）、微软雅黑（Microsoft YaHei）。英文：“Time New Roman”/“Arial”/“Helvetica”
4. 文字加粗
- font-weight：bolder(更粗的)/bold(加粗)/normal(常规)/100-900;
- 100-400一般，500常规字体，600-900加粗字体，bolder和bold字体效果肉眼分不出来。
5. font-style：italic/oblique/normal(取消倾斜，常规显示)
6. 改变英文字体大小写
text-transform:none(常规)/capitalize（首字母大写）/uppercase（全大写）/lowercase（全小写）
7. 水平和垂直对齐：
- 水平对齐：text-align:left/right/center/jusify(两端对齐，IE,谷歌不兼容);
- 垂直对齐：vertical-align:top/middle/bottom;只能用于inline-block。 但可在表格里面直接设置（css中）。
8. line-height
- 单行文字的行高等于容器高度，文字居中对齐（文字在一行的中间位置）
- 单行文字的行高小于容器高度，文字可以设置容器中部以上任意高度
- 单行文字的行高大于容器高度，文字在容器中部以下人以高度，过大则超过容器。
- 常规格式：line-height:24px; 若不加单位，如line-height:2;表示行高是文字像素的2倍
9. 设置小型大写字母：
font-variant:normal/small-caps(小型大写字母)。适用于小型字母。
10. font连写
font:style variant weight size/line-height family;（倾斜 小型大写字母 加粗 字号/行高 字体）
必须有文字大小和字体，前面的可以省略size和family不可和其他属性位置互换
11. 文本修饰：
- text-decoration：none(无下划线)/underline（有下划线）/overline（有上划线）/line-through删除线
- 上下和中间划线可以同时存在。text-decoration：underline lin-through overline;中间用空格隔开。
12. 首行缩进：
- text-indent：value；取值可以负值，而且只对第一样起作用。
- 单位：em,px,百分比
13. 字间距
letter-spacing ，控制英文字母和中文字之间的距离。
14. 词间距
word-spacing：value;控制英文单词之间的距离。
15. 文本阴影
语法：text-shadow:2px 2px 2px red;
(水平阴影偏移，垂直阴影偏移，阴影模糊距离，阴影颜色，和box-shadow用法相同)
说明：水平、垂直阴影的位置允许负值 可进行多阴影设置
16. 强制长单词换行
- word-break：
- break-all（长单词到页面尾处强制换行）
- keep-all(默认长单词到半角空格或连续符号处换行);
17. 文本溢出属性:text-overflow
text-overflow:clip(修剪文本)/ellipsis(显示省略符号来代表被修剪的文本)/string (使用给定的字符串来代表被修剪的文本)
文本溢出用省略号显示
- overflow: hidden;
- text-overflow: ellipsis; //溢出部分已省略号结尾
- white-space:nowrap; //white-space指定文字是否换行
18. @font-face(自定义设置字体)
把自己定义的Web字体嵌入到你的网页中
@font-face {
font-family: <YourWebFontName>; // 自定义的字体名称
src: <source> [<format>][,<source> [<format>]]*;
// 自定义的字体的存放路径，可以是相对路径也可以是绝路径,
// format:此值指的是你自定义的字体的格式，主要用来帮助浏览器识别
[font-weight: <weight>];
[font-style: <style>];
[font-stretch: <stretch>];
}
示例
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
使用时在font-family可直接用icomoon
扩展1：关于中文字体文件过大问题，可登录“有字库”网站自定义字体，
例如只有几个字用特殊字体，可用css引入方式，
该网站会只定义这几个字的字体，引入然后直接用即可。
但如果字较多时，也可引用script，按照说明引用即可。
字体图标可以在“阿里图标库” iconfont
五：背景属性 回目录
1、背景颜色{background-color：颜色值；}（背景颜色和color里的颜色用法相同）
2、background-image:背景图片设置
- background-image:url(背景图片的路径及全称)；
- 路径可以是本地路径，网络路径，也可以是base64数据
背景图片显示原则
- 图片尺寸等于容器尺寸，正好显示在容器中
- 图片尺寸大于容器尺寸，显示元素范围内的背景图
- 图片尺寸小于容器尺寸，默认平铺，直至铺满元素
3、背景图片的平铺属性
background-repeat:no-repeat/repeat/repeat-x/repeat-y;
默认水平垂直都平铺
4、背景图片的位置
- background-position:值1 值2；数值可取负值
- 水平对齐：left/center/right(或数值、百分比)（值1）
- 垂直对齐：top/center/bottom(或数值、百分比)（值2）
- 应用场景：当图片比较大的时候, 可以通过定位属性保证图片永远居中显示
精灵图：背景位置可与精灵图连用，之前很多网页上的小图标通常整合到一张图片中，通过背景图片与位置显示相应的小图标，可以减少请求。现在的图标通常是使用iconfont来显示，更加简单方便。
5、背景图片的固定
- background-attackment:scroll(滚动)/fixed(固定)；
- 背景图片一旦固定，就脱离了文档流，相对于body固定,但只在设置背景标签中显示。
6、背景属性缩写：
- backgroud:url(背景图片路径及全称) no-repeat center top #f00;(例)
- 缩写属性值可以改变顺序，可以省略任意属性，但位置的两个属性不能改变顺序。
7、常用图片格式（压缩图片）
- .jpg:有损压缩格式，靠损失图片本身的质量来减少图片的体积，适用于颜色丰富的图像：
- .gif:有损压缩格式，考损失图片的色彩数量来减少图片的体积，支持透明，支持动画，适用于颜色数量较少的图像
- .png:有损压缩格式，损失图片的色彩数量来减少图片的体积，支持透明，支持动画，是fireworks的原文件格式，适用于颜色数量较少的图像。
8、c3新增属性
- background-size：right bottom, left top; 规定背景图片尺寸（px,百分比，单词:cover,contain）
- background-origin：no-repeat, repeat; 规定背景图片的定位区域。 (content-box/padding-box/border-box)
- background-clip:规定背景图片的绘制区域(border-box/padding-box/content-box)
9、渐变
渐变：Gradients，以让你在两个或多个指定的颜色之间显示平稳的过渡，至少要写两个及两个以上颜色。作用范围是background-image
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 语法：background: linear-gradient(direction/angle, color-stop1, color-stop2, …);
- 例如： background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
- direction，可以是方位名词，例如to right，to bottom，to right bottom(从左上角到右下角渐变。)
- angle:自定义水平线和渐变线之间的角度，逆时针方向计算。0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
- color可以是颜色单词，rgba，rgb，但至少要写两个
- repeating-linear-gradient：重复线性渐变
- 颜色后面可以加个百分比，例如
background: repeating-linear-gradient(red, yellow 10%, green 20%);
- 颜色后面可以加个百分比，例如
- 径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, …, last-color); - repeating-radial-gradient：重复的径向渐变
六：浮动与清除浮动 回目录
float:left(左浮)/right(右浮)/none/inherit
元素浮动后的特性
- 脱离文档流：当一个元素浮动之后，这个元素看上去就像被在标准流中删除了一样，浮动在剩余元素的前面，后面的元素会取代它的位置。
- 排序规则：相同方向上，先浮动元素在前，后浮动元素在后，不同方向上，左浮找先左浮，右浮动找先右浮。
- 浮动元素贴靠现象：
- 如果父元素的宽度可以显示所有浮动元素，则浮动元素并排显示，
- 如果父元素的宽度不够，不足以显示所有浮动元素，则会从最后一个元素开始向前靠。
- 如果贴靠前面的元素依然不能显示，则会贴到父元素左边或右边。
- 字围现象：浮动元素不会挡住没有浮动元素的文字，没有浮动元素的文字会自动给浮动元素让位置
- 高度问题：标准流中内容高度可以撑起父元素的高度，浮动流不可以。
- 排版：
- 浮动流只有水平排版，元素左对齐或者右对齐
- 浮动流没有居中对齐，不能用margin：0 auto;不区分块级/行内块级
- 浮动流都可以设置宽高，和标准流中的行内块级很像。
清除浮动
清除浮动原因：子元素设置浮动而父元素未设置浮动，子元素脱离文档流，无法撑起父元素高度，如果不清除浮动，父元素没有高度
清除属性 clear：none/left/right/both
- none:默认值。允许两边都可以有浮动对象。
- left：不允许左边有浮动对象
- right:不允许右边有浮动对象
- both：不允许有浮动对象
清除浮动应该在浮动元素的下一个元素上设置
万能清除浮动大法
.clearfix::after{
content:"";
display:block;
clear:both;
}
七：元素类型转换 回目录
display：block/inline/inline-block（img,input）/none/list-item(li)/table(table)/table-cell(td)/table-header-group(thead)/table-footer-group(tfoot)
常用的元素类型可分为:块状元素，内联元素，可变元素，c3还有flex属性，会在后面单独来讲
1.display:block; 块状元素（block element）
- 块状元素前后带有换行符，常用的块状元素包块div,dl,dt,dd,ol,ul,li,(h1-h6),p,form,hr,table,tr,等；
- 块状元素都可以定义自己的宽度和高度，一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素
- p标签(段落标签)是一个块元素，但一般只作为内联元素（inline element）的容器；
2.display:inline;内联/行内元素（inline element）
- 内联元素的表现形式是始终以行内逐个进行显示；
- 常见的内联元素如：a,span,i,em,strong,b,u,del,s,input,img,br,sub,sup等
- 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
- 内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，padding,border,margin上下的值没有实际功能;
3.display:inline-block;可变元素（行内块级元素）
- 例如img/input/select/textarea/object:默认有大小，可以设置宽高
- 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
- 例如浏览器会根据img标签的src属性值来读取图片信息并显示出来
- 根据input标签的type属性来决定是显示输入框还是单选按钮等。
- 可变元素支持垂直对齐属性{vertical-align:top/bottom/middle;}
- 常用来让不同大小的图片在div中垂直居中
4.display:none
- 隐藏元素， 此元素不会被显示，也不占据空间，但是会在dom数中存在,也可用js获取到
与visibility:hidden的区别
visibility: hidden;不会让元素从dom树消失，会继续占据空间，只是内容不可见;
display: none;是非继承属性， 子孙节点消失由于元素从渲染树消失造成， 通过修改子孙节点属性无法显示；
visibility: hidden;是继承属性， 子孙节点消失由于继承了hidden， 通过设置visibility: visible;可以让子孙节点显示; 修改常规流中元素的display通常会造成文档重排。 修改visibility属性只会造成本元素的重绘。
5.子元素垂直居中
(1)将父元素的元素类型转换成table-cell,然后设置verticl-align:middle;即可垂直居中
(2)在图片和元素前面添加空的span标签，然后将span属性设置成display：inline-block；vertical-align:middle;width:0;height:100%;属性；图片也许需要设置vertical-align:middle;和span互相进行垂直居中。
八：定位 回目录
语法：position：static /absolute/relative/fixed/inherit/sticky
取值：
1.static：默认值，无特殊定位，对象遵循HTML原则；
2.relative相对定位
- 相对于自己以前在标准流中的位置来移动，不脱离文档流
- 依据right，top，left，bottom等属性在正常文档流中相对自身位置进行偏移，但同方向上的属性只能用一个；
- 相对定位区分元素类型，给其设置padding或者margin也会影响到正常文档流
- 其层叠通过z-index属性定义.
- 相对定位通常用于给绝对定位的子元素当锚点
3.absolute：绝对定位
- 相对于body或者某个定位流中的祖先元素来定位，其祖先元素必须是absolute/relative/fixed/sticky中的一种才能作为锚点
- 绝对定位脱离文档流，不区分元素类型，其宽高若是不设置，将有内容撑开，并且不受父元素的padding影响
- 可通过使用left/right/top/bottom等属性调整其位置，若上面属性都设置为0，并设置margin:auto;可使其相对于有定位流的祖先元素水平垂直居中
4.fixed：(固定定位)
- 类似于绝对定位的方式，但是它的参照物是浏览器的“可视”窗口
- 固定定位脱离标准文档流，且不区分元素类型，其位置不随文档的滚动变化
- 固定定位通常用于导航栏，有部分功能的尾部，以及侧边导航栏，也用于侧边广告
5、inherit:规定元素的定位方式继承父元素的position的属性值。
6、sticky （粘性定位）会相对于有定位的父元素固定定位
注：任何元素设置过脱离文档流的定位方式时，就有了块元素的显示特性
当一个块状元素设置了绝对定位，固定定位，浮动后，元素的宽度不再是父容器的宽度，而是内容撑开的宽度，如果你一个内联元素设置了绝对定位，浮动后就会有块元素的特点。
7、定位元素的层级属性
-
z-index : auto |number 设置定位对象的层叠顺序。
- auto：默认值。遵循结构，后写的定位元素层的顺序靠上。
- number:无单位的整数值。可为负数，数值越大，层的顺序越靠上
-
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。
-
若一个父元素有定位，而想让其子元素在其下面一层，则父元素z-index不设置，子元素z-index为负值即可。
-
z-index通常应用与定位元素的覆盖关系, 例如网页中后面的定位元素不能覆盖前面的导航条通栏
九：2D/3D转换transform 回目录
- transform 适用于2D或3D转换的元素
- transform-origin 允许您更改转化元素位置
2D转换
- translate(x,y)：平移
- rotate(x,y)：旋转
- scale(x,y)：缩放/扩大
- skew(x,y)：斜拉
- 以上所有属性都可以单独给X轴和Y轴设置，例如translatex()
- 如果没有单独设置，并且括号内只有一个值，就是X轴和Y轴设置一样的值。
- transform-origin()：设置旋转中心，默认是旋转放大是在元素中心
- 值可以设置为百分比%，具体数值px，center，top，left等方位单词。
3D转换
- 实现3D效果必须加上transform-style:preserve-3d;属性，表示所有子元素在3D空间中呈现。
- 默认值为flat，表示所有子元素在2D空间中呈现。
- 3D转换属性有translate，rotate，scale，不过每个都多了一个Z轴，连写方式为translate3D(x,y,z),分开写为translateX(),translateY(),translateZ()
- perspective:500px; 规定 3D 元素的透视效果。从距离元素舞台500px看像素。
- perspective-origin:50% 50%(默认); 规定 3D 元素的底部位置。可选值为百分比，数值，方位单词。
连写：transform: translate(<translation-value>[,<translation-value>]?) rotate(<angle>) scale(<number>[,<number>]?) skew(<angle>[,<angle>]?);
需要注意的点是transform连写时，按照代码的先后顺序执行变形
十：过渡transition 回目录
-
transition-property 规定应用过渡的 CSS 属性的名称。
- none:没有属性有过渡效果
- all：所有属性都有过渡效果
- property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
-
transition-duration 定义过渡效果花费的时间。默认是 0。
单位：s(秒)- JavaScript 语法： object.style.transitionDuration=“5s”
-
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
- linear 规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- 可去http://cubic-bezier.com/网站自定义cubic-bezier，查看效果等。
-
transition-delay 属性指定何时将开始切换效果。单位是S
- JavaScript 语法： object.style.transitionDelay=“2s”
-
连写：transition: transition-property, transition-duration, transition-timing-function, and transition-delay。
十一：动画animation 回目录
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
动画常用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
在无限循环或者数次循环中一般为了完整统一的动画效果，0%和100%一般效果是相同的，回归的。
@keyframes 规定动画。
@keyframes mymove{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@keyframes mymove{//只改变以西时可以用from to
from {top:0px;}
to {top:200px;}
}
- animation-name 规定 @keyframes 动画的名称。
- animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
- animation-timing-function 规定动画的速度曲线。默认是 “ease”。
- animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- animation-delay 规定动画何时开始。默认是 0。
- animation-iteration-count 规定动画被播放的次数。默认是 1。
- animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
- animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
- 简写：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
3689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
