![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 62
Lucy0612
这个作者很懒,什么都没留下…
展开
-
2022-11 CSS:flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
如上图,父元素左右flex布局,右侧子元素flex布局且未设置宽度的状态下,对右侧子元素的第三行标签盒子也设置flex布局。如上图,父元素左右flex布局,右侧子元素flex布局且未设置宽度的状态下,对右侧子元素的第一行也设置flex布局。再对第一行公司名称设置flex:1,实现不设置文字宽度的超出隐藏。另:以上两种情况,右侧盒子无需设置flex:1。设置最小高度是为了,当第三行标签不存在的时候,右侧盒子高度会小于图片高度,由于父元素设置了aline-items:center,右侧盒子会居中。原创 2022-11-25 21:19:15 · 1713 阅读 · 0 评论 -
elementUI 走马灯两侧按钮向外 - 走马灯多个数据时对数组的处理
elementUI走马灯分组数据展示原创 2022-10-27 08:58:39 · 509 阅读 · 0 评论 -
背景图片设置:视觉差效果的实现background-attachment: fixed;
1.background-sizebackground-size:cover; 尽可能显示背景图片,会按照自身的比例伸缩background-size:contain;将图片完全显示,会按照自身的比例伸缩background-size:100% 100%;按容器比例撑满,图片变形;background-size:val val;给图片固定的宽高,第二个值不写则为auto2.视觉差的实现 [class]{ width: 800px; height: 200px;原创 2020-08-08 15:34:01 · 490 阅读 · 0 评论 -
背景图片设置:background-repeat的space和round属性
1.容器空间小于图片space 背景图不会产生缩放,会被裁切round 将背景图压缩至容器大小2.容器大于背景图space 在不缩放的前提下尽可能多的重复图片 ,不足的空隙均分(类似于flax布局中的content-between)round 充分利用容器空间,重复n次之后(x/y轴方向)如果剩余空间大于等于imgWidth*50%则重复第n+1次,否则拉伸已经重复的背景图...原创 2020-08-08 15:05:44 · 2131 阅读 · 2 评论 -
CSS属性选择器,易混淆选择器,常用选择器
1.存在属性和值属性选择器[attr]: 具有attr属性的元素[attr=val]:attr属性仅为val的元素[attr~=val]: attr属性包含val的元素[attr*=val]:attr属性包含val字符串的元素[attr^=val]:attr属性的值以val开头(包括val)的元素[attr$=val]:attr属性的值以val结尾(包括val)元素[attr|=val]:attr属性的值以val-开头(包括val)的元素2.易混淆选择器.val1.val2原创 2020-08-08 10:39:09 · 160 阅读 · 0 评论 -
Emmet语法-HTML速写
Emmet是一款插件,只要能安装他的编辑器都能使用,大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。安装方式和平时安装插件一样搜索这个emmet插件安装,每个编辑器安装方式不同,请各自尝试1.html初始结构!<!DOCTYPE html><html lang="zh"><head> <meta charset="UT原创 2020-08-08 10:41:36 · 169 阅读 · 0 评论