CSS overflow 屬性控制對太大而區域無法容納的內容的處理方式，
CSS Overflow
overflow 屬性指定在元素的內容太大而無法放入指定區域時是剪裁內容還是添加滾動條，
overflow 屬性可設定以下值：
visible - 默認，溢位沒有被剪裁，內容在元素框外渲染
hidden - 溢位被剪裁，其余內容將不可見
scroll - 溢位被剪裁，同時添加滾動條以查看其余內容
auto - 與 scroll 類似，但僅在必要時添加滾動條
注釋： overflow 屬性僅適用于具有指定高度的塊元素，
注釋： 在 OS X Lion（在 Mac 上）中，滾動條默認情況下是隱藏的，并且僅在使用時顯示（即使設定了 “overflow:scroll”），
overflow: visible
默認情況下，溢位是可見的(visible)，這意味著它不會被裁剪，而是在元素框外渲染：
當您希望更好地控制布局時，可以使用 overflow 屬性，overflow 屬性指定如果內容溢位元素框會發生什么，
實體:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:cadetblue;
}
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<h1>CSS 溢位</h1>
<p>默認情況下，溢位是可見的，這意味著它不會被裁剪，而是在元素框外渲染：</p>
<div>當您想更好地控制布局時，可以使用 overflow 屬性，overflow 屬性規定如果內容溢位元素框會發生什么情況，</div>
</body>
</html>
overflow: hidden
如果使用 hidden 值，溢位會被裁剪，其余內容被隱藏：
當您希望更好地控制布局時，可以使用 overflow 屬性，overflow 屬性指定如果內容溢位元素框會發生什么，
實體：
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: cadetblue;
}
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px dotted black;
overflow: hidden;
}
</style>
</head>
<body>
<h1>CSS 溢位</h1>
<p>默認情況下，溢位是可見的，這意味著它不會被裁剪，而是在元素框外渲染：</p>
<div>當您想更好地控制布局時，可以使用 overflow 屬性，overflow 屬性規定如果內容溢位元素框會發生什么情況，</div>
</body>
</html>
overflow: scroll
如果將值設定為 scroll，溢位將被裁剪，并添加滾動條以便在框內滾動，請注意，這將在水平和垂直方向上添加一個滾動條（即使您不需要它）：
當您希望更好地控制布局時，可以使用 overflow 屬性，overflow 屬性指定如果內容溢位元素框會發生什么，
實體:
<!DOCTYPE html>
<html>
<head>
<style>
.body{
background-color:cadetblue;
}
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>
<h1>CSS 溢位</h1>
<p>將溢位值設定為 scroll，溢位將被裁剪，并添加滾動條以在框內滾動，請注意，這將在水平和垂直方向上添加滾動條（即使您不需要它）：</p>
<div>當您想更好地控制布局時，可以使用 overflow 屬性，overflow 屬性規定如果內容溢位元素框會發生什么情況，</div>
</body>
</html>
overflow: auto
auto 值類似于 scroll，但是它僅在必要時添加滾動條：
當您希望更好地控制布局時，可以使用 overflow 屬性，overflow 屬性指定如果內容溢位元素框會發生什么，
實體
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: cadetblue;
}
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS 溢位</h1>
<p>將溢位值設定為 scroll，溢位將被裁剪，并添加滾動條以在框內滾動，請注意，這將在水平和垂直方向上添加滾動條（即使您不需要它）：</p>
<div>當您想更好地控制布局時，可以使用 overflow 屬性，overflow 屬性規定如果內容溢位元素框會發生什么情況，</div>
</body>
</html>
overflow-x 和 overflow-y
overflow-x 和 overflow-y 屬性規定是僅水平還是垂直地（或同時）更改內容的溢位：
overflow-x 指定如何處理內容的左/右邊緣，
overflow-y 指定如何處理內容的上/下邊緣，
當您希望更好地控制布局時，可以使用 overflow 屬性，overflow 屬性指定如果內容溢位元素框會發生什么，
實體
div {
overflow-x: hidden; /* 隱藏水平滾動欄 /
overflow-y: scroll; / 添加垂直滾動欄 */
}
你可以親自試一試!
創作不易，請動動你的小手贊一贊吧！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277686.html
標籤：其他
上一篇：KMP演算法（c語言實作）
下一篇：事件委托（代理）