常用杂碎知识点

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.常用转义字符

空格: 
左箭头<:&lt;
右箭头>:&gt;
符号&:&amp;
符号©:&copy;
引号":&quot;
(注:分号不能省略)

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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值