随笔分类 - 前端技术栈 / 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
阅读全文
摘要：个人推荐使用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宽度
阅读全文
摘要：grid布局按列分割时，每行行高都会均分父容器，但我们需要的效果是行高自适应为元素高度即可，此时需要设置 align-content: start; 参考MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content displa
阅读全文
摘要：需要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容器子项是单元格，而非子元素(当然，如果子元素没
阅读全文
摘要：iconfont使用 1 单个icon使用 直接下载png、svg、ai等放在html中使用 svg 可以通过fill控制颜色 通过width和height控制大小和形状 应用场景 这种情况适合用在图标引用少、以后也不需要特别维护的场景 比如设计师用来坐demo原型，前端临时做个活动页面 <svg
阅读全文
摘要：三栏布局 1 overflow + float 左右边栏浮动，中间主体部分通过overflow开启BFC。利用BFC不与浮动元素重叠的特性来完成三栏布局，中间自适应。 缺点是DOM加载是按照书写顺序来的，因此中间主题部分不会优先加载。 圣杯布局和双飞翼布局content被优先加载，解决了这一问题 ~
阅读全文
摘要：css 水平垂直居中方案总结 已知宽高未知宽高 水平垂直居中不管是在项目还是面试中都屡见不鲜，故而写篇博客小结一下。 本篇从父子元素宽高已知或未知的角度来分开叙述。 已知宽高 以下是DOM、样式表以及效果图。由于效果一致，下面将不再频繁列出。 html <div class="parent"> <d
阅读全文
