css常用

vertical-align基线对齐

baseline     	默认。元素放置在父元素的基线上。
sub     		垂直对齐文本的下标。
super     		垂直对齐文本的上标
top     		把元素的顶端与行中最高元素的顶端对齐
text-top     	把元素的顶端与父元素字体的顶端对齐
middle     		把此元素放置在父元素的中部。
bottom     		把元素的顶端与行中最低的元素的顶端对齐。
text-bottom     把元素的底端与父元素字体的底端对齐。
length      
%     			使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit     	规定应该从父元素继承 vertical-align 属性的值。

超出…显示

 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;

table底部滚动条加粗

::v-deep .el-table__body-wrapper {
	height: 500px !important; /*给一个固定高度*/
	overflow-y: auto; /*y轴溢出显示滚动条*/
	&::-webkit-scrollbar {
		width: 4px; /* y轴滚动条宽度 */
        height:4px; /* x轴滚动条宽度 */
        background-color: #f5f5f5; /*滚动条背景*/
	}
}

设置文字无法选中

user-select:none

el-dialog设置弹窗居中

::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

pointer-event：none的运用场景：

1、 任何元素设置pointer-event：none的效果相当于input[type=text|button|radio|checkbox] 设置disabled 属性，可以实现事件的禁用，例如：

<a href="xxxxxx" style="pointer-events: none">click me</a>

这个链接，是点不了的，并且 hover 也没有效果,但是可以通过tab来选中该元素，并按下enter键来触发链接，当href属性去掉，就不能通过tab进行触发

2、 当要禁用select下拉框可以设置pointer-event:none；

3、 当很多元素需要定位在一个地图层上面，需用到绝对定位、相对定位的元素，这样的话，这些元素就会盖住下面的地图层，

以至于地图层无法操作。这时元素设置 pointer-events: none，然后地图就可以拖动和点击了。但是操作区域本身却无法操作

了，可以再给需要操作的元素区域设置为 pointer-events:auto