HTML

CSS

常用属性和值

• display:block;: 用于给span标签设置成块
• display:inline-block;: 用于给div等块级标签设置成行内块，可以使多个块布局在同一行中
• text-align: center: 用于给span内的文字设置居中，前提是要设置display:block;
• line-height: 10px: 用于给文字设置高度
• html{filter: grayscale(1);}: 给html使用样式，实现页面变灰(黑白模式/黑白主题)

常用样式

居中大全

span标签居中显示的正确方法
方法一
<span style="display:block;text-align: center">水平居中</span>
<span style="display:block;line-height：值为span的高度">垂直居中</span>

方法2: 令子元素垂直和水平居中
align-items:center用来设置交叉轴方向上的子元素排列的方式
justify-content:center用来设置主轴的排列方式，这里的意思是放在主轴的中间

<div style="display: flex;width: 50%;height:300px;justify-content:center;align-items:center">
  <div style="display: flex;flex: 1">每组数量</div>
  <el-input style="display: flex;flex: 1" v-model="ipt" placeholder="请输入内容"></el-input>
</div>

方法二
display: flex;
justify-content: center; //水平居中
align-items: center; //垂直居中

div作为按钮

将div当按钮/将普通元素作为按钮

<div class="key-cell">点击</div>
<style>
.key-cell{
	height:20px;
	width:20px;
    border-radius: 5px;	
}

.key-cell:active{
    color: white;   //点击颜色变为白色
    border-radius: 5px;
    background: #61CBD6;  //黑色
    opacity: 0.5;    //这里重要，就是通过这个透明度来设置
}
<style>

其他

• 隐藏滚动条: ::-webkit-scrollbar{display:none}
• 字体加粗: font-weight: bold

flex布局

容器常用的属性和值
justify-content: space-around; # 使子元素在主轴上平均分布(比如是容器内的元素是横向排列的，主轴就是横向，然后可以使得横向均分容器空间，左右留有空白空间)
justify-content: space-between; # 和space-around类似，但是主轴首尾不留有空白空间。
justify-content: center; # 所有子元素堆在一起，在容器的中间

scss

• SCSS 教程

JS

Q.E.D.