CSS属性继承与元素隐藏全解析

文章目录

- [一. css中可继承和不可继承的属性有哪些？](#一. css中可继承和不可继承的属性有哪些？)
- [二. 隐藏元素的方式？](#二. 隐藏元素的方式？)
- - （1）、占据空间的隐藏（视觉隐藏，布局保留）
  - （2）、不占据空间的隐藏（布局移除）
  - [（3）、移除 DOM 节点（彻底隐藏）](#（3）、移除 DOM 节点（彻底隐藏）)
  - （4）、使用建议
- [三. 过渡和动画的区别？](#三. 过渡和动画的区别？)

一. css中可继承和不可继承的属性有哪些？

可继承的属性主要包括字体、文本、列表、表格、光标 等与内容展示相关的样式；

不可继承的属性主要包括盒子模型、定位、背景、显示模式等与布局结构 相关的样式。
可继承的属性

字体相关：font-family、font-size、font-weight、font-style等

文本相关：color、text-align（文本对齐方式）、line-height（行高）、letter-spacing（字母间距）、word-spacing（单词间距）等

列表相关（List用于展示有序/无序条目集合<ul> <ol> <dl>）：list-style-type、list-style-position、list-style-image等

表格相关(用于展示行列对应的结构化数据<table> <thead> <tbody><tfoot><th><tr><td>)：border-collapse、border-spacing、caption-side等

其他：visibility、cursor（鼠标指针样式）、quotes等
不可继承的属性

盒子模型：width、height、margin、padding、border等
定位相关：position、top、right、bottom、left、z-index等
背景相关：background、background-color、background-image、background-repeat等
显示相关：display、float、clear、overflow等
其他：opacity、box-shadow、text-shadow、transform等

特殊说明

可继承属性可通过设置 inherit 强制子元素继承父元素样式（如 border: inherit）。

不可继承属性若想让子元素使用父元素的值，也可显式设置 inherit。

部分属性的继承行为可能受元素类型影响（如 a 标签不会继承父元素的 color，需单独设置）。

二. 隐藏元素的方式？

在前端开发中，隐藏元素的方式有多种，核心区别在于是否占据页面空间、是否影响交互、是否可被屏幕阅读器识别等。以下是常用方式的详细对比和使用场景：

（1）、占据空间的隐藏（视觉隐藏，布局保留）

元素不可见，但仍占据 DOM 位置 不影响页面布局，适合需要保留占位的场景。

visibility: hidden
效果：元素完全透明，不可见，但保留宽高和布局位置。
交互性：无法触发点击、hover 等事件（元素本身不可交互）。
DOM 状态：元素仍在 DOM 中，可通过 JS 获取和修改。
示例：

css 复制代码

.hidden-visibility {
  visibility: hidden;
}

场景：临时隐藏元素但保留布局（如表单错误提示默认隐藏，提交后显示）

opacity: 0
效果：元素透明度为 0，视觉不可见，保留宽高和布局位置。
交互性：可触发事件（元素实际存在，只是透明）。
DOM 状态：正常存在，支持 JS 操作。
示例：

css 复制代码

.hidden-opacity {
  opacity: 0;
  transition: opacity 0.3s; /* 支持过渡动画 */
}

场景：需要隐藏但保留交互（如悬浮显示的下拉菜单，隐藏时仍可点击触发），或需要淡入淡出动画。

绝对定位偏移（视觉移出视口）
效果：通过position: absolute将元素移到屏幕外，视觉不可见，不影响原布局（因绝对定位脱离文档流，原位置不占位，原元素若为非定位父级，绝对定位子元素不影响父级布局，但父级仍可能占位，需注意）。
交互性：默认可触发事件（需配合pointer-events: none禁用）。
示例：

css 复制代码

.hidden-offscreen {
  position: absolute;
  left: -9999px;
  top: -9999px;
  /* 可选：禁用交互 */
  pointer-events: none;
}

场景：隐藏元素但保留 DOM 结构（如 SEO 优化的隐藏文本，或临时移出视口的元素）。

（2）、不占据空间的隐藏（布局移除）

元素完全不可见，且不占据页面空间，DOM 结构仍存在（除非移除节点）。

display: none
效果：元素从页面中 "消失"，不占据任何空间，布局会重新计算。
交互性：无法触发任何事件。
DOM 状态：仍在 DOM 树中，可通过 JS 恢复（display: block/inline等）。
注意：会触发元素的hide事件，子元素也会被隐藏，恢复时需指定正确的display值（如原是inline，不能直接设为block）。

css 复制代码

.hidden-display {
  display: none;
}

场景：完全隐藏元素且不保留布局（如弹窗关闭、条件渲染的内容）。

height: 0; width: 0; overflow: hidden
效果：元素宽高设为 0，溢出内容隐藏，不占据空间。
交互性：默认不可触发事件（若有内边距或边框可能仍有点击区域，需配合padding: 0; border: 0）。
示例：

css 复制代码

.hidden-size {
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
}

场景：需要隐藏且不占位，但希望保留元素的某些状态（如动画过渡的中间状态）。

transform: scale(0)
效果：元素缩放为 0，视觉不可见，不占据空间（transform 不影响布局）。
交互性：默认可触发事件（需配合pointer-events: none禁用）。
支持动画：可通过transition实现缩放动画。
示例：

css 复制代码

.hidden-scale {
  transform: scale(0);
  transition: transform 0.3s;
  pointer-events: none;
}

场景：需要隐藏且有缩放动画效果（如弹窗关闭动画）。

（3）、移除 DOM 节点（彻底隐藏）

通过 JS 将元素从 DOM 树中删除，完全不占据空间，也无法通过 CSS 恢复。

示例：

// 移除元素

javascript 复制代码

const elem = document.getElementById('target');
elem.remove();

// 或隐藏后保存（可恢复）
elem.style.display = 'none'; // 临时隐藏（可恢复）
elem.parentNode.removeChild(elem); // 彻底移除（不可直接恢复，需重新创建）

场景：元素不再需要使用，且后续不会恢复（如动态加载的内容删除后）。

（4）、使用建议

需要保留布局：用 visibility: hidden（不可交互）或 opacity: 0（可交互）。

不需要保留布局：优先用 display: none（简单直接），需要动画用 transform: scale(0) 或 height: 0+overflow:hidden。

临时隐藏（可恢复）：用 display: none 或 visibility: hidden（JS 可快速恢复）。

永久删除：直接移除 DOM 节点（elem.remove()）。

三. 过渡和动画的区别？

过渡（Transition）和动画（Animation）都用于创建元素的动态效果，但它们的设计理念、使用场景和功能特性有本质区别。

（1）、核心定义与本质

过渡 (Transition)

定义：当元素的 CSS 属性值发生变化时，从旧值到新值之间平滑过渡的效果。

本质：

触发式：需要一个明确的触发条件，如 :hover、:active、class 变化、JS 直接修改样式。

两帧动画：只关心开始状态和结束状态，中间的过渡过程由浏览器自动计算。

一次性：触发后执行一次，完成后停在结束状态。除非再次触发反向变化（如鼠标移开）。

动画 (Animation)

定义：通过 @keyframes 定义一系列关键帧，元素可以按照预定的时间和节奏自动执行这些帧的变化。

本质：

自主式：不需要触发条件，页面加载后可自动开始（animation-play-state: running）。

多帧动画：可以定义多个关键帧（0%、50%、100% 等），精确控制每一步的样式。

循环可控：支持重复播放（animation-iteration-count）、方向控制（animation-direction）、暂停 / 继续（animation-play-state）。

（2）、语法与使用示例

过渡 (Transition)

css 复制代码

.box {
  width: 100px;
  height: 100px;
  background: red;
  /* 定义过渡：属性 时长 缓动函数 延迟 */
  transition: width 1s ease-in-out 0.5s;
}

.box:hover {
  width: 300px; /* 触发过渡 */
}

常用属性：

transition-property：指定要过渡的 CSS 属性（如 width、all）。

transition-duration：过渡持续时间（如 1s、500ms）。

transition-timing-function：缓动函数（如 ease、linear、cubic-bezier()）。

transition-delay：过渡延迟开始时间（如 0.5s）。

动画 (Animation)

css 复制代码

/* 定义关键帧 */
@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); background: blue; }
  100% { transform: translateX(400px); background: green; }
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  /* 应用动画 */
  animation: move 3s ease-in-out 1s infinite alternate;
}

常用属性：

animation-name：关键帧名称（如 move）。 animation-duration：动画持续时间。

animation-timing-function：缓动函数。 animation-delay：延迟开始时间。

animation-iteration-count：播放次数（infinite 为无限循环）。

animation-direction：播放方向（normal、reverse、alternate）。

animation-play-state：播放状态（running、paused）。

animation-fill-mode：动画结束后保持的状态（forwards、backwards、both）。

（3）、适用场景选择

什么时候用过渡？

当你需要为元素的状态变化添加平滑效果 时

例如：

按钮 hover 时的颜色、大小变化
模态框的显示 / 隐藏（透明度、缩放）
导航栏滚动时的背景色变化

什么时候用动画？

当你需要创建 独立于用户交互的、复杂的动态效果 时

例如：

元素的路径运动、旋转、闪烁等复杂效果，需要精细控制中间状态的动画