![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web
文章平均质量分 55
前端开发
jiqiren1994
基本所有文章都是总结性质得文章,将网上大部分博主的内容整合了一下,加入了部分自己的理解,方便自己工作时查阅资料用,好处就是不用忘记了去搜各种文章。
展开
-
el-table 的fixed与max-height属性冲突
问题描述同时设置了这两个属性,然后固定列与最大高度功能都没有问题,但是却会输出以下的报错。明显是初始化的时候某个对象是null导致的。查看源码查看源码我们能看到这里有判断this.maxHeight是否为空,也就是我们是否有设置。有设置的话,会返回一个对象,其中会调用this.data.length。问题就是这里。初始化时this.data=null。解决办法对于要设置固定值的这种用法我建议取消fixed的设置。对于是有设置变量绑定的这种,会在后续修改这个值的用法,我们可以...原创 2021-02-24 15:29:04 · 941 阅读 · 3 评论 -
为什么要使用Flex布局
Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:在不同方向排列元素重新排列元素的显示顺序更改元素的对齐方式动态地将元素装入容器...原创 2021-02-23 10:44:17 · 733 阅读 · 0 评论 -
element-ui layout布局
创建布局通过基础的 24 分栏,迅速简便地创建布局。通过 row 和 col 组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row> <el-col :span="12"><原创 2021-02-03 13:31:18 · 355 阅读 · 0 评论 -
Flex 布局
基本概念采用Flex布局的元素,被称为Flex容器(flex container),简称“容器”。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称“项目”。容器默认存在两根主轴:水平方向主轴(main axis)和垂直方向交叉轴(cross axis),默认项目按主轴排列。main start/main end:主轴开始位置/结束位置;cross start/cross end:交叉轴开始位置/结束位置;main size/cross size:单个项目占据主轴/交叉原创 2021-02-02 16:43:41 · 148 阅读 · 2 评论 -
element-ui 响应式布局
element-ui 响应式布局<el-row :gutter="10"> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content原创 2021-02-02 15:19:51 · 2071 阅读 · 0 评论 -
网页布局总结
一、区域分块将整体分为几个部分,可以使用div+width:百分比;table+width:百分比;栅栏布局二、小面积分布div+width:百分比;table+width:百分比;float:浮动+width:百分比;display:flex 弹性布局+width:百分比;注意:栅栏布局,没办法自由设置所占宽度;其次table没有div+width:百分比清晰明了。弹性布局与浮动差不多...原创 2021-01-29 11:18:29 · 110 阅读 · 0 评论 -
完成一个两排的,输入框与条件名分别在两排的查询条件块
1. 使用table 来实现两行tr,对应的td处录入写入条件名与输入框即可。2. 使用栅栏el-col来实现两行el-row,对应的el-col处录入条件名与输入框即可。3. inline-block条件名与输入框是两个div,各在两行,然后设置他们的父div为行内块inline-block,这样这些查询条件块就能在一行并存了。4. 弹性布局条件名与输入框是两个div,各在两行,然后设置他们的父div为display: flex; flex-wrap: wrap;即可。...原创 2021-01-27 11:33:44 · 195 阅读 · 0 评论 -
完成一个左右布局的条件查询块
左右分布的几种实现1. table—table的li实现实现原理: table标签是能够具有实现左右布局的属性,也是我们项目中使用最多的。table布局也是页面布局中使用的最早的布局方式,随着前端技术的发展,table布局由于自身的局限性逐渐被div布局取代。2. inline-block实现原理:display:inline-block属性是介于行级元素(display:inline)和块级元素(display:block)之间的属性,它可以像行级元素一样水平布局,也可以像块级元素设置宽高属原创 2021-01-27 11:15:23 · 296 阅读 · 0 评论 -
获取鼠标右键的坐标
重要的属性和函数event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。event.screenX、event.screenY鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性document.documentElement与document.bodydocument代表的是整个文档(对于一个网页来说包括整个网页结构),document.docu原创 2020-12-20 19:46:23 · 969 阅读 · 0 评论