在响应式网页设计中，保持一致的纵横比（称为纵横比）对于防止布局累积偏移至关重要。 随着在 Chromium 88、Firefox 87 和 Safari Technology Preview 版本中引入纵横比属性，我们有了更直接的方法来实现这一点。

注：nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式。nth-child(3)表示选择列表中的第3个标签，代码如下：

也就是如何使用已有自定义元素组件创建新的自定义元素组件。例如有一个 A 组件，运行很OK，然后有一个 B 组件，虽然语义和 A 组件相差甚远，但是功能核心却是一致的。

如果是页面底部，我们可以直接 position: fixed;bottom: 0; 基于浏览器定位直接实现。但是他要的效果是基于父级容器，那么我们必须要使用其他手段来定位了

先公布一下答案：z-index不一定会生效，生效了也不一定是值大的在上面，主要取决于层叠上下文;给父元素设置一个很大的z-index不能实现覆盖子元素，但是把子元素的z-index设置成负数却可以满足要求。

很多前端恐怕都不了解HTML5的拖拽怎么实现吧，本文了解了下思路。进行整理备份，便于以后查阅。许拖动图片放置在div内，阻止对事件的默认处理方式，在div内添加属性

有时候我们在做移动端业务的开发时，会遇到这样的问题：我们按照UI设计稿画好了页面，但是在验收功能时，发现在小屏幕手机上有些按钮不好点击，可是UI同学又不希望我们调整按钮的大小，破坏了他的设计

在开发中，我们经常会遇到在数组中查找指定元素的需求，可能大家觉得这个需求过于简单，然而如何优雅的去实现一个 findIndex 和 findLastIndex、indexOf 和 lastIndexOf 方法却是很少人去思考的。

Intersection Observer API提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。在目标元素与视口或者其他指定元素发生交集时和触发配置的回调函数。

有 A 和 B 两个 element。当修改了 A 的时候，B 必须被修改，那么两者就耦合了。在耦合的定义里没有 element 之间的包含关系。耦合是两两之间的，不是父子之间的，耦合差不多就是静态类型的引用关系

这两种方式的区别是: display 设置为 none之后, 该元素不占用文档流，visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已

这种方法实现起来比较简单， 我们一步一步来。首先：编写一个 util 函数 isVisible，它将仅接收一个参数，即 element。

书写页面样式与布局是前端工程师Coding 中必不可少的一项工作，在定义页面元素的样式时，padding 属性也是经常被使用到的。padding 属性用于设置元素的内边距

对于动态生成内容的网页，常常遇到需要判断元素是否存在的场景。在 jQuery 中使用一个不存在的元素完全不会报错，请放心大胆使用。

行内元素的默认对齐方式是基线对齐即（vertical-align：baseline），设置设置overflow不为visible之后改变了他的默认对齐方式为下边距边缘；其他行内元素依然还是基线对齐就会出现下沉的视觉效果