随笔分类 - CSS
页面样式
摘要：font-size、weight text-[14px] font-size 14px; font-black font-weight: 900; width w-[20px] width:20px; w-full width:100% !w-[160px] width: 160px !import
阅读全文
posted @ 2025-11-18 20:16
xuanPhoto
摘要：核心代码（提供思路） <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
阅读全文
摘要：.landscape-container { position: absolute; overflow: hidden; } // 竖屏 @media screen and (orientation: portrait) { .landscape-container { width: 100vh;
阅读全文
posted @ 2022-04-29 14:37
xuanPhoto
摘要：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
阅读全文
posted @ 2022-04-29 14:31
xuanPhoto
摘要：重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。 重绘 重绘是当节点需要更改外观而不会影响布局的，比如改变 color就叫称为重绘 回流 回流是布局或者几何属性需要改变就称为回流 减少回流 使用 visibility替换 display: none，因为前者只会引起重绘，后者会引发回
阅读全文
posted @ 2021-09-13 19:12
xuanPhoto
摘要：<style style="display: block" contenteditable> </style> 是的在style上面加上 style="display: block" contenteditable 就可以在页面中实时编辑css 页面也能是实时响应
阅读全文
posted @ 2021-08-31 09:34
xuanPhoto
摘要：预览缩略图 html <body> <style> div { width: 160px; height: 160px; display: flex; justify-content: center; background: pink; /* 居中 */ } img { /* 核心是max- */
阅读全文
posted @ 2021-08-28 11:03
xuanPhoto
摘要：.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); 两者原理一样
阅读全文
posted @ 2017-05-19 11:47
xuanPhoto
摘要：-webkit-font-smoothing: antialiased;
阅读全文
posted @ 2017-03-26 00:28
xuanPhoto
浙公网安备 33010602011771号