vscode代码编辑器折叠所有区域的代码快捷键
查看了使用说明，快捷键如下：
1. 折叠所有区域代码的快捷键：ctrl+k, ctrl+0;
先按下ctrl和K，再按下ctrl和0; (注意这个是零，不是欧)
2. 展开所有折叠区域代码的快捷键：ctrl +k, ctrl+J;
先按下ctrl和K，再按下ctrl和J
3. 自动格式化代码的快捷键：ctrl+k, ctrl+f;
先按下ctrl和K，再按下ctrl和f;
文本正文
<h1>标题</h1>h1-h6，字体从大到小，加粗，上下间距，独占一行
<h2>岁月成碑 (Vocaloid ver.)</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<p>段落</p>段落，上下间距，独占一行
换行
<br>
<img src="../ONE/images/sycb.jpg">可以和其他内容在同一行显示
<img src="../ONE/images/sycb.jp" alt="岁月成碑" width="" height="" title="岁月成碑">，alt加载不出来提示 width宽 height高
title鼠标悬浮提示
width宽 height高 title鼠标悬浮提示
<b>加粗</b>视觉,<strong>加粗</strong>，强调，加粗，不换行
<i>倾斜</i>,<em>倾斜</em>
<hr>,分割线
特殊符号
， 空格
gt;， >
lt;，
copy;， ©
<ul>
<li>123123123,无序</li>
<li>123123123</li>
<li>123123123</li>
<ul>
<li>123123123,无序</li>
<li>123123123</li>
<li>123123123</li>
</ul>
</ul>
<ol type="1" start="3">
<li>123123123,有序</li>
<li>123123123</li>
<li>123123123</li>
</ol>
<dl>
<dt>标题</dt>
<dd>
内容，自定义
</dd>
</dl>
<a href="">文字</a>,超链接
<a href="">文字/图片<img src="图片地址" alt=""></a>,超链接
<li><a href="" target="_blank"><b>内容</b></a></li>,弹出界面
<div></div>,独占一行
<span></span>，可以和其他内容在同一行显示
<u>测试</u>，下划线
<del>测试</del>，删除线
<s>测试</s>，删除线
<sub>测试</sub>，下标
<sup>测试</sup>，上表
style="宽高颜色等"
width:200px; 宽
height:300px; 高
color:red; 颜色
backgrond:; 背景
text-align: center; 水平居中
行内样式
在标签中写上 style=""
<div style="width: 10px; height: auto; "></div>
内部样式
在head中添加<style></style>
外部样式
<link rel="stylesheet" href="路径">
权重
行内>内部>外部
实际项目，内部外部谁写在下面，谁权重重
（谁里的近）
div*10
css /*
权重
id:100
class:10
包含选择器（ ）空格表示包含
div a{
}
通配符清空所有标签间距
*{margin: 0;
padding: 0;}
表单
<form action="">
<input type="text"placeholder="SEARCH...">文本框
<input type="password">密码框
<input type="submit">提交按钮
<input type="reset">重置按钮
<input type="button">自定义按钮
<botton></botton>
</form>
默认像素16
谷歌默认12像素
块元素 独占一行，宽高起作用
div p h1-h6 ul li ol dl dt dd
行内元素 和其他内容在同一行显示，加宽高不起作用
span b img strong i em s u dle sup sub a input
岁月成碑
<p>岁 <span>月</span>成碑</p>
<h1>岁<span>月</span>成碑</h1>
设置字体大小
font-size:;
字体格式
font-family:simsun, Microsoft YaHei, SimHei;
设置字体粗细
font-weight: ;
blold,bolder;加粗
normal;正常
lighter;变细
em 父元素一个字体大小
color:; 颜色
rgb(255,0,0) 0-255
rgba(255,0,0,0.5) a=0~1
#abc123 0~9 a~f
倾斜
font-style:;
install 倾斜
oblique
normal 还原以倾斜的倾斜
行高
line-height: 25px; 垂直对齐，行高等于元素高度
30px
2em
2~1.5
水平对齐
text-align: ; 水平居中，对改元素里的非块元素起作用
lift; 左对齐
center; 居中
right; 右对齐
首行缩进
text-indent:;
划线
text-decoration:;
underline; 下划线
overline; 上划线
line-througn; 删除线
none; 清除下划线
间距
letter-spacing:; 英文字母间距 汉字间距
word-spacing:; 英文单词间距
list-style-type:; 列表样式
square
列表
list-style-image:url()； 列表图片
list-style-position:; 列表样式位置
outside li导弹外面（默认）
inside li的里面
用于img 使图片和其他内容垂直对齐
vertical-align
top; 顶对齐
middle; 垂直居中对齐
bottom; 底部对齐
baseline; 基线对齐
A清除下划线
text-decoration:none;
弹出链接
target="_black"
*{margin: 0;
padding: 0;}
边框
border: 1px solid red; (给元素加边框，边框宽高加在原来的宽高上) 上下左右
border-weight:10px 边框宽度
border-style:; solid dashed dotted
border-color:; 边框颜色
border: 1px solid teansparent边框透明
teansparent透明
border-top:1px solid red; 上边框
border-bottom:1px solid red; 下边框
border-left:; 左边框
border-right:; 右边框
背景
background-color:; 背景颜色
background-image:(); 背景图片
background-repeat:; 背景图片平铺
repeat 平铺(默认)
no-repeat 不平铺
repeat-x x轴平铺
repeat-y y轴平铺
background-position: X Y ;
20px/-10px 30px/-10px
lift/center/right top/center/bottom
写一个值 默认为X轴 Y轴为center
background-position: right center ;
list-style-type:;
list-style-image:url();
list-style-position:; inside
浮动 让竖向显示变成横向显示
float:;
left
right
none
1.浮动元素宽度之和大于父元素宽度，自行换行
2.其中一个元素高度高出其他元素，会影响下一行后方元素
3.半脱离标准文档流
4.如果想让第二个元素在第一个元素后面显示，第一个必须浮动
5.子元素都浮动，父元素的高度消失(父元素不写高度)
clear:; 清除浮动 元素带来的影响
left;
right;
both;
填充 从内到外
padding: 0px 0px 0px 0px
上内边距是 px，右内边距是 px，下内边距是 px，左内边距是 px
间距 上下左右
margin-top:2cm; 上间距
margin-bottom:2cm; 下间距
margin-left:2cm; 左间距
margin-right:2cm; 右间距
背景图片调节
list-style:none;
list-style-image:url();
background-position: X Y ;
清空列表样式 li
list-style:none;
text-decoration:none；
用于img 使图片和其他内容垂直对齐
vertical-align
top; 顶对齐
middle; 垂直居中对齐
bottom; 底部对齐
baseline; 基线对齐
center
圆角
border-radius: 50px;
定位到窗口
position: fixed;
定位到内容
<a href="#要定位的id"></div></a>
元素类型
块级元素(inline) 独占一行，宽高起作用
div p h1-h6 ul li ol dl dt dd form
行内元素(block) 和其他内容在同一行显示，加宽高不起作用
span b strong i em s u dle sup sub a
行内块元素(inline-block)置换元素
img input
间距 上下左右
margin-top:2cm; 上间距
margin-bottom:2cm; 下间距
margin-left:2cm; 左间距
margin-right:2cm; 右间距
盒模型
内容 内边距 边框 外边距
content padding border margin
padding 内边距 会加到原来的宽高上
padding:10px 四值相等 10px
padding:10px 10px 上下 左右
padding:10px 10px 10px 上 左右 下
padding:10px 10px 10px 10px 上 右 下 左
margin 外边距
横向相加 竖向叠加(取最大值)
块元素有宽度的情况下 加上 margin:0 auto; 可以在父元素中居中显示
给子元素添加margin-top,会带着父元素一起下来
解决方法： 用父元素的padding-top:;代替
加浮动子元素或者父元素
为父元素加一个不明显的边框
display:;
block; 转换块级元素
inline; 转换行内元素
inline-block; 转换行内块元素
none; 隐藏/消失
文本溢出
overflow:;
visible; 可见，默认
hidden; 隐藏
auto; 超出方向出现滚动条
scroll; 不管是否都出现滚动条，超出方向出现滑块
子元素浮动 父元素高度为0
为父元素添加overflow:hidden; 父元素将被高度最大的子元素撑起来
white-space:;
normal; 正常 默认值 忽略回车
nowrap; 不换行 直到遇到<br/> 忽略空白
pre 不忽略空白 不忽略回车
pre-line 忽略空白 不忽略回车
pre-wrap 不忽略空白 不忽略回车
a标签的状态
a:link{} 默认状态
a:vistited{} 访问后的状态
a:hover{} 鼠标悬浮状态
a:active{} 鼠标点击状态
省略号使用
width: 300px;
<--高-->
white-space: nowrap;
<--不换行-->
overflow: hidden;
<--超出内容隐藏-->
text-overflow: ellipsis;
<--超出文本以省略号显示-->
定位
width:px; /* 宽 */
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 超出内容隐藏 */
a:hover b{} 鼠标悬浮状态
鼠标经过a b 发生改变
定位
position:;
relative; 相对定位 没有脱离标准文档流 配合方位词 top bottom left right
absolute; 绝对定位 完全脱离标准文档流 配合方位词 top bottom left right
1.没有定位参照物 以窗口为参考
2.定义参照 为包含块添加position:relative/absolute 将以包含块为参考
fixed 固定定位 脱离标准文档流
sticky 粘性定位
min-height:;
max-height:;
min-width:;
min-width:;
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
b {
font-weight: normal;
}
.clearfix{
zoom:1
}
.clearfix::after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
}
a*20>img[src="img/photo$"]
20个a标签里的img的属性src
宽高自适应
宽度自适应
1.宽度不写
2.宽度为100%
高度自适应
1.高度不写 被内容撑起来
2.高度为100% 前提（html,body{height:100%}）
高度自适应 高度不写的情况下 会带来的问题：
高度塌陷
解决方法：
1.为父元素添加overflow:hidden;
2.在父元素里面的最下面添加空元素（快） 为该元素添加 clear:both 缺点:添加太多空标签，造成代码冗余
3.万能清除法
.clearfix{
zoom:1
}
.clearfix::after{
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
}
html,body{
height:100%
}
伪类选择器:
:before{
content:"文字内容";
}
:after{
content:url(图片路径);
}
visibility: hidden; 将元素隐藏
display:none； 消失
:first-letter{} 第一行第一个
:first-line{} 第一行
不浮动
clear: both;
隐藏并不消失
visibility: hidden;
BFC 块级格式化上下文
规则
1垂直显示
2.在同一个BFC中垂直方向的块margin重叠
3.和浮动元素不重叠
4.独立1的块
5.元素的左边margin和包含块的左边边框相邻
6.计算高度 浮动元素参与计算
触发
float:;
display:;
position:;
overflow:;
html
应用
表格
<table>
<tr>
<td>1</td>
</tr>
</table>
width=""
height=""
border="1"
bordercolor="red" 边框颜色
bgcolor="#000" 背景颜色
cellspacing="0" 单元格间距
callpadding="10" 内容到边框的距离
align="center/left/right" 对齐（写到table中，整个表格在页面中对齐
valign=""
colspan="" 单元格合并（横向）
rowspan="" 行于行合并（竖向）
input type=""
text
password
submit
reset
button
radio 单选框 必须有相同的name chencked（默认选中）disabled(禁用)
checkbox 多选框（复选框）
label
<label><input type="radio" name="xingbie">女</label>
<input type="radio" name="xingbie" id="buming"><label for="buming">不明</label>
<select>
<option value="提交到服务器的内容">浏览器显示内容</option>
</select>
背景图片居中
img{
height: px;
background-image: url();
background-position: center top;
}
css3
层级选择器
> 找到儿子级别的元素
+ 找到后面挨着的兄弟
~ 找到后面所有的兄弟
属性选择器
[class] 包含class属性的元素
[class="nav"] 包含class="nav"的元素
[class~="nav"] 元素class的属性值中包含nav单词
[class^="nav"] 元素class的属性值中以nav连字符开头
[class$="nav"] 元素class的属性值中以nav连字符结尾
[class*="nav"] 元素class的属性值中包含nav连字符
[class=|"nav"] 元素class的属性值中以nav-开头或者等于nav
伪类选择器
p:first-child{} 第一个
p:last-child{} 最后一个
p:nth-child(n){} 第n个
p:nth-child(2n/even){} 第偶数个
p:nth-child(2n+1/odd){} 第奇数个
p:nth-last-child(n){} 倒数第n个
p:first-of-type{} p标签中的第一个
p:last-of-type{} p标签中的最后一个
p:nth-of-type(n){} p标签中的第n个
p:nth-last-of-type(n){} p标签中的倒数第n个
p:only-child{} 只能有p自己
p:only-of-child{} 只能有一个p
:empty{} 空元素
:target{} 目标，结合锚点链接使用，鼠标点击
:focus{} 输入框有光标时的样式
:selection{} 文本选择的模式
:not(.top) class不是not元素
:enabled{} 表单可用状态
:disabled{} 表单禁用状态
圆角
border-radius: 0px;
-ms-属性 IE
-moz- 火狐
-webrit- 谷歌/苹果
-o- 欧朋
字体
@font-face{
font-family:"字体名字";
src:url(文字路径);
}
div{
font-family:"字体名字";
}
投影
text-shadow: 2px 2px 10px red,2px 2px 10px blue
文字投影 X Y 迷糊 颜色
box-shadow: 2px 2px 10px 10px red,inset 2px 2px 10px 10px red
文字投影 X Y 迷糊 扩展 颜色,内阴影
背景
background:red img x y no-repeat
background-color:;
background-image
background-position
background-accachment:fixed
background-origin:; 背景图片开始渲染的位置
content-box;
padding-box; 默认值
border-box;
background-clip:; 背景图片保留位置
content-box;
padding-box;
border-box;
background-size:;
100px 100px
cover 等比例缩放 铺满整个元素
contain 等比例缩放 将图片完整的放到元素中
同一个元素可以放置多张背景图片，用逗号隔开
background-image: ur1(img/cate.jpg),url(img/caodi.png);
background-repeat: no-repeat, no-repeat;
background-size: 100% 80%,100% auto;
background-position: top center,bottom center;
border-image-source:url()
border-image-slice:26 26 26 26 fill(中间); 切割
border-image-repeat:; stretch(拉伸 默认)/repeat/round
border-image-outset:20px; 边框图片视觉上向外扩展距离
border-radius:;
20px 四个值相等
20px 30px 对角线
左上右下 右上左下
background-image: linear-gradient(90deg,rgb(255, 0, 0),
rgb(255, 187, 0),
rgb(229, 255, 0),
rgb(0, 255, 38),
rgb(0, 208, 255),
rgb(30, 0, 255),
rgb(238, 0, 255));
transparent 透明
渐变
线性渐变
background-image:linear-gradient();
linear-gradient(red,green) 颜色
linear-gradient(45deg,red,green) 加角度
linear-gradient(to left,red,green) 加方位
linear-gradient(to left,red 10%,green 20%) 加位置
repeating-linear-gradient(red 0,red 10%,green 10%,green 20%) 重复渐变
径向渐变
radial-gradient(red,green) 颜色
radial-gradient(circle,red,green) 加形状 正圆
radial-gradient(circle at left center,red,green) 加圆心位置(可用)
radial-gradient(circle at 100px 20%,red,green)
radial-gradient(100px circle at left center,red,green) 加半径大小
radial-gradient(100px 200px at left center,red,green) 加半径大小
一个值为正圆，两个值为椭圆
可用像素，百分比，方位词 farthest-corner(最远的角)
farthest-side(最远的边)
closest-corner(最近的角)
closest-side(最近的边)
radial-gradient(closest-side at left center,red,green) 加位置
radial-gradient(closest-corner at left center,red,green) 重复渐变
过渡
transition:;
transition-property:; 参与过渡的属性
transition-duration:; 过渡持续的时间
transition-delay:; 过渡延迟的时间 0s
transition-timing-function:; 过渡过程变化
linear 匀速
ease 逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加再减
cubic-bezier() 自定义 可参考 www.cubic-bezier.com
radial-gradient(farthest-corner at left center,red,green)
radial-gradient(farthest-side at left center,red,green)
radial-gradient(red 10%,green 20%)
repeating-radial-gradient(red 0,red 10%,green 10%,green 20%)
transform:; 偏移
translate();
translateX()
translateY()
translate(x,y)
rotate(); 旋转
rotateX(0deg)
rotateY()
rotate( ) z轴
scale(); 缩放 1不变 0.5原来的一半 2原来的2被
scaleX()
scaleY()
scale(x,y)
skew(): 倾斜
skewX(45deg)
skewY()
skew(x,y)
transform-origin:; 中心点的位置 像素 百分比 方位词
3d
perspective:1200px 视距 900ox-1200px
transform:;
translateZ(); z轴偏移
translate3d(x,y,z) xyz偏移
rotatez() z轴选择
rotate3d(1,0.5,2)
transform-style:; 将元素呈现在3d空间中
flat; 平面（默认值）
perseve-3d 立体空间
animation:名称 时间 速度 次数
animation:name 1s
animation-name:; 动画名字
animation-duration:; 持续时间
animation-delay:; 延迟时间
animation-timing-function:; 过渡变化效果
linear; 匀速
ease; 逐渐变慢
ease-in; 加速
ease-out 减速
ease-in-out;
cubic-bezier;
steps(5);
animation-direction:; 方向
normal; 正常
reversr; 反方向
alertnate; 正反
alertnate-reversr; 反正
animation-iteration-count:;
数字
infinite; 无限次
animation-play-start:; 多用于：hover状态
running 默认值
paused 暂停
弹性盒
加在父元素中的属性：
display: flex; 将元素转换为弹性盒
justify-content:; 主轴对齐方式
flex-start; 起始
flex-end; 结尾
space-around; 两边间距一致
space-between; 空间分布元素中间
space-evenly; 所有空间一致
align-items; 侧轴居中
flex-start;
flex-end;
center; 居中
flex-direction;
row; 横向默认
column; 竖向
row-reversr; 横向反向
column-reversr; 竖向反向
flex-wrap:; 换行
nowrap;（默认值）
wrap; 换行
align-content:; 多轴对齐方式
flex-start 开头
flex-end 结尾
center 居中
space-between 空间在两个元素中间
space-around 两边空间相对
以下属性添加在子元素
align-self:; 该元素自己的对齐方式（侧轴）
flex-start;
flex-end;
center;
object-fit:
fill (不保持纵横比缩放图片,使图片完全适应)
contain (保持纵横比缩放图片,使图片的长边能完全显示出来)
cover (保持纵横比缩放图片,只保证图片的短边能完全显示出来)
none (保持图片宽高不变)
scale-down (当图片实际宽高小于所设置的图片宽高时,显示效果与
none一致;否则,显示效果与contain一致
距离calc(100% - 200px)
flex-grow:; 将剩余空间分配 加到元素
flex-shrink:; 将小于的空间分配 从原来宽度上减去
flex-basis:; 元素的宽度
flex:1;
flex:auto;
怪异盒模型 元素的宽高不变，边框和padding 会从原来的宽度往里算
box-sizing:border-box
px
1em 父元素字体大小
1rem 根元素（html)的一个字体大小
outline:none; 文本框点击的线隐藏
pointer-events: none;鼠标放上无反应 抖动
语义性标签
heaader 头部
nav 导航
main 主要内容
footer 底部
section 区块
aside 侧边栏
article 文章
figure 独立的内容 (自带间距)
figcaption 标题
video src=""
controls 控制条
autoplay 自动播放
muted 静音
loop 循环播放
poster="图片路径" 视频未加载出来时的提示
audio src=""
controls 控制条
muted 静音
loop 循环播放
autoplay 自动播放
带有验证信息的表单
email 邮箱
url url地址
search 搜索
color 颜色
range main="" max="" step=""
最小 最大 步长
时间
time 上下午 时分
week 年周
month 年月
date 年月日
datetime-local 年月日 上下午 时分
placeholder="" 文本提示
autofocus 自动获取光标
required 必填项
pattern=“[0-9]{6}” 正则表达式
input list="on/pff" 自动完成
input list"fan" 项目列明（设置下拉列表内容）
datalist id="fan"
option value=""
option value=""
option value=""
精灵图
优点:
(1) css sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是css Sprites最大的优点，也是其被广泛传播和应用的主要原因;
(2) css sprites能减少图片的字节;
(3)css Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
(4) css sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
缺点:
(1)图片合并麻烦:图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
(2)图片适应性差:在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
(3）图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
(4)可维护性差:页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能〈最好)往下追加图片，但这样增加了图片字节。
opacity:value; value的取值范围在0-1
标签 class id !important
block inline inline-block
行内元素不可用(
width height margin/padding-top/bottom
text-lndent
text-align
transform
)
行内可以继承(
font-size
line-height
color
)
可以将行内元素转换成块元素
float
position:absolute/fixed(本体)
flex(子元素)
盒模型
width height border padding margin
margin
box-sizing:border-box
position:;
relative
absolute
flxed
sticky;
z-index:;
min max
高度塌陷
overflow:hidden;
.clearfix::after{
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
}
省略号使用
width: 300px
<--高-->
white-space: nowrap;
<--不换行-->
overflow: hidden;
<--超出内容隐藏-->
text-overflow: ellipsis;
<--超出文本以省略号显示-->
overflow:;
auto
scroll
visible
hidden
bfc
触发
float:;
display:;
position:;
overflow:;
html
<table><tr><td>1</td></tr></table>
colspan="" 单元格合并（横向）
rowspan="" 行于行合并（竖向）
form
input text required placeholder="" autofocus patter=""
radio checkbox checked
+ > ~
-checked
-of-type
:checked
[class|=""]
linear-gradient()
radial-gradient()
2d
transform:;
rotate
skew
translate
scale
transform:translate(x, y) rotate();
过渡
transition:width 2s, backgrond 3s;
@keyframes name{
0%{
}
100%{
}
}
animation:;
3d
perspective:1200px;
transform-style:preserve-3d;
display:flex;
flex:1
flex:auto
1rem html fs
1vw width 1%
1vh height1%
grid
display:grid;
grid-template-rows:100px 200px 300px; 行高
grid-template-columns:100px 200px 300px; 列宽
100px
33.33%
repeat(10,100px) 重复十次，每个100px
repeat(auto-fill,100px) 自动填充，直到换行
1fr 2fr fr 一份
minmax(100px,1fr) 不大于1fr，不小于100px
100px auto auto 自动
row-gap:; 行之间的间距
column-gap:; 列之间的间距
gap:20px 20px;
行 列
name:nth-child(1){
grid-area:name1; 给元素起名
}
name:nth-child"name2"
name:nth-child"name3"
grid-template-areas:"name1 name2"将元素表现在相应的位置
"name1 name2"
"name1 name2"
网格中内容的对齐方式
justify-item; 横向
align-items; 竖向
start
end
center
网格分布方式
justify-content:; 横向
start
end
center
space-between
space-around
space-evenly
align-content:; 竖向
第一次整合，没有去重
扫一扫
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
