溢出内容的控制

来源：互联网发布：手机磁力搜索软件编辑：程序博客网时间：2024/05/01 23:05

在一个元素中，有时候会发生内容超出定义大小的情况，在CSS中，可以使用溢出属性(overflow)对溢出的内容定义显示方式，例如隐藏或者显示滚动条等，

使用溢出属性可以方便的控制溢出内容的显示，并能够保证元素的大小不被破坏。

1.溢出属性(overflow)

用来定义元素溢出部分的显示方式，如：

overflow: visible | auto | hidden | scroll;

其中每个属性的含义如下所述：

visible: 默认属性，溢出内容按照原有的方式显示。

auto: 当内容超出元素定义的大小时，显示滚动条，否则正常显示内容。

hidden: 隐藏溢出的内容。

scroll: 总是显示滚动条。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> CSS属性 </title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style>    div { overflow: auto; width: 200px; height: 100px; background: #999999;}  </style> </head> <body>   <div>     这是关于溢出属性的实例，在本实例中使用了auto值，当内容部分超出元素大小的时候，将会在元素的右侧显示滚动条，否则元素将按照正常的方式显示。   <div> </body></html>

2. 横向溢出属性overflow-x

用来定义元素的溢出部分在水平方向上的显示方式，overflow-x: visible | auto | hidden | scroll;

3. 纵向溢出属性overflow-y

用来定义元素的溢出部分在垂直方向上的显示方式，overflow-y: visible | auto | hidden | scroll;

4. 滚动条和边框

在使用溢出属性的时候，如果定义元素显示滚动条，同时定义了边框，要注意滚动条和边框之间的关系，滚动条显示在边框等内部，

如果在滚动条处不想显示边框，则可以通过定义单侧边框属性取消滚动条一侧的边框。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> CSS属性 </title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style>    div {  overflow: auto;  border: 8px solid #000000;  width: 200px;  height: 100px;  background: #999999;}  </style> </head> <body>   <div>     这是关于溢出属性的实例，在本实例中使用了auto值，当内容部分超出元素大小的时候，将会在元素的右侧显示滚动条，否则元素将按照正常的方式显示。   <div> </body></html>

如上图所示，滚动条显示在边框的内部。