css overflow属性

css教程

2011-08-24

关注关注

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

overflow属性值：

1.visible：默认值。内容不会被修剪，会呈现在元素框之外。

2.hidden：内容会被修剪，并且其余内容是不可见的。

3.scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

4.auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

5.inherit：规定应该从父元素继承 overflow 属性的值。

总结：overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherit是继承父元素的overflow属性值，默认是scroll.

场景：文本框是用来发表意见的，不显示滚动条而且当内容溢出给出的显示空间的时候，不能再输入文字了。

代码：

<table border=1 cellspacing=0 cellpadding=0>
	<tr>
		<td colspan="4" align="left" height="40px"
			style="FONT-FAMILY: 宋体; FONT-SIZE: 12pt;">

			<table border=0 cellspacing=0 cellpadding=0 width=100%>
				<tr>
					<td colspan=2>
						审计单位意见:
					</td>
				</tr>
				<tr>
					<td colspan=2>
						<textarea rows="8" cols="120" style="overflow: hidden"></textarea>
					</td>
				</tr>
				<tr>
					<td width="44%">
						&nbsp;
					</td>
					<td style="padding-left: 100px;">
						<input type="text" size="8" maxsize="4" align="center"
							style="border: none;">
						年
						<input type="text" size="4" maxsize="2" align="center"
							style="border: none;">
						月
						<input type="text" size="4" maxsize="2" align="center"
							style="border: none;">
						日
					</td>
				</tr>
			</table>
		</td>
	</tr>
	</tr>
	<tr>
		<td colspan="4" align="left" height="40px"
			style="FONT-FAMILY: 宋体; FONT-SIZE: 12pt;">
			<table border=0>
				<tr>
					<td>
						发包人意见:
					</td>
				</tr>
				<tr>
					<td colspan=2>
						<textarea rows="8" cols="120" style="overflow: hidden;"></textarea>
					</td>
				</tr>
				<tr>
					<td width="44%">
						&nbsp;
					</td>
					<td style="padding-left: 100px;">
						<input type="text" size="8" maxsize="4" align="center"
							style="border: none;">
						年
						<input type="text" size="4" maxsize="2" align="center"
							style="border: none">
						月
						<input type="text" size="4" maxsize="2" align="center"
							style="border: none">
						日
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

2.设置浏览器窗口滚动条

没有水平滚动条：<body style="overflow-x:hidden;">

没有垂直滚动条：<body style ="overflow-y:hidden;">

没有滚动条:<body style="overflow:hidden;">

3.设置文本区的滚动条和浏览器窗口滚动条一个道理。这里不再重复了。

overflow css