html5+css-06（pink老师课程笔记）
HTML5（最常用）
新增标签
语义化
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
header：头部 nav：导航 article:内容
section:定义文档某个区域,块级 aside：侧边栏 footer:尾部
主要针对搜索引擎
可多次使用
在IE9中需要转化为块级标签
多媒体
audio：音频(.mp3)
<audio src="文件地址" controls="controls"></audio>
-
autoplay：音频就绪后马上播放
-
controls：向用户显示控件，比如播放按钮
-
loop：当音频结束后重新开始播放
video：视频（尽量使用.mp4）
与audio基本一致
-
autoplay： 视频就绪自动播放
-
controls：向用户显示播放控件
-
width ：设置播放器宽度
-
height ： 设置播放器高度
-
loop：播放完是否继续播放该视频，循环播放
-
preload
auto（预先加载视频）
none（不应加载视频） -
规定是否预加载视频(如果有了autoplay 就忽略该属性）
-
muted：静音播放
新的表单
-
email
-
url
-
number
-
range
-
time
-
Date pickers (date, month, week, time, datetime, datetime-local)
-
search
-
tel
-
color
限制输入的元素
新的表单属性
新的 form 属性：
- autocomplete
- novalidate
新的 input 属性：
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple ：提交多个文件
- pattern (regexp)
- placeholder ：提示文本
- required ：必须书写，不能为空
CSS3
属性选择器
选择具有type属性且属性值为text的input元素
input[type=text] {
color:pink;
}
选择具有type属性且属性值为text开头的input元素
input[type^=text] {
color:pink;
}
选择具有type属性且属性值为text结尾的input元素
input[type$=text] {
color:pink;
}
选择具有type属性且属性值为包含text的input元素
input[type*=text] {
color:pink;
}
属性权重与类选择器相同，10
结构伪类选择器
E：first-child父元素中第一个E元素
ul li:first-child
E：last-child父元素中最后一个E元素
E：nth-child（n）父元素中一个或多个E元素
ul li:nth-child(2)第二个
ul li:nth-child(even)偶数选出来
ul li:nth-child(odd)奇数选出来
ul li:nth-child(n)所有
ul li:nth-child(2n)偶数
……
n+5:从第5个开始
-n+5：前5个
E：first-of-type:指定类型E的第一个
E：last-of-type
E：nth-of-type(n)
伪元素选择器
权重为1
：：before元素内部的前面插入内容
：：after后面
语法：element：：before{}
必须具有content属性
属行内元素
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\ea50';
font-size: 20px;
}
清楚浮动
第一种
.clearfix::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
第二种
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
盒子模型
margin和padding会撑大盒子
box-sizing：content-box|border-box
content-box（默认），会撑大
border-box则不会撑大
照片模糊处理
filter：burl（5px）;数值越大越模糊
calc函数
进行计算
子盒子永远比父盒子小30px
width：clac（100%-30px）;
过渡
transition：属性 花费时间（0.5s） 运动曲线（ease） 何时开始（默认0）
div {
position: relative;
width: 400px;
height: 420px;
border: 5px solid orange;
background-color: pink;
box-sizing: border-box;
transition: width 1s;
}
div:hover {
width: 800px;
}
多个属性
div {
position: relative;
width: 400px;
height: 420px;
border: 5px solid orange;
background-color: pink;
box-sizing: border-box;
transition: all 1s;
}
div:hover {
width: 800px;
height: 800px;
background-color: blue;
}
谁做过渡给谁加transition
2D转换(transform)=变形
2维坐标
x轴：水平向右
y轴：垂直向下
translate移动
类似与定位
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
2D 转换中的移动，沿着 X 和 Y 轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
对行内标签没有效果
子盒子在父盒子中水平居中
方法一：position+margin
方法二：position+translate(-50%,-50%)
rotate旋转
transform:rotate(度数) 如：rotate(45deg)
顺时针为正数，逆时针为负数
默认中心点为元素的中心点
2D转换中心点transform-orgin
transform-origin: x y;
空格隔开
方位词或像素
默认中心点(50%,50%)
鼠标经过div里面的before出现——div:hover::before{ }
scale缩放
transform:scale(x,y);
-
逗号隔开，数字不加单位（倍数）
-
transform:scale(2,2) ：宽和高都放大了2倍
-
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
-
transform:scale(0.5,0.5)：缩小
-
可设置缩放中心
鼠标变小手——cursor：pinter；
综合写法
-
同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，
-
其顺序会影转换的效果。（先旋转会改变坐标轴方向）
-
当我们同时有位移和其他属性的时候，记得要将位移放到最前
animation动画
两步走：定义；调用
keyframes定义动画
@keyframes move {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
- move——动画名称
- 0%——动画开始
- 100%——动画结束
动画序列——0% 100%
也可使用from 和to
多个序列（0% 25% 50% 75% 100%）
百分比为时间的划分（整数）
元素使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 5s;
}
常用属性
@keyframes ——动画。
animation—— 所有动画属性的简写属性，除了animation-play-state属性。
animation-name—— @keyframes动画的名称。（必须的）
animation-duration—— 动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function——动画的速度曲线，默认是“ease”。linear-匀速
animation-delay—— 规定动画何时开始，默认是0。
animation-iteration-count——动画被播放的次数，默认是1，还有infinite（无限）
animation-direction ——动画是否在下一周期逆向播放，默认“normal“,alternate逆播放
animation-play-state ——动画是否正在运行或暂停。默认是"running",还有"paused"。
animation-fill-mode ——动画结束后状态，保持forwards回到起始backwards
速度曲线animation-timing-function
linear——匀速；ease——以低速开始，然后加快，在结束前变慢
ease-in——以低速开始；ease-out——以低速结束
ease-in-out——低速开始和结束
steps(步长)——分几步完成动画
animation: bear 1s steps(8) infinite, move 8s forwards;
综合写法
animation: move 25s linear 2s infinite alternate;
- 暂停动画+鼠标经过
- 动画来回走——alternate
- 动画结束后，停在结束位置——forwards
- 不包括animation-play-state
- 前两个不可省略
3D转换
z轴:垂直屏幕向外
3D位移: translate3d(x,y,z)
translform:translateX(100px)：仅在x轴上移动
translform:translateY(100px)：仅在Y轴上移动
translform:translateZ(100px)：仅在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
透视: perspective
产生3D效果；写在被观察盒子的父盒子里面；透视越小，盒子越大
- d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
- z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大。
3D旋转: rotate3d(x,y,z)
transform:rotateX(45deg)：沿着x轴正方向旋转 45度
transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
正值：从上往里转(X);从右往里转(Y)；顺时针(Z)
transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
3D呈现 transfrom-style
控制子元素是否开启三维立体环境。(写给父级，影响子盒子)
默认不开启，开启为preserve-3d
案例-翻转盒子
<div class="box">
<div>一万元</div>
<div>10000元</div>
</div>
.box {
/* perspective: 500px; */
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
text-align: center;
line-height: 200px;
color: #fff;
}
div:first-child {
background-color: orange;
transform: translateZ(1px);
}
div:last-child {
background-color: purple;
transform: rotateY(180deg);
}
私有前缀
-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性
