【 盒模型之 溢出和可见性 属性 overflow & visibility】

---

盒模型之 溢出和可见性 属性 overflow & visibility

---

用于	属性名	CSS 版本
① 设置 内容溢出时的 处理 (剪切/滚动条)。	overflow
❶ 内容溢出了 元素内容区域时，是否对内容的 左/右边缘进行 裁剪。	overflow-x	3
❷ 内容溢出了 元素内容区域时，是否对内容的 上/下边缘进行 裁剪。	overflow-y	3
❸ 溢出 换行位置 / 溢出时 单词换行 位置。 对长的不可分割的单词 进行分割 并换行到下一行。单词 断行时的 断行位置 (断句/断行 方式)。	overflow-wrap = word-wrap	3
② 设置 元素的 可见性 (显示/隐藏/合并/ 不影响布局)	visibility	2

---

1. overflow 属性: 设置 内容溢出时的 处理 (剪切/滚动条)

---

• ⑴ 设置 内容溢出时的 处理: overflow
  • overflow定义 当一个元素的 内容太大 而无法适应 "块级格式化 上下文/区域 BFC" 时候 该做什么。
    • 包括 剪切、显示滚动条 或 显示 从其容器流出到 周围区域的内容。
  • ① 适用对象
    • block-containers, flex containers, grid containers 。
  • ② 简写属性: 是 以下属性的简写 (默认值 visible)
    • overflow-x
    • overflow-y
  • ③ 溢出 和 新的 块格式化区域/上下文
    • 指定除 可见visible(默认值)以外的 值 将创建一个 新的 块级格式化上下文/区域.
    • 慢滚动: 这在技术层面上 是必须的——如果一个 浮动元素 和 滚动条 相交，它会在 每个滚动步骤之后 强制性 重新包装 内容，从而导致 慢滚动 体验。
  • ④ 内容溢出的产生
    • 固定高度/宽度值: 块级容器 必须有一个 指定的高度和宽度（height 或者 max-height,width）
    • 不换行: 将 white-space 设置为nowrap。

---

• ⑵ 溢出的 语法
  • overflow: [ visible | hidden | clip | scroll | auto ]{1,2};

/* 关键字值 Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

/* 全局值 Global values */
overflow: inherit;
overflow: initial;
overflow: unset;

---

• ⑶ 溢出的 取值
  • ① 个数: 1~2个关键字:
    • overflow属性 从下面的值列表中 选择 一个或两个关键字。
  • ② 对应的溢出
    • 1个值:
      • 纵横方向 设置为 相同的值: overflow-x = overflow-y
    • 2个值:
      • 如果指定了两个关键字，则
      • ❶ 在 Firefox 63 之前
        • 第一个关键字: 应用于 overflow-x
        • 第二个关键字: 应用于 overflow-y。
      • ❷ Firefox 63 和之后的版本
        • 相反顺序, 更新了 这个顺序，以匹配 对规范的更改。
        • 此更改 是为了匹配 使用新逻辑属性 overflow-block 和 overflow-inline 时的顺序。
        • 实际测试,方向并没有 反过来…
          • overflow:hidden scroll;
          • 

overflow-x: scroll;
overflow-y: hidden;
/* On Firefox 61 and 62, this is the same as */
overflow: scroll hidden;
/* But on Firefox 63 and later, it will be */
overflow: hidden scroll;

---

• ⑷ 溢出的 属性值
  • ① 不剪切/可见 (默认值): visible
    • ❶ 内容不会 被修剪，可以呈现在 元素 边框之外。
    • ❷ 属性值 搭配: visible = auto:
      • 设置一个轴为 visible（默认值），同时设置 另一个轴 为不同的值，会导致 设置visible的轴的行为会 变成 auto。
    • ❸ 显示: 在边框之外
      • 内容不会被 剪切，可以在 内边距框padding box外 呈现。
      • 内容会显示 内边距区和边框之外
      • 
  • ② 剪切/隐藏/无滚动条: hidden
    • 剪切: 如果需要，边框以外的内容 将被剪裁。
    • 无滚动条: 不提供 滚动条。
    • 隐藏 和 滚动js:
      • 即使将 overflow设置为 hidden，也可以使用 JavaScript Element.scrollTop属性 来滚动HTML元素。
    • 显示: 边框以内的内容, 内边距区+ 内容区 都会显示内容。
      • 
  • ③ 剪切/滚动条: scroll
    • 剪切: 如果需要，内容将被剪裁 以适合 填充区域。
    • 滚动条: 一直存在:
      • 浏览器 显示滚动条，无论是否有内容溢出,是否 实际剪切了 任何内容。
        • 这可以防止 滚动条 在内容更改时 出现或消失。
      • 打印机: 仍可能打印 溢出的内容。
      • 
      • 
  • ④ 浏览器决定/按需显示滚动条: auto
    • 取决于 用户代理/浏览器。
    • 滚动条显示:
      • 如果内容 适合 内容区，则它看起来 与可见内容相同，但仍会 建立新的块格式化上下文/区域。
      • 
    • 如果 内容溢出 内容区，桌面浏览器 会提供 滚动条。
      • 
  • ⑤ 剪切/禁止滚动: clip (谷歌和火狐浏览器等浏览器 目前不支持)
    • 与隐藏hidden一样，内容被剪切到 元素 边框以内的区域。
      • clip和 hidden之间的区别是
        • clip 关键字 也禁止 所有滚动，包括 程序性滚动。
        • 该框 不是 滚动容器，并且 不启动 新的格式化上下文。
        • 启动 新的格式化上下文: 可以使用 display: flow-root 来启动。

---

• ⑸ 溢出的 浏览器支持
  • IE,Safari 不支持 多个关键字 语法。
  • 

---

• ⑹ CSS 溢出模块(CSS Overflow module)
  • ① 溢出处理 特性: 包含了一些 CSS 特性,这些特性 与 可视媒体中的 可滚动 溢出处理 相关的 。
  • ② 内容 溢出/出框: 在 CSS 中，当一个 框的内容 超出一个或多个框的边缘时，就会 发生溢出。

---

• ⑺ 溢出的 2 种类型
  • ① 不影响布局 的溢出(墨水溢出): ink overflow
    • 这是 绘画效果的溢出，它不影响 布局或 扩展可滚动的溢出区域
    • 如 框阴影(box-shadow)、边框图像、文本装饰线(text-decoration)、悬垂的字形(overhanging glyphs)、轮廓(outline)等。
  • ② 影响布局 的溢出 (可滚动溢出): scrollable overflow.
    • 需要在 CSS 中管理的溢出 称为 可滚动溢出。
      • 内容出框: 内容会 出现在框外，需要为其 提供滚动机制。
    • 溢出属性: 如何控制 内容溢出框时 发生的事情。

---

• ⑻ 块 格式化 上下文/范围/区域: （Block Formatting Context，BFC）

  • 块盒子 布局区域: 是 页面的 可视化 CSS 渲染的一部分，是 块盒子(block boxes)的布局过程 发生的区域。
  • 浮动元素 交互区域: 同时,也是 浮动元素 与其他元素 交互的区域。

• ⑼ 块 格式化 上下文/区域的创建

  • 由 一些元素 创建: 元素 ⇒ 块格式化 上下文/区域

---

• 示例1: 把不换行的 溢出内容,显示为 省略号
  • 要显示 溢出内容的表示符号text-overflow,比如 省略号 必须遵守的前提
    • ❶ 必须 有内容溢出
      • 因为 text-overflow 本身,不会造成内容溢出
      • 设置 宽高的固定值
      • 设置 不换行
    • ❷ 必须 设置不换行 (只设置宽高的话),text-overflow: ellipsis;不显示
    • ❸ 必须让 溢出内容不可见,即 overflow ≠ visible

    height: 94px;
    width: 160px;
    white-space: nowrap;
    
    overflow:hidden;
    overflow:scroll ;
    overflow:auto;
    text-overflow: ellipsis;

默认样式: overflow: visible; 溢出内容不剪切时,不显示 溢出文本的 省略号	隐藏溢出内容: overflow:hidden; 显示省略号,不显示滚动条
overflow:scroll ; 双向 显示滚动条和 溢出内容的省略号 表示	overflow:auto; 溢出内容的方向 显示滚动条和省略号

---

---

1.1 CSS3 overflow-x 属性: 设置 元素的 水平溢出 处理 (剪切/滚动条)

• ⑴ 设置 元素的水平方向 溢出的 处理: overflow-x
  • ① 水平溢出的处理
    • 当一个块级元素的内容 在水平方向 发生溢出时， overflow-x 决定 是否对内容的左/右边缘 的处理 。
      • 剪切溢出内容，或者 显示滚动条，或者 直接显示 溢出内容。
  • ② overflow-x: visible; ⇒ auto 的情况
    • 如果 overflow-x = visible 而 overflow-y ≠ visible,而是hidden, scroll ,auto,此时的 overflow-x = visible, 将隐式地 计算为 auto。
  • ③ 水平溢出的产生
    • 不可换行: 当设置 不可换行 white-space: nowrap;时, 内容过大时,会 水平溢出。

---

• ⑵ 水平溢出的 语法
  • overflow-x: visible | hidden | scroll | auto;

/* 关键字值 Keyword values */
overflow-x: visible;
overflow-x: hidden;
overflow-x: scroll;
overflow-x: auto;

/* 全局值 Global values */
overflow-x: inherit;
overflow-x: initial;
overflow-x: unset;

---

• ⑶ 水平溢出的 取值
  • 单个关键字: overflow-x 属性 指定为 从下面的值列表中 选择的 单个关键字。

---

• ⑷ 水平溢出的 属性值

  • ① 可见/不剪切(默认值): visible

    • 不剪切内容，可能会显示在 内容框之外。
    • 内容不会 被剪切，可以在 左右边缘/边框之外 呈现。
      • 

  • ② 隐藏/剪切/无滚动条: hidden

    • 内容会被剪切，且不会显示 滚动条。
      • 

  • ③ 水平滚动条/剪切: scroll

    • 总是显示: 桌面浏览器 总是显示 滚动条，无论 内容是否 发生溢出。
      • 
    • 滚动和元素尺寸:
      • 这可以避免 滚动条的显示与消失 所导致的元素尺寸 不确定的问题。
    • 打印机: 可能会打印 溢出的内容。

  • ④ 浏览器决定: auto

    • 取决于 浏览器本身。
    • 如果内容溢出，则显示 滚动条。
      • 
    • 内容不溢出,不显示滚动条。
      • 

---

• ⑸ 水平溢出的 浏览器支持

  • 

---

---

1.2 CSS3 overflow-y 属性: 设置 元素的 垂直溢出 处理 (剪切/滚动条)

• 设置 元素的垂直溢出 ：参考 水平溢出 overflow-x,只是方向 换成垂直方向,上下边缘的 剪切/滚动条处理。属性值类型 一致。

---

---

1.3 CSS3 overflow-wrap 属性: 溢出 换行位置 / 溢出时 单词换行 位置

• ⑴ overflow-wrap = word-wrap
  • ① 重命名: 原本叫做 word-wrap 属性, 属于微软的 一个私有属性。
    • 在 CSS3 现在的 文本规范草案中 , 已经被重名为 overflow-wrap。
    • 但 目前 word-wrap属性名, 浏览器的支持度更好些
  • ② 等同 word-wrap 属性, 详情查看: 【CSS 文本属性（Text）】 中的 word-wrap属性

---

• ⑵ 单词 断行时的 断行方式 : overflow-wrap = word-wrap 属性
  • 用来说明 当一个 不能被分开的字符串 太长 而不能填充其容器时，
    • 防止溢出: 为防止 其溢出，浏览器 是否允许 这样的单词 中断换行。
    • 允许 长单词或 URL 地址 换行到下一行。

---

• ⑶ 溢出换行/单词换行的 语法
  • overflow-wrap/word-wrap: normal | break-word | anywhere;

---

• ⑷ 溢出换行/单词换行的 属性值
  • ① 断点处 换行 (默认值):normal
    • 只在 允许的断字点 换行
      • （浏览器 保持默认处理）。
    • 表示 在正常的 单词结束处 换行。
      • 可能会出现 文本溢出.
  • ② (溢出的)长单词/长中文句子 强制分割: break-word
    • 如果行内 没有多余的地方 容纳该单词到结尾，则那些正常的 不能被分割的单词 会被 强制 分割换行。
      • 切断单词，在单词内部 进行换行。
    • 在长单词,长中文句子 或 URL 地址 内部 进行换行。
      • 不会出现 文本溢出.

---

---

2. visibility 属性: 设置 元素的 可见性(显示/隐藏/合并/ 不影响布局)

• ⑴ 设置 元素的 可见性(显示/隐藏): visibility 属性, 美 /ˌvɪzəˈbɪləti/
  • ① 不更改布局:
    • ❶ 属性 显示或隐藏元素 而不更改文档的布局。
    • ❷ 从布局删除: display: none;
      • 要隐藏一个元素 并将其从文档布局中 删除，请将display 属性设置为none，而不是使用 visibility。
  • ② 隐藏 表的行列:
    • 还可以隐藏 表格<table>中的 行或列。

---

• ⑵ 可见性的 语法
  • visibility: visible | hidden | collapse;

/* 关键字值 Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* 全局值 Global values */
visibility: inherit;
visibility: initial;
visibility: unset;

---

• ⑶ 可见性的 属性值

  • 可见/ 隐藏/ 合并

  • Ⅰ. 可见: visible

    • 元素是可见的，正常显示。
    • 

  • Ⅱ. 隐藏: hidden

    • 变透明: 隐藏元素，但是 其他元素的布局 不改变，相当于 此元素变成透明。
      • 
    • 子元素的可见性:
      • 要注意若将 其子元素 设为 visibility: visible，则该 子元素 依然可见。
    • 不能聚焦: 元素 不能接收焦点(在通过tab索引 导航时)。
    • 表格中应用
      • 留空白: Chrome 处理 visibility: collapse 和hidden一样, 留下一个空白。
        • tr.visibilitytest{visibility: collapse;}
          • 
          • Firefox中的显示: 边框线还在
            • 

  • Ⅲ. 合并collapse

    • ① 隐藏表的行列:

      • 用于 <table> 行、列、列组和行组，隐藏表格的 行或列，并且不占用 任何空间。
      • ❶ 空间移除:
        • 原本 占据的空间，会被移除, 与 将 display: none 用于表格的行/列上的 效果相同。
        • ( display: none 在各浏览器中的效果 比较一致，如下 ↓(会影响布局).visibility: collapse;的效果 有浏览器差异。)
          • 
          • 后一句话,占据了 display: none;的前一句话的位置,影响布局。
          • 
      • ❷ 不影响 其他行列的计算:
        • 其他 行和列的大小 仍然是计算的，就好像 合并的行或列中的单元格 是存在的一样。
      • ❸ 快速删除 行和列:
        • 不重新计算 宽高: 该值允许 从表中 快速删除行或列，而 不必强制 重新计算 整个表的宽度和高度。
        • Chrome 处理 visibility: collapse 和hidden一样, 留下一个空白。
          • tr.visibilitytest{visibility: collapse;}
          • 
        • Firefox 设置 border-collapse: collapse, 合并行会消失
          • tr.visibilitytest{visibility: collapse;}
          • 

    • ② 弹性项目的 隐藏和空间删除:

      • 合并的弹性项目 被隐藏，他们将 占用的空间被删除。

    • ③ 对于 XUL 元素

      • 元素的计算大小 始终为零，而且通常会忽略 影响大小的其他样式，尽管边距仍然有效。

    • ④ 对于其他元素，合并collapse 和 隐藏 hidden 效果相同。

      • 

---

• ⑷ 可见性的 浏览器支持

  • IE

    • IE不支持 visibility: initial.
    • IE 7以及之前版本, hidden 隐藏元素的子元素, 将仍然是不可见的，即使它们的可见性 设置为可见。

  • Chrome / Safari / Opera 浏览器

    • 处理 visibility: collapse 和hidden一样, 留下一个空白。
    • 
    • 支持collapse 属性值, 仅限<tr>, <thead>, <tbody>, and<tfoot>, 不支持 在<col> 、<colgroup> 元素上。

  • Firefox 设置 border-collapse: collapse, 在隐藏时 不隐藏边框<col> 、 <colgroup>

  • 

---

---

♣ 结束语 和 友情链接

• 参考文档
  • MDN CSS 教程
  • visibility | MDN

---

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
  • 可以备注 支持的理由 或 想对作者说的话哦~
    
• 赞助二维码:
  

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103395624
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！