JS-CSS3
Posted 小海_macro
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-CSS3相关的知识，希望对你有一定的参考价值。
2d
transition: all 0.5s;
/* 旋转基点 支持设置 10px 20px*/
transform-origin: left top; //以左上角为基点
transform: rotate(90deg); //旋转90度
// 动画
transition:all .6s;
//放大
transform:scale(1.2)
//平移
transform:translate(100px,100px);
transform:translate(-50%,-50%)
//旋转
transform:rotate(190deg);
//注意覆盖问题：合并写；顺序：平移 旋转 放大缩小
==================================================
动画：较过渡更能控制细节
-定义动画：from = 0% ;to=100%
@keyframes scale_{
0%{
transform:scale(1);
}
25%{
transform:scale(1.2);
}
50%{
transform:scale(1.2);
}
75%{
transform:scale(1.2);
}
100%{
transform:scale(1);
}
}
-调用动画：
animation:scale_ 2s;
等效于：
animation-name:scale_;
animation-duration:2s;
animation-timing-function:cubic-bezier();//linear
//步长
steps(N):
animation-delay:1s;//延迟
animation-iteration-count:2;//重复动画次数 //infinite;
animation-direction:alternate;//方向播放
animation-fill0mode:backwards;//返回初始化位置 //forwards:留在结束位置
animation-play-state:paused;//暂停
//不换行
white-space:nowrap;
overflow:hidden;
transtion:all 1s;
3d
3D:块元素，行内元素无效
垂直屏幕向外：正向；向内为负向。
perspective:500px;//透视
transform: translateX(100px) translateY(100px) translateZ(100px)
//3d位移等效
transform:translate3d(100px,0,0);
//旋转
transform:rotateX(60deg); //往里转为正值
transform:rotateY(60deg); //往里转
transform:rotateZ(45deg); //顺时针转
//等效于
transform:rotate3d(x,y,z,deg);
ex: transform:rotate3d(1,0,0,60deg);
======
perspective:500px; //一般放在父级容器上，并且值得取值范围：不是越大越好。一般500左右+-200
//控制子元素，是否开启三维立体空间。往往放在父亲元素上生效
transform-style:preserve-3d;
默认值：transform-style:flat;
过渡：作用到变化对象的身上 //CSS跟js同样都可以实现；根据实际开发调整。
第一个参数 表述变化的属性
第二个参数 表述持续时间
第三个参数 表述运动曲线
第四个参数 延迟
transition:width 1s ease 1s,height 1s;
transition:all 1s;
width/height
muted 静音播放
poster 视频封面[加载等待的画面图片]
preload 取值：noneauto[预先加载]----如果是自动播放，则该属性失效
常见支持格式：mp4 ogg WebM
// 支持自动播放 视频<!-- Simple video example --> <video src="videofile.ogg" autoplay poster="posterimage.jpg"> 抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a> 并用你喜欢的播放器观看! </video>// 支持字幕 <!-- Video with subtitles --> <video src="foo.ogg"> <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"> </video>
选择器权重问题：
继承或* 0 0 0 0
标签选择器 0，0，0，1
类选择器、伪类选择器 0，0，1，0
id选择器 0，1，0，0
行内样式 1，0，0，0
伪元素应用：
/* before;after */
/* 应用场景：
加标签，图标，清除浮动
字体图标 */
.box::before {
/* content 必选属性 */
content: ‘before‘;
display: inline-block;
width: 80px;
height: 80px;
background-color: #ccc;
}
创建的元素属于行内元素，创建出来的元素在dom中查找不到
CSS3选择器
<input type="text" name="" id="" disabled>
input[disabled] {
background-color: red;}
div[id^="box"] {} //以box开头的id的div
[id$="1"] {} //id名称以1结尾的元素
[class*="p"] {} //class类名包含p的类名
ul li:first-child {}
ul li:last-child {}
ul li:nth-child(3) {} // 第3个孩子
ul li:nth-last-child(2) {} //倒数第2个孩子
ol li:nth-child(odd/even) {} //偶数或者奇数位儿子
CSS的元素显示模式
1.块级元素
div、p、li、dt、dd +++ h1-h6...
独占一行
设置宽高起效果
不设置宽度，宽度默认值是父亲的百分之百
2.行内元素(自己实验总结)
span em i strong b a ...
可以和其他行内元素并排
回车换行---空格
设置宽高无效
宽高由其子元素决定
3.行内块元素
img、input
设置宽高
可以与其他行内元素或行内块元素并排
display属性，改变元素的属性
display:inline --行内元素
display:block --行内块元素
display:inline-block --行内块元素
display:none --隐藏
text-align:文本对齐，水平方向
line-height:height:垂直局中
背景定位
background-image:url(p.jpg);
background-repeat:repeat-x/repeat-y/no-repeat;
background-position:100px 100px;//左上角为原点
background-position:center center;// left center right || top center bottom
让背景图固定：
background-attachment:fixed
background: #ccc url(p.jpg) no-repeat center center;
类似：font:italic bold 12px/20px arial,sans-serif;
rgba(255,255,255,0~1):0~1，表示透明度；filter:0.5透明
CSS:cascading style sheet————层叠样式表，负责页面的表现，
给页面标签增加样式，如字体颜色、宽高、背景色。。。
引入CSS
行内式
内嵌式——在head标签内部放置标签
<style></style>
选择器
外链式——<link>
选择器
选中我们要设置样式的标签
-标签选择器（标签名）
特点：选中页面所有的div
div {
}
特点：选中页面所有的div
color 字体颜色
font-size 字号
-id选择器
先给作用的元素设置id，通过#id_name 选择
特点：选中唯一的（唯一性）
-类选择器
.类名{
}
给需要设置该类样式的标签，添加class属性="类名"
模具的思想——尽量原子化
特点：一般情况把某一类样式定义一个类！复用！
-通配符选择器———代表所有的元素
* {
}
span等套一样
font-size:字号
color:字体颜色
div>p {
div的亲儿子p
}
div p {
div 的后代选择器
}
交集： p.p3 \ p#p3
并集：p,span{
}
//顺序不能乱
a:link { //未访问过的链接
text-decoration:none;
color:rgb(255,0,0);// #ccc灰色； 333 浅灰 666 深灰 999
}
a:visited { //访问过的链接
color:
}
a:hover { //鼠标放入超链接时状态
}
a:active { //鼠标激活，按住不放
}
.nav a {
text-decoration:underline;
}
font-family:Arial,"微软雅黑","黑体" //设置字体
"Microsoft YaHei"
font-style:italic; //文字样式：正常、倾斜
<em></em> //默认是：文字倾斜的
font-weight 400（正常 normal） ~ 700（最粗 bold） //字体加粗
综合性写法：字号、字体必须的
样式 粗细 字号/行高 字体
font:italic 700
表单：
<!-- 如果要提交到服务端，一定要写name -->
text-align:center; 让文本、行内元素、行内块元素在盒子中水平居中
margin:0 auto; 水平局中，让有宽度的块级元素水平居中。（行内元素无效：span）
对行内元素，设置margin-top、bottom无效，左右可以设置。
如：span,margin-left:auto;margin-right:auto; 无效
可以使用：text-align:center;
padding-left ight：生效；但是padding-topottom:会有问题
visibility: hidden; //不可见
visibility: visible; //可见
四个三角形：
border:10px solid red;
width:0;
height:0;
color: red transparent transparent transparent;
border-top-right-radius:50%;
border-bottom-right-radius:50%;
text-indent: 2em;
em 是 element 的意思。（element -- 单元，元素）。
如果copy程序里定义了根元2113素 font-size （字体大小） 这个量，那么 定义 间距等别的量 时 用 em，就表示 等于 几倍 根元素大小。
例如： line-height: 1.2em -- 行高 等于 现用字体大小的 1.2 倍。
本质都是触发BFC
1. 上下两个相邻的块级元素，假如上面的元素有margin-bottom，下面的元素有margin-top，此时会发生合并。
合并的值以较大的值为准。
---建议设置一个
2. 父子嵌套的元素，子元素的上边距会和父亲的外边距合并。以最大值为准。
相对定位：标准流不脱标
元素，位置微调(稳定)——相对浮动{往往配合绝对定位使用}
1.相对于自己标准流的位置进行局部的位置微调
2.相对定位元素还是标准流元素
-posiiton: relative;
<!-- 正值：相反方向定位 -->
-left:20px;<!-- right 正好相反 -->
-top:20px; <!-- down 正好相反 -->
绝对定位：标准流脱标: margin:0,auto;/*失效*/
position:absolute;
1.一个绝对定位元素是body儿子，此时参考点就是body左上角
百分比：50%；设置居中。
top:50%;
margin-top:-自身高度一半；
left:50%;
margin-left:-自身宽度一半；
固定定位：脱标
position:fixed
-固定定位的元素与父级元素无关！
-固定定位的参考点：当前可视浏览器窗口作为参考点
left,right同时存在，往往left生效。
标准流中：父子margin塌陷。
****固定定位、绝对定位、浮动：均可以解决父子margin塌陷问题【相对定位不可以】
---borderpaddingoverflow:hidden
z-index 只对定位的元素有效
取值是一个整数，可以是0或者负数
默认值是0，数字越大，代表盒子越靠上！
如果值相同，看h5代码结构顺序，
//
div span:first-of-type {
color: purple
}
div span:last-of-type {
color: purple
}
span:first-child {
background-color: yellow;
}
以上是关于JS-CSS3的主要内容，如果未能解决你的问题，请参考以下文章