码云学习 CSS 2021-06-25

21. CSS 布局 – Overflow

AI 概述

CSS Overflowoverflow: visibleoverflow: hiddenoverflow: scrolloverflow: autoverflow-x 和 overflow-y所有 CSS Overflow 属性 CSS overflow 属性用于控制内容溢出元素框时显示的方式。 CSS Overflow CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。 overflow 属性有以下...

文章目录隐藏

CSS Overflow
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
verflow-x 和 overflow-y
所有 CSS Overflow 属性

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow 属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

overflow: visible

默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染：

div {
    background-color: #eee;
    width: 220px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
</style>

<body>
<div id="overflowTest">
    <p>这里的文本内容会溢出元素框。</p>
    <p>这里的文本内容会溢出元素框。</p>
    <p>这里的文本内容会溢出元素框。</p>
</div>
</body>

效果如下：

overflow: hidden

如果使用 hidden 值，溢出会被裁剪，其余内容被隐藏：

<style>
div {
    background-color: #eee;
    width: 220px;
    height: 50px;
    border: 1px dotted black;
    overflow: hidden;
}
</style>

效果如下：

overflow: scroll

如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）：

<style>
div {
    background-color: #eee;
    width: 220px;
    height: 150px;
    border: 1px dotted black;
    overflow: scroll;
}
</style>

效果如下：

overflow: auto

auto 值类似于 scroll，但是它仅在必要时添加滚动条：

div {
  overflow: auto;
}

verflow-x 和 overflow-y

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。

div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

所有 CSS Overflow 属性

属性	描述
overflow	规定如果内容溢出元素框会发生什么情况。
overflow-x	规定在元素的内容区域溢出时如何处理内容的左/右边缘。
overflow-y	指定在元素的内容区域溢出时如何处理内容的上/下边缘。

以上关于21. CSS 布局 – Overflow的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 21. CSS 布局 – Overflow