随笔分类 - CSS
样式相关内容
摘要：/** 关闭浏览器窗口 */ closeWindow() { var userAgent = navigator.userAgent if (userAgent.indexOf('Firefox') !== -1 || userAgent.indexOf('Chrome') !== -1) { wi
阅读全文
摘要：单行 .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 多行 /* 以两行为例 webkit-line-clamp的值 */ .ellipsis-2 { -webkit-box-orient:
阅读全文
摘要：div-class为需要添加0.5px边框的元素的类名，下面是less写法，css写法把嵌套的&::after提出来，换成.div-class::after .div-class { position: relative; &::after{ position: absolute; bottom:
阅读全文
摘要：在ie下，设置width: max-content、fit-content不适配 width: max-content;改为： width: auto; white-space: nowrap; width: fit-content修改父元素display: flex，然后改为width: auto
阅读全文
摘要：元素高度一定，多了后不能增加高度，只能横向滚动 用@media做媒体查询修改元素宽度能实现，但是屏幕放大，一些较为极端的情况下还是需要滚动 <!-- 父元素样式 --> <div class="father"> <div class="child"></div> </div> .father { w
阅读全文
摘要：less写法示例 <div class="parentDiv"> <div class="childDiv">childDiv1</div> <div class="childDiv">childDiv2</div> <div class="childDiv">childDiv3</div> <di
阅读全文
摘要：文字图片flex布局一行居中后要微调文字高度 采用设置padding或者margin的方式不可行，会往外扩 可以设置文字的line-height来调整文字和图片的相对高度
阅读全文
摘要：使用before和after伪类实现空心箭头 // 主要利用before和after的边框实心箭头，通过绝对定位覆盖完成看上去像空心箭头的设计 .dom { display: inline-block; position: relative; &::before, &::after { conten
阅读全文
摘要：添加左划删除手势 // 添加左划手势，通过添加swipeleft类实现 addSwipeLeft() { // 侧滑显示删除按钮 var expansion = null // 是否存在展开的list var container = document.getElementById('shopCard
阅读全文
摘要：通过添加类名实现旋转180度 .beginCSS{ transform: rotate(0deg); transition: transform ease 0.5s; } .endCSS{ transform: rotate(-180deg); transition: transform ease
阅读全文
摘要：一行大小不一样的文字上下居中对齐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
阅读全文
摘要：// 主要利用before和after的边框实心箭头，通过绝对定位覆盖完成看上去像空心箭头的设计，一下为less语法 .dom { display: inline-block; position: relative; &::before, &::after { content: ''; positi
阅读全文
摘要：常见的媒体查询类型mediatype是screen，用于计算机屏幕、平板电脑、智能手机等等，其他类型如print用于打印机等不常见 /* 语法，适用于具体样式 */ @media not|only mediatype and (expressions) { CSS-Code; } <!-- 语法，用
阅读全文
