常用杂碎知识点

1.vs code 常用快捷键

中途换行：Ctrl+Enter
换到上一行开始：Ctrl+Shift+Enter
移动行：alt + up/show
选中当前行：Ctrl + L
复制当前行：shift + alt +up/down
删除当前行：shirt + ctrl + k
剪切当前行：Ctrl + X

查找：Ctrl + F
替换：Ctrl + H
同时选中相同字符批量更改：Ctrl + D（想选多少个就按多少下）

代码格式化：shift + alt +f
格式化选中代码：ctrl + f

收起/展开 侧边栏：ctrl + b
多行缩进：Ctrl + [ 和 Ctrl + ] 向左和向右移
光标移到行末尾：shirt+end （end为小键盘上的数字1）
关闭当前页面：Ctrl+w

2.常用转义字符

空格： 
左箭头<：<
右箭头>：>
符号&：&
符号©：©
引号"："
(注：分号不能省略)

3.css提升优先级属性：!important的使用

属性: 值 !important;
例：

div{
    margin: 20px !important;
}

4.CSS相关

文本首行缩进2个字符：text-indent: 2em;

文字间距：letter-spacing: 2px;

文字超出长度用省略号…替代：text-overflow:ellipsis;

允许长单词自动换行：word-wrap: break-word;

强制不换行：white-space:nowrap;

文字竖排：writing-mode: vertical-lr;

透明度：opacity: 0.5;
filter:Alpha(opacity=50); (IE8老版本兼容)

css3盒子模型：box-sizing: border-box;

点击触发背景高亮：-webkit-tap-highlight-color: transparent; （设为transparent则为透明无色）

禁用长按页面时弹出菜单：-webkit-touch-callout: none;

允许自定义ios端按钮和输入框的样式：-webkit-appearance: none;

通配符：

*{
     margin: 0;
     padding: 0;
}

a标签相关：

a{
    text-decoration: none;     /*取消文本修饰效果*/
    text-decoration:underline；/*添加下划线*/
}
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

margin水平居中：

div{
    margin: 0 auto; /*上下0px，左右自适应*/
    margin: 上，右，下，左;
}

vertical-align: middle 垂直居中：

<p><span style="display:inline-block;vertical-align: middle">使span在p中垂直居中</span></p>

(注：需配合 display:inline-block 使用)

给含有该字符的类添加css属性：

[class*="类名或类名的部分字符"]{
    margin: 0;
}

隐藏底部滚动条：

body{
    overflow-x:hidden;
}

瀑布流：(图片与文字均可用)

div{
       column-count: 3;				/*把div元素内容分为3列*/
       column-width: 350px;			/*每列宽350px*/
       column-gap: 30px;				/*列与列间距30px*/
       column-rule: 4px  outset  #FF00FF;	/*列间隔线的宽度、样式和颜色*/
}

属性选择器：

[title]{
     color: red;
}

<p title="">字体变红</p>    

添加字体文件（css里添加）：

@font-face {
    font-family:"名称"; 
    src: url(字体文件.ttf);
}

banner背景图铺满：

.banner{
    width: 100%;
    height: 100%;
    background: url(../img/jianying.jpg) 50% 50% / cover no-repeat scroll; /*scroll改为fixed则可以固定*/
}

(注：background是一个集合，它包括background-color,background-image,background-size等等，当你改变background时，他会把你之前的background下的子样式覆盖。)

背景图片固定：background-attachment: fixed;

圆角边框：border-radius:10px;

边框阴影：box-shadow: 10px 10px 5px #888888 inset;
(阴影右移 阴影下移 阴影清晰度 颜色 内阴影)

自定义图片边框：border-images:url("img.png") 0 15 0 15 round;
(0 15 0 15 指的是：图片边框向内偏移 上0，右15 ，下0 ，左15)

5.网站title左边加小图标

<link rel="icon" href="/image/favicon.ico" type="img/x-ico" />

6.json序列化和反序列化

序列化：将json对象转换为字符串 JSON.stringify()
反序列化：将字符串数据转换为json对象 JSON.parse()
(注：JSON必须大写)

7.事件相关

阻止对元素的默认处理方式：event.preventDefault()
返回事件目标节点：ev.target

8.定位相关

定位：

• position：static /默认，不受left，right等位移属性影响/
• position：relative /相对定位，一般加在父级对象/
• position：absolute /绝对定位，悬浮不占位置/
• position：fixed /绝对固定定位，相对于浏览器窗口进行定位，不受滚动条影响，页面小广告/
• z-index： 1 /设置元素的堆叠顺序，数值一般100以下/

浮动：
float：left，right，none（不浮动），inherit（继承父级的）

清除浮动：
clear：left，right，both（清除两侧）

overflow：规定当内容溢出元素框时发生的事情。

• visible /默认值。内容不会被修剪，会呈现在元素框之外。/
• hidden /溢出内容会被修剪，不可见/
• scroll /溢出内容会被修剪，但浏览器会显示滚动条以便查看其内容。/
• auto /如果内容被修剪，则浏览器会显示滚动条以便查看其内容。/

9.css3 hover动画

transform属性：

• translate(x,y) /定义 2D 转换相对原本位置的平移/
• rotate(角度数值+deg) /定义 2D 旋转，在参数中规定角度/ /angle即角度数值+deg，例：90deg/
• rotateX(angle) /定义沿着 X 轴的 3D 旋转/
• rotateY(angle) /定义沿着 Y 轴的 3D 旋转/
• scale(x,y) /定义 2D 缩放转换/
• skew(x-angle,y-angle) /定义沿着 X 和 Y 轴的 2D 倾斜转换/

过渡：
transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property /CSS 属性/
• transition-duration /过渡时间/
• transition-timing-function /速度效果/
• transition-delay /等待多久开始/

例：
transition：width 2s linear 2s； /宽度 过渡时间2秒 linear默认效果相同速度 等待2秒开始/

一般用法：
transition：属性+过渡时间 （例：transition：width 2s，transform 2s；） /浏览器谷歌兼容书写：-webkit-transition：width 2s，-webkit-transform 2s；/
例：

div{
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transform: rotate(45deg);
    transition: width 2s,height 2s,-webkit-transform 2s;
}
div:hover{
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(360deg);
}

10.animation动画

animation 属性是一个简写属性，用于设置六个动画属性：（需按顺序设置）
1.animation-name /keyframe 名称/
2.animation-duration /动画播放时间/
3.animation-timing-function /速度效果/
4.animation-delay /等待多久开始/
5.animation-iteration-count /播放次数/ （ infinite 无限次 ）
6.animation-direction /是否应该轮流反向播放动画/ （normal 默认值，动画正常播放。alternate 轮流反向播放）
例：

    div{
        width: 100px;
        height: 100px;
        background:red;
        position: relative;   
        animation: name 5s 3 alternate; (动画名称 播放5s 播放3次 轮向播放)     /*  -webkit-animation:兼容写法 */    
      }
     @keyframes name{                                                                                    /*  @-webkit-keyframes 兼容写法 */
        0%{background:red;left:0px;top:0px;}
        25%{background:yellow;left: 100px;top:0px;}
        50%{background:blue;left:100px;top:100px;}
        75%{background: green;left:0px;top:100px;}
       100%{background: red;left:0px;top:0px}
      }

11.html5代码结构

article：独立完整的内容块，aside：附属信息，如侧边栏广告导航条等

<！-- 顶部-->
<header>                     
    <h1>标题</h1>
    <nav>
        <ul>
            <li><a>首页</a></li>
            <li><a>帮助</a></li>
        </ul>
    </nav>
</header>
<！-- 主体内容-->   
<article>                     
    <header>
        <h1>标题</h1>
        <p>大纲描述</p>
    </header>
    <article> 
        <p>内容</p>
    </article> 
    <footer>                   
        <p>底部</p>
    </footer>
</article>
<！-- 底部-->
<footer>                   
    <p>底部</p>
</footer>