好文分享

css 选择相邻激活标签的元素 为了实现图片中所示的样式，需要利用 css 选择器来针对激活标签相邻的前后元素进行操作。具体方法如下： jsfiddle: https://jsfiddle.net/b8fv42g0/ /* 选择激活标签 */.active { background: #fff;}/…

在 css 文本当中，连字符导致内容换行的解决方法 在 css 样式中，如果文本包含连字符，而文本中存在空格，则连字符所在位置可能会导致文本自动换行。这可能会破坏页面的布局和可读性。 问题： 以下 css 文本： 立即学习“前端免费学习笔记（深入）”； build 59-port xxxxxxxx …

css flex 布局左右分区同高 在使用 flex 布局创建左右分区的页面时，有时需要左右分区的高度一致。通常情况下，flex 项会自动适应其内容的高度，导致分区高度不一致。要解决这个问题，有以下两种方法： 基于当前结构的方法： 给 rht 和 lft 盒子添加 height: min-conte…

旋转后长方形与画布轴距计算 在给定的画布中，有一个长方形，在随机旋转一定角度后，如何计算其在画布上的轴距，即距离左上角的距离？ 以下提供一种计算长方形相对于画布左上角的新轴距的方法： const x = 200; // 初始 x 坐标const y = 90; // 初始 y 坐标const w =…

水滴形状用 css 如何绘制？ 要使用纯 css 呈现水滴形状，可以通过修改 border-radius 属性来实现类似的效果。不过，对于绘图，建议直接使用 canvas 或 svg。 使用 css 绘制水滴 .water-drop { width: 100px; height: 260px; ba…

css元素设置em和transition后，为何载入无放大效果 很多开发者在设置了em和transition后，却发现元素载入页面时无放大效果。本文将解答这一问题。 原问题：在视频演示中，将元素设置如下，载入页面会有放大效果。然而，在个人尝试中，并未出现该效果。这是由于macos和windows系统…

flex布局左右同高 在flex布局中，左右布局的元素高度不一致时，想要让边框延伸到最大高度，可以采用以下方法： 基于当前结构的方法： 给.rht和.lft盒子添加： .rht { height: min-content;} 这样可以使弹性盒子被子盒子内容撑开。 使用javascript获取.rht…

css 设置背景图片透明度 如何设置 元素背景图片的透明度？代码如下： 文字要清晰可见 使用 background-color: rgba(255, 255, 255, 0.5); 设置背景颜色不生效，原因在于此属性设置的是背景框的透明度，不会影响背景图片。 解决方案：使用伪元素 可以使用伪元素代替…

inline-block元素错位背后的原因 inline-block元素是一种特殊类型的块级元素，它可以与其他元素行内排列。但是，在某些情况下，inline-block元素可能会出现错位显示的问题。 错位的原因 当inline-block元素设置了overflow:hidden属性时，它会影响元素的…

javascript 修改 div id 属性时样式不生效的问题 在使用 javascript 修改 div 的 id 属性时，虽然 id 确实被改变了，但样式却可能没有相应改变。造成这种情况的原因是，绝对定位的元素在 id 改变后，其位置也会发生变化。 解决方法： 由于 id 改变会影响元素的位置…