CSS常用样式（显示、隐藏、显示在最前面，位置大小）

参考网站：CSS 教程

设置内外边距及对齐方式等常用属性

/* 字体大小 */
* {
  font-size: 16px
}

/* 所有td中字体对齐方式 */
td{
    color: #ffffff;     /* 字体颜色 */
    text-align: center;  /* 对应td中直接设置不需要加taxt- */
}

/* #id名 */
#total{
    min-height:90%;                     /* 设定最小高度 */
}

/* #id名Center里面的table属性，同时设置三个的属性一致 */
#Center table, #Center tr, #Center td{
    min-height:200%;
}

/* td中id为mainContent的属性 */
td#mainContent{
    vertical-align:top;                 /* 内容顶部对齐 */
    background-color:#cccccc;           /* 背景颜色 */
    border:2px solid #0;                /* 周边间距 */
    width:15%;                          /* 宽度 */
    border-left:20px solid #ffffff;     /* 设定左边框大小及颜色 */
}

/* .对象名 */
.box-space {
  /* 默认对齐方式为center中间对齐，flex-start向上对齐 */
  align-items: flex-start;
  /* 字体对齐方式 */
  text-align: left;
  /* 在html中auto会自适应居中对齐 */
  margin: auto;    /* margin: 上 右 下 左; 边距 */
}

.box-card-right-1 {
  border-left-width: 0ch;   /* 边框宽度 */
  margin-left: -20px;       /* 左外边距 */
  margin-right: 0px;        /* 右外边距 */
  margin-top: -20px;        /* 上外边距 */
  margin-bottom: 10px;      /* 下外边距 */
  padding-left: 0px;        /* 内边距 */
}

设定绝对位置

// 绝对位置，上偏移20%，左偏移50%，整体偏移相对显示内容的中心
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);

设置边框大小及颜色

border: 3px solid green;

设定显示高度

height: 200px;
position: relative;

div不换行（display）

<div style="display: inline-block;">
  <span>公告</span>
  <el-button class="button" text>【更新说明】新增说说</el-button>
  <br/>
  <span>用户名</span>
  <span>日期</span>
</div>

隐藏、显示

style="display:none;"            // 不占位隐藏
style="display:block;"           // 显示

style="visibility:hidden;"       // 占位隐藏
style="visibility:visible;"      // 显示

// 在js代码中更改样式
document.getElementById("logIn").style.display = "block";
document.getElementById("register").style.display = "none";

设置div悬浮到指定位置

<div class="mes_show">
    <!-- <span>公告</span>
    <el-button class="button" text>【更新说明】新增说说</el-button> -->
    我是右上角悬浮的div
</div>
<style lang="less" scoped>
/*div通用样式*/
.mes_show {
  right: 10px;
  bottom: 150px;
  background: #1a59b7;
  color:#ffffff;
  overflow: hidden;
  z-index: 9999;
  position: fixed;
  padding:5px;
  text-align:center;
  width: 175px;
  // height: 22px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
</style>

将显示内容放置在顶层（不会被其他遮挡）

style="z-index:999"

隐藏滚动条（以下两种）

1、设置滚动条大小

/* 设置class对应滚动条宽高 */
.right-top::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

2、属性设置为不显示

overflow: hidden;