关于样式的一些方法
// 强制元素显示尺寸,超出部分用…代替?
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
}
}