前端知识每日3+1 day02

---

一、html的元素有哪些（包含H5）？

块级元素

(display:block)
占据父元素整个空间，会新起一行

<div>,<p>,<h1>~<h6>,<ol>,<ul>,<li>,<dl>,<table>,<form>,<header>,<footer>,<aside>,<nav>,<section>,<artical>

行内元素

(display:inline)
只占据标签边框包含的空间，设置宽高和magin，padding无效

<a>,<span>,<textarea>,<input>,<button>,<lable>,<em>,<i>,<b>,<small>,<strong>,<select>,<img>

H5新标签

header --- 头部标签

nav --- 导航标签

article --- 内容标签

section --- 块级标签

aside --- 侧边栏标签

footer --- 尾部标签

音频 -- audio

视频 -- video

input属性

二、CSS3有哪些新增的特性？

1.文本阴影text-shadow

text-shadow:偏移量x 偏移量y 模糊度 颜色；

注意：

水平偏移量： 正值向右，负值向左

垂直偏移量： 正值向下，负值向上

模糊度不能为负数

可设置多个text-shadow，每个用逗号分隔

例子:text-shadow:1px 2px 3px red,2px 3px 4px pink;

2.边框圆角 border-radius

border-radius:10px 10px 10px 10px/5px 5px 5px 5px;

前面四个是横轴半径，后面四个值是纵轴半径，如果后面四个值不写，纵轴半径默认等于横轴半径

3.盒子阴影 box-shadow

水平偏移量 +向右 -向左

垂直偏移量 +向下 -向上

模糊度不能为负数

inset可设置内阴影，box-shadow：inset 1px 1px 1px red;

设置box-shadow不会改变盒子大小，不会影响兄弟元素布局

可设置多重边框阴影，增强立体感

4.边框图片border-image

路径：border-image-source:url();

图片拆分：border-image-slice:30 30 30 30;//上 右 下 左

border-image-slice:30 fill;

以上，会将中间裁掉的部分在盒子内平铺

图片拉伸：

border-image-repeat:stretch //默认的拉伸效果

repeat //平铺，不完整显示

round //完整的平铺

边框图片宽度：

border-image-width:并不能改变盒子大小，只能改变边框图片大小

最终的连写：

border-image:url() slice/width repeat;

5.背景大小 background-size

作用：设置背景图片大小

设置方式：background-size:200px 200px; //具体尺寸

 100%  100%; //比例

 100%  auto; //自适应

  auto   100%; //自适应

 cover; //铺满父容器

contain //在父容器中完整显示

6.设置背景原点background-origin

作用：设置背景图片原点位置，这个原点，指的是图片左上角

也就是重新定义了background-position的显示位置

应用background-origin:content-box； //以内容左上角为原点

padding-box; //默认选项，以内边距为原点

border-box; //以外边距为原点

7.background-clip背景区域裁切

（也就是让图片在什么区域内显示）

作用：裁切背景，移动端应用的多

应用：background-clip:padding-box; //padding以外的部分会被裁掉

 border-box; //border以外的部分会被裁掉

 content-box; //content以外的部分会被裁掉

8.多背景background: url() ,url(),url();

注意：不同的背景，用逗号分隔

设置多背景的时候，不能再设置背景颜色（不能连写），如有需要，聚单独写background来设置颜色

9.渐变

线性渐变：background-image:linear-gradient(渐变方向开始和结束状态，渐变范围（距离）)

渐变方向：可以是具体方向：to top

to bottom

to left

to right

也可以是角度：90deg

例子：

background-image:linear-gradient(

to right, //从左向右

red 20%, //开始颜色是红色，从盒子宽度20%的位置开始变

green //结尾颜色是绿色

);

注意：如果没有设置background-size，百分比是以盒子宽度为参照设置的，否则是以background-size为参照设置的；

10.径向渐变background-image:radial-gradient(圆点，开始、结束)

注意：径向渐变的百分比是以设置的半径为参照的

圆心位置设置：关键词：center/left…

具体值：第一个值代表水平方向，第二个垂直，第二个如果不设置，默认Center

例子：

background-image:radial-gradient(

100px 50px at center, //第一个是水平半径，第二个是垂直半径，第三个是圆心，意思是在盒子中心

red 20%, //在圆的半径20%的位置开始变

green

);

11.过渡trasition

11.1补间动画

过渡属性：transition-property:all //默认全部

width

htight

…多个属性用逗号分隔

过渡执行总时间：transition-duration: ;

动画执行速度（类型）transition-timing-function:linear //匀速

ease

ease-in

ease-out

ease-in -out

动画延时时间：transition-delay: ;

注意：transition一般放在开始状态里。

11.2帧动画

12.2D转换

transform:translate(x,y) //第一个值是水平，第二个垂直

旋转：transform:rotate(deg); //正值是顺时针，负值是逆时针

缩放：trasorm:scale(倍数）； //整数（>1）放大，小数（<1）缩小

倾斜:transform:skew(deg,deg); //水平，垂直

旋转原点：transform-origin：center; //默认

left;

right;

bottom;

top;

13.3D转换

左手法则：左手握住旋转轴，拇指指向旋转轴方向，四指指向的方向就是正方形。

13.1 3D转换分类

transform: translateX() translateY() translatrZ(); //位移

例子：

transform:translateX(100px) translateY(100px) translateZ(100px);

transform:rotateX() rotateY() rotateZ(); //旋转

transform:scaleX() scaleY() scaleZ(); //缩放

14.透视 perspective

作用：辅助了解3D效果，不是必须的步骤

取值：600-1200px是人眼最舒服的状态

设置方式：将该属性作为父元素的单独属性设置

将perspective作为transform的属性设置

transform:perspective(100px) translateX(100px);

15.动画

语法：

@keyframes scale{
from{}

to{}

}

通过animation:;调用动画，哪个元素调用，就写在哪里。

调用动画名称：animation-name:;

设置动画完成时间：animation-duration:;

设置动画执行次数：animation-interation-count:infinite; //一直执行

具体时间，如2s

默认执行1次

设置延时执行时间：animation-delay:;

动画执行类型（速度）：animation-timing-function:linear;

ease;

ease-in;

ease-out;

ease-in-out;

动画逆波（是否有反向运动）：animation-direction:normal;

reverse; //反向

alternate; //正常执行

alternate-reverse;

设置动画时间之外的状态：animation-play-state:running； //默认

paused; //暂停

转为3D盒子：transform-style:preserve-3d;

steps(); //步长

三、写一个方法去掉字符串中的空格

代码如下（示例）：

var card = '6222 0236 0209 9812 331';
var card = card.replace(/\s/g, "");
alert(card)；//输出 6222023602099812331