随笔分类 - html/css
摘要：场景：下拉弹框显示时，想要点击其他地方即隐藏（不使用蒙板，下拉弹框定位到点击显示的位置） tabindex可以使得相应的节点具有 focus 和 blur 事件 tabindex=负值 (通常是tabindex='-1')，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内
阅读全文
摘要：一.font-family: Google Fonts : https://fonts.google.com/ 例如Barlow 字体： 注意： 每个字体粗细类型都有 Italic 相对应，即为对应的斜体字 // 字体粗细类型(从细到粗) Thin ExtraLight Light Regular
阅读全文
摘要：问题： 1. 如何进行消息通信（父发给子，子接收父的消息，也可父直接调用子的方法； 子发给父，父接收子的消息；） 2. 如何找到指定的子或者父window（如果iframe层级过多），又如何在发送消息时不影响其他的message监听 一、iframe的使用 <iframe style={{borde
阅读全文
摘要：一、前言 我们在编写网页时，往往需要兼顾网页在不同屏宽情况下的显示 而有时为了省事，没时间写新的页面，也为了兼容考虑，这就需要使用等比压缩了 等比压缩的核心是rem 二、正文 （一）、rem的使用 rem是css3中新增加的一个单位属性(font size of the root element)
阅读全文
摘要：一、前言 如上图，页面在渲染和画图时，耗时还是比较多的，这就对我们的编写要求愈加严格。 我们有很多方法来减少上图所示的页面加载耗时的，比如 但是更多的还是在于平时的编写规范，我们需要了解浏览器，让他更加便捷快速的理解（加载）我们的代码。 另外，在编写页面时，如果内容较多，相应的css也会变得更多、更
阅读全文
摘要：一、前言 使得文本换行有很多方式， 二、正文 1. 强制不换行 2. 控制文本换行 3. 强制单词内或链接内断行 详细介绍： （一）white-space 属性设置如何处理元素内的空白 white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
阅读全文
摘要：一、前言 要说readonly和disabled的区别，就需要先说说两者的联系； 两个属性都可以作用于input等表单元素上，都使得元素成为“不可用”的状态； 两者的字面意义先介绍一下： readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单“只读”与“不只读”似乎
阅读全文
摘要：一、前言 在CSS中，我们经常会使用到transform、transition、translate、animation（@keyframes）这些长得相似，又不好区分的属性（值）。每当需要使用它们，都需要去查找相关的介绍和使用方法，完成后却又继续困惑中。而本篇博客将将它们汇合起来，一起介绍给你。 简
阅读全文
摘要：2021-10-11 更新： 两种不同的文本省略显示方式： 单行省略，多行省略 单行省略： white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; 多行省略： overflow: h
阅读全文
摘要：一，前言： 刚加的css怎么没有渲染出来？浏览器中查看，发现是被其他的css给覆盖了，相信我们都曾遇到过这样的问题。那么浏览器是如何选择css标签的渲染顺序的呢？换句话说，css选择器的优先级是怎么规定的？ 二、正文： 先上一个例子 问：有多少种css选择器可以对<p>标签样式产生影响呢？ 如果详细
阅读全文
