前端项目布局问题

不断更新我发现的css问题

01 后台系统经常遇到的问题，父元素设置了min-height:100%，子元素设置height:100%，你会发现，子元素的100%不生效

解决

• 父级添加display:flex

02 一个元素100%显示，又必须有一个固定的padding-left或padding-right，还有1px的边框

解决

• 盒子变为:box-sizing:border-box

03 有时候只需要显示一半的内容

解决

• 使用视窗(Viewport)是指浏览器实际显示内容的区域
• vw : 1vw 等于视口宽度的1%
• vh : 1vh 等于视口高度的1%
• vmin : 选取 vw 和 vh 中最小的那个
• vmax : 选取 vw 和 vh 中最大的那个

04 需要显示二行文本,显示省略号

 /* 一行,显示省略号 */
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 
 /* 一行,超出省略号 兼容低版本 */
 /* 父组件有时需要 overflow: hidden;  */
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-emphasis: none;
 
   /* 显示两行 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;

05 css实现li标签的小圆点

.title {
    position: relative;
}
// 小黑点的实现
// 注意用定位来调整位置
.title::before {
  position: absolute;
  top: 40%;
  left: -15px;
  width: 5px;
  height: 5px;
  background: black;
  border-radius: 100%;
  content: '';
}

06 最后,通过定位让盒子定位到合适的位置

5种方式

优化滚动条

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0,0,0,0.06);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,0,0,0.12);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

仿elementui的滚动条

/* 整个滚动条 */
::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 10px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}