个性化阅读
专注于IT技术分析

CSS overflow(溢出)用法示例代码介绍

CSS overflow控制着大内容。它指示是剪辑内容还是添加滚动条。overflow包含以下属性:

  • visible
  • hidden
  • scroll
  • auto

visible:内容不会被剪切, 并且在元素框外不可见。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:100px;
          height:80px;
          border:1px solid;
          overflow:visible;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下:

hidden:overflow被裁剪, 其余内容不可见。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:100px;
          height:80px;
          border:1px solid;
          overflow:hidden;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下:

scroll:溢出被裁剪, 但是添加了滚动条以查看其余内容。滚动条可以是水平或垂直的。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:120px;
          height:100px;
          border:1px solid;
          overflow:scroll;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下:

auto:它会在需要时自动添加滚动条。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:120px;
          height:100px;
          border:1px solid;
          overflow:auto;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下:

Overflow-x和Overflow-y:此属性指定如何更改元素的溢出。 x处理水平边缘, y处理垂直边缘。

例子:

<!DOCTYPE>
<html>
    <head>
       <style>
          p {
          width:120px;
          height:100px;
          border:1px solid;
          overflow-x:scroll;
          overflow-y:hidden;
          }
       </style>
    </head>
    <body>
       <h2>
          srcmini
       </h2>
       <p>
          The CSS overflow controls big content.
          It tells whether to clip content or to add scroll bars.
       </p>
    </body>
</html>

输出如下:


赞(0) 打赏
未经允许不得转载:srcmini » CSS overflow(溢出)用法示例代码介绍
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏