CSS overflow 屬性(瑣碎知識點整理)

之前有整理過一部分知識點, 一直沒有發(fā)布, 因為都是有關 CSS 方面的零散內(nèi)容; 現(xiàn)在想想無論做什么都需要慢慢積累, 所以還是決定將之前整理的相關內(nèi)容驗證之后慢慢分享給你們, 現(xiàn)在看到感覺還挺有意思 。

好了廢話不多說, 直接上代碼以及圖例(為了讓大家方便閱讀, 都有自己驗證過程的一些圖片作為分享) 。

一. 定義和用法:
1. overflow 屬性規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情 。

2. 這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理 。 如果值為 scroll, 不論是否需要, 用戶代理都會提供一種滾動機制 。 因此, 有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動條 。
二. overflow (overflow-x)--(overflow-x) 可能的值:
1. visible  默認值 。 內(nèi)容不會被修剪, 會呈現(xiàn)在元素框之外 。

2. hidden   內(nèi)容會被修剪, 并且其余內(nèi)容是不可見的 。

3. scroll   內(nèi)容會被修剪, 但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容 。

4. auto 如果內(nèi)容被修剪, 則瀏覽器會顯示滾動條以便查看其余的內(nèi)容 。

5. inherit  規(guī)定應該從父元素繼承 overflow 屬性的值 。
1. overflow: visible 屬性效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow (overflow-x)--(overflow-x) 屬性詳解</title>
</head>
<style>
.w_overflow-shel {
  background-color: aqua;
  padding: 40px 20px;
}
.w_over-flow p {
  font-size: 14px;
  line-height: 16px;
  background-color: darkgray;
  margin: 4px 0;
}


/* visible */
.w_visible-outer {
  /* width: 700px; */
  width: 400px;
  height: 80px;
  background-color: darkgreen;
  overflow: visible;
}
</style>

<body>
<div class="w_overflow-shel">
  visible
  <div class="w_visible-outer w_over-flow">
    <p>123</p>
    <p>qwe</p>
    <p>123123</p>
    <p>asdasd</p>
    <p>12321312</p>
    <p>asdasdasd</p>
    <p>123qweqwe</p>
    <p>123234235gdfgdfgdfg11111111111111111111111123234235gdfgdfgdfg11111111111111111111111</p>
  </div>
</div>
</body>
</html>

圖片示例


v-1-1.png

v-1-2.png
2. overflow: hidden 屬性效果 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow (overflow-x)--(overflow-x) 屬性詳解</title>
</head>
<style>
.w_overflow-shel {
  background-color: aqua;
  padding: 40px 20px;
}
.w_over-flow p {
  font-size: 14px;
  line-height: 16px;
  background-color: darkgray;
  margin: 4px 0;
}


/* hidden */
.w_hidden-outer {
  height: 78px;
  width: 300px;
  /* 可以將下面代碼注釋查看對比效果 */
  overflow: hidden;
}
</style>

<body>
<div class="w_overflow-shel">
  hidden
  <div class="w_hidden-outer w_over-flow">
    <p>aaaaaaaaaaaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
    <p>ccccccccccccccccccccccccccc</p>
    <p>11111111111111111111111</p>
    <p>ddddddddddddddd</p>
    <p>2222222222222222222222222222</p>
    <p>333333333333333333333333333333333333333333333</p>
    <p>eeeeeeeeeeeeeeeeeeeeeee4444444444444444</p>
  </div>
</div>
</body>
</html>

圖片示例


v-2-1.png

v-2-2.png
3. overflow: scroll 屬性效果
  1. 設置 overflow: scroll; 有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動條; 這個現(xiàn)象我這里一直沒有復現(xiàn)這個這個現(xiàn)象, 找到這個現(xiàn)象我再與大家分享。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow (overflow-x)--(overflow-x) 屬性詳解</title>
</head>
<style>
.w_overflow-shel {
  background-color: aqua;
  padding: 40px 20px;
}
.w_over-flow p {
  font-size: 14px;
  line-height: 16px;
  background-color: darkgray;
  margin: 4px 0;
}


/* scroll */
.w_scroll-outer {
  height: 140px;
  width: 300px;
  overflow: scroll;
}
</style>

<body>
<div class="w_overflow-shel">
  scroll
  <div class="w_scroll-outer w_over-flow">
    <p>11111111111111111111111111111</p>
    <p>2222222222222222222222222222222</p>
    <p>333333333333333333333333333</p>
    <p>44444444444444444444444444444444444</p>
    <p>5555555555555555555555555555555555555555</p>
    <p>6666666666666666666666666666666666666666666666</p>
    <p>77777777777777777777777777777777777777777</p>
    <p>888888888888888888888888888888888888888</p>
  </div>
</div>
</body>
</html>

圖片示例


v-3-1.png

v-3-2.gif
4. overflow: auto 屬性效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow (overflow-x)--(overflow-x) 屬性詳解</title>
</head>
<style>
.w_overflow-shel {
  background-color: aqua;
  padding: 40px 20px;
}
.w_over-flow p {
  font-size: 14px;
  line-height: 16px;
  background-color: darkgray;
  margin: 4px 0;
}

/* auto */
.w_auto-outer {
  overflow: auto;
  height: 100px;
  width: 320px;
}
</style>

<body>
<div class="w_overflow-shel">
  auto
  <div class="w_auto-outer w_over-flow">
    <p>aaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbbbbbbb</p>
    <p>ccccccccccccccc</p>
    <p>dddddddddddddddddddddddddddddd</p>
    <p>eeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
    <p>ffffffffffffffffffffffffffffffffff</p>
    <p>gggggggggggggggggggggggg</p>
    <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
  </div>
</div>
</body>
</html>

圖片示例


v-4-1.png

v-4-2.gif
5. overflow: inherit 屬性效果
  1. 這里的繼承效果使用 scroll 設置對比效果最為強烈, 有興趣的同學可以嘗試其他屬性設置的效果 。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow (overflow-x)--(overflow-x) 屬性詳解</title>
</head>
<style>
.w_overflow-shel {
  background-color: aqua;
  padding: 40px 20px;
}
.w_over-flow p {
  font-size: 14px;
  line-height: 16px;
  background-color: darkgray;
  margin: 4px 0;
}


/* inherit */
.w_inherit-outer {
  /* 如果想要使用 其他屬性可以將 overflow: hidden; 注釋去除; 將  overflow: scroll; 屬性設置注釋 */
  /* overflow: hidden; */
  overflow: scroll;
  height: 200px;
  width: 500px;
  background-color: cadetblue;
}
.w_inherit-son-outer {
  overflow: inherit;
  height: 120px;
  width: 222px;
  background-color: crimson;
  padding: 12px;
}
</style>

<body>
<div class="w_overflow-shel">
  inherit
  <div class="w_inherit-outer w_over-flow">
    <div class="w_inherit-son-outer">
      <p>111111111111111aaaaaaaaaaaaaaaaaaaaaaaaa</p>
      <p>2222222222222bbbbbbbbbbbbbbbbb</p>
      <p>ccccccccccccccc333333333333333</p>
      <p>444444444444444dddddddddddddddddddddddddddddd</p>
      <p>5555555555555eeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
      <p>666666666666666fffffffffffffffffffffffffffffffff</p>
      <p>77777777777777gggggggggggggggggggggggg</p>
      <p>8888888888888888888hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
    </div>
  </div>
</div>
</body>
</html>

圖片示例


v-5-1.png

v-5-2.gif

v-5-3.gif

如果對你有所幫助，希望大家喜歡點個關注；整理知識點不易, 每次都是在工作繁忙之余夜深人靜之時整理, 每次整理時都在思考如何讓大家更容易理解, 更容易找到、看到自己想看到的內(nèi)容; 無論知識點是大是小, 我都會驗證后再分享, 以防自己發(fā)表的文章給大家造成誤導。如有問題還望不吝賜教，本人會及時更改 (本文原創(chuàng), 如需轉(zhuǎn)載，請注明出處) 。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容