CSS 內(nèi)容溢出與隱藏
overflow屬性規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情。這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。如果值為scroll,不論是否需要,用戶代理都會提供一種滾動機制。因此:即使元素框中可以放 下所有內(nèi)容,也有可能會出現(xiàn)滾動條。 overflow屬性的值可以是以下幾種。
?visible:默認值,內(nèi)容不會被修剪,會呈現(xiàn)在元素框之外。
?hidden:內(nèi)容會被修剪,并旦其余內(nèi)容是不可見的。
?scroll:內(nèi)容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
?auto:如果內(nèi)容被修剪,則瀏覽器會顯示滾動條以便査看其余的內(nèi)容。
?inherit:規(guī)定應(yīng)該從父元素繼承overflow屬性的值。
先看一下正常情況下當元素溢出容器之后會發(fā)生什么。
【例題】元素溢出容器
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border:2px red solid;
}
</style>
</head>
<body>
<div>
<img src="img/0.1.jpg" alt="" width="400">
</div>
</body>
</html>
點擊加載更多評論>>