随笔分类 - CSS
页面样式
摘要:核心代码(提供思路) <up-waterfall v-model="flowList"> <template v-slot:left="{leftList}"> <view v-for="(item, index) in leftList" :key="index"> <!-- 这里编写您的内容,i
阅读全文
摘要:效果 HTML/CSS <template> <div> <div class="identify-btn-media"> <div class="identify-btn-box active"> <div class="loading"> <div class="line1"></div> <d
阅读全文
摘要:变量名称必须以两个破折号(--)开头,且区分大小写! 因为$被sass抢了 @被less抢了 所以用 --开头声明变量 body { --blue: #1e90ff; } div{ color: var(--blue); } 用js获取并赋值--blue document.querySelector
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要:.landscape-container { position: absolute; overflow: hidden; } // 竖屏 @media screen and (orientation: portrait) { .landscape-container { width: 100vh;
阅读全文
摘要:reset html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu
阅读全文
摘要:重绘和回流是渲染步骤中的一小节,但是这两个步骤对于性能影响很大。 重绘 重绘是当节点需要更改外观而不会影响布局的,比如改变 color就叫称为重绘 回流 回流是布局或者几何属性需要改变就称为回流 减少回流 使用 visibility替换 display: none,因为前者只会引起重绘,后者会引发回
阅读全文
摘要:<style style="display: block" contenteditable> </style> 是的在style上面加上 style="display: block" contenteditable 就可以在页面中实时编辑css 页面也能是实时响应
阅读全文
摘要:预览缩略图 html <body> <style> div { width: 160px; height: 160px; display: flex; justify-content: center; background: pink; /* 居中 */ } img { /* 核心是max- */
阅读全文
摘要:.box{ cursor:url('xxx/pointer.cur'); // 注意图片格式 }
阅读全文
摘要:::-webkit-scrollbar-track-piece { background-color: #fff; -webkit-border-radius: 0 } ::-webkit-scrollbar { width: 10px; height: 10px } ::-webkit-scrol
阅读全文
摘要:left:12px; 重置就用 left:unset; 这样处理的背景就是 right和left相互排斥了 你想用right 但修改的目标有left了所以你加上right也会被left影响 就可以用left:unset 覆盖它
阅读全文
摘要:html <section class="playContainer"> <li class="playBtn"> <a href="#" title="start">Start</a> </li> <li class="pauseBtn"> <a href="#" title="pause">Pa
阅读全文
摘要:为什么重写Sass? 为什么使用Dart? 各种实现的后续规划?
阅读全文
摘要:<div class="redbox">文字文字</div> 问题复现 // 会左右滚动 因为 width:100%; 你还 padding-left:30px; .redbox{ width:100%; height:30px; padding-left:30px; background:#c00
阅读全文
摘要:demo .imgList { &::-webkit-scrollbar { display: none; } overflow-x: auto; overflow-y: hidden; white-space: nowrap; li { width:px2rem(140); height:px2rem(...
阅读全文
摘要:css伪类 :after 在元素后面插入内容 :hover 鼠标移入时进行 :before 在元素前面插入内容 :link 未选中的链接 :active 点击后产生什么变化 :nth-child 匹配父级的第几个元素 :nth-of-type() 某个元素下的第几个元素
阅读全文
摘要:因为body和html,默认高度是auto 所以相对于他们作为父元素设置position:relative的top值需要加上body,html{height:100%;}
阅读全文
摘要:background-color: transparent; 或者 background-color: rgba(239, 239, 239, 0); 两者原理一样
阅读全文