2024-04-15页面功能 可实现模块的放大缩小以及位置的更换 同时echarts会跟着父元素大小而变化，有兴趣者自己研究吧 代码放在下面了 直接cv就好 不难 但是有些细节要注意 比如draggable需要绑定唯一的key值否则改变元素样式时会出问题 以及echarts跟随父盒子自适应需要在echarts中配置grid属性并结合window的监听事件去实现。在使用draggable的时候遇到了一些问题 好在最终解决了 记录下希望能帮助到有缘人。_vue3中使用 vuedraggableresizable拖拽变大变小更改px

https://www.qianduange.cn//article/5005.html 分类：前端知识

2024-04-12因为数据是由后端传过来的，有些会很长有些会比较短，如果只是一味的调整grid会导致短数据前的留白过于多，布局不合理。这个时候就需要用一些别的属性。如上图这样一个横向的柱状图，y坐标轴的内容太长后会导致显示不全。_echarts柱状图y轴文字太多如何解决

https://www.qianduange.cn//article/4787.html 分类：前端知识

2024-04-08直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴重叠。直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴重叠。可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip。可以设置在全局，即 tooltip。可以设置在系列中，即。_echarts重新改option

https://www.qianduange.cn//article/4659.html 分类：前端知识

2024-04-08对父元素操作 ： justify-content:center;grid布局：对父元素操作：place-items：center。

https://www.qianduange.cn//article/4585.html 分类：前端知识

2024-03-29可以看到，虽然第四行没有内容，但是row确实存在并占据了那部分空间。(2) minmax上面的例子中我们给了row一个固定高度，这导致一个问题：如果某个grid item中的内容特别多，受制于固定的高度，部分内容将无法显示，如下图：为解决这个问题，css提供了minmax函数，让我们可以设置row的最小高度和最大高度，最大高度取auto后便可以让row的高度自适应：auto``));效果：如果我们想给行和列之间加上间隔，也有现成的方法：效果：

https://www.qianduange.cn//article/4244.html 分类：前端知识

2024-03-29本文记录了grid一些常用参数配置

https://www.qianduange.cn//article/4243.html 分类：前端知识

2024-03-21web前端：网页布局【基础布局、响应式布局、栅格布局、表格布局（table）、弹性布局（flex）、网格布局（grid）】_flex布局table

https://www.qianduange.cn//article/4023.html 分类：前端知识

2024-03-15你可以选择使用absolute绝对定位为这些块元素定位，也可以使用多个盒子嵌套来实现。当然最简单的方法是使用 CSS3 grid网格布局。grid 布局能够让我们更加灵活组织盒子的搭配方式。

https://www.qianduange.cn//article/3794.html 分类：前端知识

2024-03-11网格布局（grid）是CSS中最强大的布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。上图这样的布局，就是 grid 布局的拿手好戏。grid 布局与 Flex 布局 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。grid 布局远比 Flex 布局强大。_grid-template-areas

https://www.qianduange.cn//article/3594.html 分类：前端知识

2024-03-11display的属性值有：block、inline、flex、grid、table、flow、flow-root、ruby、list-item、table-row、table-cell、table-column、table-caption、table-row-group、table-header-group、table-footer-group、table-column-group、ruby-base、ruby-text、ruby-base-container、ruby-text-container等等。_css display

https://www.qianduange.cn//article/3581.html 分类：前端知识