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;