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>