CSS
Alice_hhu
Web前端菜鸟
展开
-
SVG画双色虚线并带有流动效果
SVG画双色虚线并带有流动效果。原创 2024-06-05 10:26:53 · 452 阅读 · 0 评论 -
Element-Plus自定义主题(scss变量覆盖)
Element-Plus自定义主题(scss变量覆盖)原创 2023-07-31 16:23:25 · 2028 阅读 · 0 评论 -
子元素position: fixed,宽度无法与父元素保持一致的问题(借助父元素使用 position: absolute)
【场景】左侧导航栏,可以展开收起,右侧主体内容,有部分内容需要固定在页面底部。【问题】需要固定的部分用 position: fixed,但是脱离了文档流,无法与右侧主体内容的宽度保持一致(因为左侧导航栏可以展开收起,所以右侧主体内容的宽度是会变化的)【解决方法】使用 position: absolute(使用的是 Vue的语法)页面效果(PS 右侧主体内容中,正文内容高度是超出页面高度的,需要滚动)左侧导航栏展开,正文内容未滚动左侧导航栏收起,正文内容滚动到底部HTML代码.原创 2021-11-23 18:30:00 · 2485 阅读 · 2 评论 -
CSS一个子元素固定宽度,另一个子元素宽度自适应
弹性盒子 flex.parent { width: 100%; display: flex;}.child1 { width: 200px;}.child2 { flex: 1;}原创 2021-06-22 10:29:27 · 587 阅读 · 1 评论 -
子元素从左往右排列,均匀分布,自动换行(子元素个数不确定)
经常碰到一些页面,展示不确定个数的卡片,要求从左往右排列,均匀分布,超出指定个数需要换行,如果一行不满指定个数,仍然从左开始排列。如果每行个数相同,那使用 flex弹性布局,设置 justify-content: space-between即可,但个数不确定,如果最后一行个数不满,那就跟前面几行的排列样式不一致了因此,自己写了一个使用 float浮动➕calc计算来达到此要求的 css样式,以此记录(以每行5个为例)HTML代码 <p>一行 不满5个</p> &.原创 2020-10-28 21:52:53 · 4427 阅读 · 0 评论