Julie_Go的专栏

目标：不考虑使用UI组件，利用css和table标签实现表格前几列固定在左侧，其余内容水平滚动实现方式:利用css 属性 position: sticky;首先查询一下使用场景浏览器是否兼容（下图），确保在需要的场景上支持sticky粘性定位，当父元素在视窗范围内该元素的定位不受影响，当页面滚动，父元素将要移出视窗范围时，定位会变成fixed。根据这一特性，给表格内需要固定的列或行设置sticky属性并指定left、top、bottom、right即可实现...

问题如上图：解决过程：给table外嵌套的div设置了样式page-break-after也没有效果，最后索性给打印区域添加加边框，准备看看预览时空白页里有什么，结果后一页的空白页就这么没了(⊙o⊙)…观察发现，加上边框后，table的宽度确实有减少一丢丢，就这样吧。。。加了border: 1px solid transparent;附图解决之后的效果...

在img标签上使用css属性：object-fitobject-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。可以满足对图片在固定宽高范围内进行剪切 保持原始比例，有以下值object-fit: fill|contain|cover|scale-down|none|initial|inherit;值 描述 fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 contain 保持原有尺寸比例。内容被缩放。 cover 保持原

input{ -webkit-appearance: none!important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}记录一下

在项目引入element-ui 等第三方ui库时，自定义css覆盖第三方样式的方式：1.scoped的自定义css无法覆盖第三方样式，把自定义css写在全局style下（一般除非是全局样式，否则容易污染其他组件内的样式）2.使用 >>> (普通css文件内) 或/deep/ (使用sass 或less 编译)注：有时/deep/会报错，可以使用::v-deep 代替<style lang="scss" scoped>::v-deep .el-table .

给正方形设置两个相邻的边框，旋转角度即可实现不同方向，类似上面的箭头图案 { width: 7px; height: 7px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(-125deg);}...