关于html和css一些问题的实现方法

关于样式的一些方法

// 强制元素显示尺寸,超出部分用…代替?
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;

// 元素如何设置水平垂直居中?
不知道宽高：
1.元素display:flex,水平垂直居中;
2.元素绝对定位,绝对定位时left和top都是50%;transform:translate(-50%,-50%);
知道宽高：
3.元素高固定,margin: 高度/2 auto;
4.知道某元素的宽高,绝对定位时left和top都是50%;
margin-top:-height/2,marign-left:-width/2;

// 如何限制父元素每行显示n个子元素，超出的自动换行?
父元素如果没有特别声明一般都是会换行的。区别是每行显示多少子元素。
根据每行显示数给子元素设置宽度就可以了。例如每行显示4个子元素，可以给子元素设置宽度为25%；那么效果就是每行4个。

// 父元素下有多个子元素，如何设置让子元素高度等于父元素？
1、给父级元素设置:display: flex; align-items: stretch;
2、子元素:height: inherit;
元素滚动条的样式自定义？
::-webkit-scrollbar-track-piece {
background: #d3dce6;
}

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 1px;
  }

// css给元素设置背景色同时设置背景图，同时背景图的底色也是背景色?
元素background：可以设置背景图和背景色，但是要求背景图必须是透明的才能用；
// 父元素使用了flex布局，子元素宽度或高度使用固定值值时无效？
子元素设置宽高时加上属性 flex: none;

// 样式如何使用媒体查询（即根据屏幕尺寸配置不同样式）?
在style标签里配置完整的样式表：
@media only screen and (max-width: 799px) {}
@media only screen and (max-width: 799px) and (min-wdith: 979px) {}
@media only screen and (min-width: 980px) {}

// 如何覆盖ui库组件的默认样式？
1 自定义样式文件，然后在main.js文件导入。
2 在要改变的样式上加 ! important ;就可以了（！importtant是权重最高的样式，除了行内样式

使用el-table时表头和内容错位如何解决？
body .el-table th.gutter {
display: table-cell !important;
}
.el-table {
th.gutter,
colgroup.gutter {
display: block !important;
width: 6px !important
}
}