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)

公告 【更新说明】新增说说
用户名 日期

隐藏、显示

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

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

style="z-index:999"

隐藏滚动条(以下两种)

1、设置滚动条大小

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

2、属性设置为不显示

overflow: hidden; 

CSS常用样式(显示、隐藏、显示在最前面,位置大小)_第1张图片

你可能感兴趣的:(网站,前端,css,前端,html)