日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

css小球旋转loading动画。

script 标签的 defer 和 async 属性都是用来控制外部脚本的加载和执行方式的，他们对于改善页面加载非常有帮助。defer 下载不会阻止 DOM 的构建，但是在 DOMTree 构建完成后，在 DOMContentLoaded 事件之前执行，并且 defer 脚本的执行是有序的。async 下载同样不会阻止 DOM 的构建，但是不会保证在 DOMcontentLoaded 之前或者之后执行，也不能保证顺序，它的每个脚本都是独立的。

padding-top 属性接受百分比值时,其百分比是基于父元素的宽度来计算的,而不是自身元素的宽度。更方便，但存在兼容性问题。

效果如上，其实核心除了css的，还有就是打光效果，原理其实就是两块遮罩，如下👇。

【代码】【CSS】tailwindcss 如何关闭默认样式。

在移动端开发中，1px 的边框在高 DPI 屏幕上可能会显得过粗，这是因为移动设备的像素密度（DPI）通常比传统的计算机屏幕高。在高 DPI 屏幕上，1px 实际上可能会被渲染为 2px 或更多，这使得边框看起来更粗。为了解决这个问题，我们通常会尝试使用更细的边框，比如 0.5px 的边框。1px问题以及如何画出0.5px边框的问题。

默认情况下，连续的英文或数字文本不会在空格处换行，这可能导致布局问题。

单独 script 标签：不做任何处理加载 JS 脚本加载 JS 脚本加载 JS 脚本相同点：都可以加载 js 脚本并在加载完后由浏览器执行不同点：是否会阻塞浏览器解析 HTML 不同JS 执行顺序不同。

直接在全局 CSS 文件中添加以下样式。

总结起来，使用属性是实现固定宽高比的现代方法，因为它直接控制元素的宽高比，不受元素宽度的影响。而技巧则是一种兼容性更好的解决方案，适用于那些不支持属性的旧浏览器。

【代码】【CSS】grid 布局一行自动填充，每行最大限定px。

CSS 属性 scroll-snap-type 设置了在有滚动容器的情形下吸附至吸附点的严格程度。使用也可以用于垂直滚动，全屏展示就是一个很好的例子

integrity 属性integrity属性用于校验脚本文件的完整性，防止脚本被篡改。它包含一个哈希值，用于验证脚本文件的真实性。浏览器会在下载脚本文件后，计算其哈希值并与integrity属性中的值进行比较。如果两者不一致，则浏览器会阻止脚本执行，并显示警告信息。crossorigin 属性属性用于控制跨域脚本的加载行为。anonymous：表示脚本文件不会携带任何凭据，例如 cookie 或 HTTP 认证信息。：表示脚本文件可以携带凭据。两者关系integrity属性和。

【代码】【CSS】 css 实现文字的渐变色。

【代码】用 CSS 写一个渐变色边框的输入框。

加载动画，直接用 CSS 就可以实现，样式可以自己改，逻辑大差不差。

【代码】【CSS】写一个原生的透明 input 标签输入框。

1.初始化 cssbody { height: 100%; margin: 0; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: Helvetica Neue, Helveti...

width: fit-content;width: -webkit-fit-content;width: -moz-fit-content;

效果实现<video autoplay muted loop> <source src="@/assets/res-kg/video-kg.mp4" type="video/mp4" /> </video>video { position: absolute; top: 0; left: 0; obj...

在给项目的邮箱进行模板样式重构的时候发现了一个特别好用的网站：https://mjml.io/如何编写？点击上面的 Templates 就可以进入到网站的模板页面，提供了很多基础模板，左侧的代码需要我们自己格式化一下。按照他们给的模板组件就可以直接开始编写，“依葫芦画瓢”，基本上这种编写方式比起传统的自己手下 table 写邮箱太方便，而且网站在进行编译的时候还兼容大部分客户端和移动...

是什么块级格式化上下文(一句话完事)。怎么做MDN BFC 触发条件。常用我们只需要知道下面五个：绝对定位元素(元素的 position 为 absolute 或 fixed)行内块元素(inline block)overflow 值不为 visible 的块元素弹性元素(display 为 flex 或者 inline-flex 元素的直接子元素)解决了什么...

问题描述flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况。解决方法先做个记录，待学习更新...参考文章flex布局 justify-content：space-between； 解决最后一排数量不够自动向两端排列问题，附录grid栅格布局完美解决...

发现问题今天工作才发现的，原来我一直就理解错了！！MDN官网对这个选择器的的定义是：:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。/* 在每组兄弟元素中选择第四个 元素 */p:nth-of-type(4n) {color: lime;}重点来了！！！他说明的是标签，针对的只是标签，因此，比如网上关于这...

前言入职的第一个任务，当时没看懂任务中的这个框架，自己写了一套html，结果不符合响应式的要求，在看了一遍官方官网站后才看懂这个框架，确实是对于编写邮箱html的帮助特别大。在编写代码之前，我们必须先了解html邮箱的编写规则和要求，可以参考这几篇博客的内容，对于了解html邮箱的介绍很有帮助。HTML Email 编写指南创建响应式HTML电子邮件开始Foundation官网进入官网下...

* { outline: 1px solid #0000ff; }通过全局设置outline样式查看所有样式边框，非常方便！！！outline属性详细介绍

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素。块状元素块状元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt 等等都是块元素，它在布局中的行为：支持全部的样式如果没有设置宽度，默认的宽度为父级宽度100%盒子占据一行、即使设置了宽度内联元素内联元素，也可以称为行内元素，布局中常用的标签如：a、span...

display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2; // 第几行出现...效果

当我们的文本过多的时候，会导致文字换行，页面布局不是很美观，这时候需要我们进行不换行，只显示一行，并且对文字进行处理。解决方法使用 white-space 、text-overflow 和 overflow: hidden 属性配合/* 文本不会换行 */white-space: nowrap;/* 显示省略符号来代表被修建的文本 */text-overflow: ellipsis;...

是什么语义化标签是一种写 HTML 标签的方法论/方法，简单说就是用正确的标签做正确的事。怎么做实现方法就是遇到标题用 h1 到 h6，遇到段落用 p，遇到文章用 article，主要内容用 main，侧边栏用 aside，导航用 nav 等等(其实就其中文对应英文翻译)。解决了什么问题明确了 HTML 书写规范。优点适合搜索引擎优化(SEO)适合人类阅读，增加代码的可读...