随笔分类 - css
摘要：css - content-visibility content-visibility：实现可见网页只加载可见区域内容 介绍 content-visibility是一个css属性，它控制一个元素是否呈现其内容，能让用户潜在地控制元素的呈现。用户可以使用它跳过元素的呈现(包括布局和绘制)，直到用户需要
阅读全文
摘要：css - contenteditable contenteditable属性 contenteditable 属性是 HTML5 中的新属性。规定是否可编辑元素的内容。 让contenteditable元素只能输入纯文本 css控制法 一个div元素，要让其可编辑，contenteditable属
阅读全文
摘要：css - object-fit ie兼容 参考资料 github 解决object-fit兼容IE浏览器实现图片自适应 demo <!-- * @createDate: 2022-08-30 14:14:25 * @Author: zclee * @LastEditTime: 2022-08-30
阅读全文
摘要：css - 垂直文字 <!-- * @createDate: 2022-08-15 13:59:01 * @Author: zclee * @LastEditTime: 2022-08-15 15:14:57 * @LastEditors: zclee * @FilePath: \lee-vue-p
阅读全文
摘要：css - hover 选择器参考手册 父对子、子对父、同级之间的控制 css的渲染方式是从外到内，从上到下的遍历页面元素， css中关系选择符类别中也只能是选择子元素E F或E>F，与选择之后的兄弟元素E+F或E~F 所以使用hover来控制其他元素的样式，被控制的元素只能是hover的子元素，或
阅读全文
摘要：css - 浏览器前缀 只在IE上加载CSS 1、前缀分为：-webkit-，-ms-，-moz-，-o- -webkit-：主要兼容的浏览器是：谷歌的Chrome和苹果的Safari浏览器； -ms-：主要兼容的浏览器是：微软的Internet Explorer、Edge浏览器； -moz-：主要
阅读全文
摘要：css - 文本溢出省略 单行 @mixin text_ellipsis() { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行省略 @mixin text_ellipsis_n($n: 2) { displa
阅读全文
摘要：css - 隐藏滚动条 chrome .tabs::-webkit-scrollbar { width: 0px; height: 0px; } ie // 此更改允许在容器上滚动并隐藏IE上的条. .container{ -ms-overflow-style: none; } margin 负值
阅读全文
摘要：css - position:sticky失效原因及注意点 粘性定位：粘性定位可以被认为是相对定位和固定定位的混合，元素在跨越特定阈值前为相对定位，之后为固定定位 #one { position: sticky; top: 10px; } 在 viewport 视口滚动到元素 top 距离小于 10
阅读全文
摘要：error - html元素中莫名奇妙的1px间距 非 box-sizing 原因，尝试过 上移一像素，第二行又出现此问题 取消 overflow:hidden, 边距没了，但底部圆角被遮盖 给子元素底部也设置圆角，尝试解决圆角被遮盖问题，但无效 发现是背景图片层级权重问题，给图片父容器也添加圆角并
阅读全文
摘要：css - flex 踩坑 flex-shrink flex-shrink: 0 会导致元素宽度 无限拉长，不显示滚动或隐藏 ex demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equ
阅读全文
摘要：css - 滚动条样式 - webkit-scrollbar -webkit-scrollbar 浏览器兼容 火狐下的滚动条样式无法去修改，但chorme下的则可以任意修改，惊喜的是IE竟然是最早实现这一功能的浏览器，IE5都能有效果。 IE下的滚动条样式修改跟chrome下的不一样，而且只能修改颜
阅读全文
摘要：css - 文本溢出效果 - 溢出省略选中或hover全显 要求 文本溢出 1. 显示... 2. 鼠标移入项和当前激活项显示全部 实现 flex-shrink 预览 <template> <!-- 表格页，用途行 --> <div class="credit_card_use"> <div cla
阅读全文
摘要：css - flex布局 来源：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + flo
阅读全文
摘要：CSS - pointer-events 水印层事件穿透 intro pointer-events 属性值 pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。 /* Keyword values
阅读全文
摘要：css - 滚动元素内的absolute 现象 scroll 内元素 absolute 定位异常 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
阅读全文
摘要：css 选择器 标签、类、ID选择器 请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，"绿色"设置为"rgb(0, 128, 0)"，"黑色"设置为"rgb(0, 0, 0)"，且字体大小都为20px。 <html> <head> <meta charset=u
阅读全文
摘要：vue - sass样式穿透实现 // 引入的是第三种生效了，第一种不生效，第二种报错 // 第一种 >>> .my-el-form-item{ & >>> .el-form-item__content{ line-height:12px; } } //第二种 /deep/ .my-el-form-
阅读全文
摘要：Element UI 去除 日期时间选择器里的此刻按钮 在vue 项目的全局css属性中修改上边标签的display属性 .el-picker-panel__footer .el-button--text.el-picker-panel__link-btn { display: none; }
阅读全文
摘要：flexible what 终端设备适配的解决方案。在不同的终端设备中实现页面适配。 提示 另外强烈建议对JS做内联处理，在所有资源加载之前执行这个JS。执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2
阅读全文
