随笔分类 - 前端技术栈 / CSS
摘要：Tailwind CSS 实现响应式布局 CSS3 如何实现响应式 先聊聊纯 CSS 方案是怎么做的： 使用 CSS3 特性:@media scrren 表示设备屏幕，and 用于并列多个条件 一般来讲每个响应式系统的 ui 规范都要有多个断点: small：640px 起，横向模式显示状态的手机
阅读全文
摘要：一文掌握 Tailwind CSS 基础 工欲善其事，必先利其器 先推荐一些好用的工具： TailWind CSS 代码提示功能 vscode 插件：Tailwind CSS IntelliSense Tailwind CSS 速查网站：https://tailwind.muzhifan.top/
阅读全文
摘要：关于Tailwind CSS Tailwind CSS 是一个高度可定制的 CSS 框架，采用实用工具优先的方式，允许开发人员直接在 HTML 中应用样式 与传统的 CSS 框架不同，Tailwind 提供的是一组预定义的 CSS 类，用户可以通过组合这些类快速构建现代化的响应式网页 实用工具优先
阅读全文
摘要：100vw表示视口宽 10vm表示视口宽的10% .square { width: 10%; height: 10vw; background: tomato; }
阅读全文
摘要：思路是先画一个三角形，再加border-radius div { border: 100px solid transparent; width: 0; height: 0; border-radius: 100px; border-top-color: red; }
阅读全文
摘要：display:none 隐藏元素，同时DOM不会出现在文档中 会触发回流 属于不可继承属性 不会被读屏器读取 visibility：hidden 隐藏元素，但是元素还会再文档中占位 会触发重绘 属于可继承属性 可以被读屏器读取
阅读全文
摘要：本质区别 link是html标签，@import是css特性 基于以上 link能被js控制，@import不行 link除了加载css外，还能加载其他资源，@import只能加载css @import在页面加载完了之后才会加载，在网速慢的情况下可能造成页面闪烁，而link和网页同时记载 link是
阅读全文
摘要：选择器优先级 权重 1000 内联样式 100 id选择器 10 类选择器，伪类选择器，属性选择器 1 标签选择器，伪元素选择器 0 相邻兄弟选择器、子选择器、后代选择器、通配符选择器 其他情况 !important样式优先级最高 优先级相同，按代码书写顺序，顺序在后面的生效 继承得到的样式优先级最
阅读全文
摘要：骰子三点布局 思路是使用flex布局或中，弹性子项中的align-self属性 align-self属性可以覆盖弹性容器中的align-items的值, 让子项设置自己的布局属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
阅读全文
摘要：js draggable 拖拽效果 drag 拖拽中 dragstart 开始拖拽 dragover 拖拽悬浮时触发 dragenter 拖入目标节点 dragleave 离开源节点 drop 落进目标节点 event.dataTransfer.setData 拖拽时传输数据，可用于dragstar
阅读全文
摘要：grid布局按列分割时，每行行高都会均分父容器，但我们需要的效果是行高自适应为元素高度即可，此时需要设置 align-content: start; 参考MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content displa
阅读全文
摘要：个人推荐使用after伪元素的方式实现 张大佬的博文: https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
阅读全文
摘要：word-break: break-all; 所有单词碰到边界一律拆分换行，不管你是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。 可以作用于table元素，同时设置宽度为100%，表格内容宽度将保持在table宽度
阅读全文
摘要：需要js手动设置inpu的indeterminate属性为true input:indeterminate::after { content: ""; display: block; height: 3px; width: 7px; margin: 40% auto; background-colo
阅读全文
摘要：并不是所有的CSS属性都能触发GPU的硬件加速，实际上只有少数属性可以，比如下面的这些： transform opacity filter 对于transform，2D transform 动画在开始和结束时发生的 repaint 操作，因此建议采用以下方式 .example1 { transfor
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：<div class="ul-2"> <div class="item">1</div> <div class="item">2</div> <div class="item">2</div> <div class="item">2</div> <div class="item">2</div> <
阅读全文
摘要：display: inline-block; max-width: 206px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; // 2行省略 overflow: hid
阅读全文
摘要：1postcss移动端适配： postcss-px-to-viewport 1 加浏览器前缀 2 在代码里设置px，框架自动设置成rem 3 css全局全命名 yarn add -D postcss-px-to-viewport webpack别名 移动端布局方案非常重要，写篇博客记录下来 vue.
阅读全文
摘要：Grid 网格布局 网格布局是最强大的CSS布局方案，将网页划分成一个个网格 可以任意组合不同的网格，做出各种各样的布局 网格布局与弹性布局有一定的相似性，都可以指定容器内部多个项目的位置， 但是也存在重大区别 1.1 和flex布局的区别: grid容器子项是单元格，而非子元素(当然，如果子元素没
阅读全文
浙公网安备 33010602011771号