前端學習 Css overflow

2021-09-21 15:21:51 字數 3216 閱讀 3658

子元素預設是存在于父元素的內容區中,理論上講子元素的最大可以等於父元素內容區大小。

如果子元素的大小超過了父元素的內容區,則超過的大小會在父元素以外的位置顯示,超出父元素的內容,我們稱為溢位的內容。

父元素預設是將溢位內容,在父元素外邊顯示,通過overflow可以設定父元素如何處理溢位內容:

可選值:

visible,預設值,不會對溢位內容做處理,元素會在父元素以外的位置顯示。

hidden, 溢位的內容,會被修剪,不會顯示。

scroll, 會為父元素新增滾動條,通過拖動滾動條來檢視完整內容,該屬性不論內容是否溢位,都會新增水平和垂直雙方向的滾動條。

auto,會根據需求自動新增滾動條,需要水平就新增水平,需要垂直就新增垂直,都不需要就都不加。

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

type

="text/css"

>

.visible

.hidden

.scroll

.auto

style

>

head

>

<

body

>

<

div

class

="visible"

>

進能有益,納說有補,人之所知也;或以不補而得佑,或以有益而獲罪。且夏時爐以炙溼,冬時扇以火。世可希,主不可準也;說可轉,能不可易也。世主好文,己為文則遇;主好武,己則不遇。主好辯,有口則遇;主不好辯,己則不遇。文主不好武,武主不好文;辯主不好行,行主不好辯。文與言,尚可暴習;行與能,不可卒成。學不宿習,無以明名。名不素著,無以遇主。倉猝之業,須臾之名,日力不足。不預聞,何以準主而納其說,進身而託其能哉?昔周人有仕數不遇,年老白首,泣涕於塗者。人或問之:「何為泣乎?」對曰:「吾仕數不遇,自傷年老失時,是以泣也。」人曰:「仕奈何不一遇也?」對曰:「吾年少之時,學為文。文德成就,始欲仕宦,人君好用老。用老主亡,後主又用武,吾更為武。武節始就,武主又亡。少主始立,好用少年,吾年又老,是以未嘗一遇。」仕宦有時,不可求也。夫希世準主,尚不可為,況節高志妙,不為利動,性定質成,不為主顧者乎?

div>

<

div

class

="hidden"

>

進能有益,納說有補,人之所知也;或以不補而得佑,或以有益而獲罪。且夏時爐以炙溼,冬時扇以火。世可希,主不可準也;說可轉,能不可易也。世主好文,己為文則遇;主好武,己則不遇。主好辯,有口則遇;主不好辯,己則不遇。文主不好武,武主不好文;辯主不好行,行主不好辯。文與言,尚可暴習;行與能,不可卒成。學不宿習,無以明名。名不素著,無以遇主。倉猝之業,須臾之名,日力不足。不預聞,何以準主而納其說,進身而託其能哉?昔周人有仕數不遇,年老白首,泣涕於塗者。人或問之:「何為泣乎?」對曰:「吾仕數不遇,自傷年老失時,是以泣也。」人曰:「仕奈何不一遇也?」對曰:「吾年少之時,學為文。文德成就,始欲仕宦,人君好用老。用老主亡,後主又用武,吾更為武。武節始就,武主又亡。少主始立,好用少年,吾年又老,是以未嘗一遇。」仕宦有時,不可求也。夫希世準主,尚不可為,況節高志妙,不為利動,性定質成,不為主顧者乎?

div>

<

div

class

="scroll"

>

進能有益,納說有補,人之所知也;或以不補而得佑,或以有益而獲罪。且夏時爐以炙溼,冬時扇以火。世可希,主不可準也;說可轉,能不可易也。世主好文,己為文則遇;主好武,己則不遇。主好辯,有口則遇;主不好辯,己則不遇。文主不好武,武主不好文;辯主不好行,行主不好辯。文與言,尚可暴習;行與能,不可卒成。學不宿習,無以明名。名不素著,無以遇主。倉猝之業,須臾之名,日力不足。不預聞,何以準主而納其說,進身而託其能哉?昔周人有仕數不遇,年老白首,泣涕於塗者。人或問之:「何為泣乎?」對曰:「吾仕數不遇,自傷年老失時,是以泣也。」人曰:「仕奈何不一遇也?」對曰:「吾年少之時,學為文。文德成就,始欲仕宦,人君好用老。用老主亡,後主又用武,吾更為武。武節始就,武主又亡。少主始立,好用少年,吾年又老,是以未嘗一遇。」仕宦有時,不可求也。夫希世準主,尚不可為,況節高志妙,不為利動,性定質成,不為主顧者乎?

div>

<

div

class

="auto"

>

進能有益,納說有補,人之所知也;或以不補而得佑,或以有益而獲罪。且夏時爐以炙溼,冬時扇以火。世可希,主不可準也;說可轉,能不可易也。世主好文,己為文則遇;主好武,己則不遇。主好辯,有口則遇;主不好辯,己則不遇。文主不好武,武主不好文;辯主不好行,行主不好辯。文與言,尚可暴習;行與能,不可卒成。學不宿習,無以明名。名不素著,無以遇主。倉猝之業,須臾之名,日力不足。不預聞,何以準主而納其說,進身而託其能哉?昔周人有仕數不遇,年老白首,泣涕於塗者。人或問之:「何為泣乎?」對曰:「吾仕數不遇,自傷年老失時,是以泣也。」人曰:「仕奈何不一遇也?」對曰:「吾年少之時,學為文。文德成就,始欲仕宦,人君好用老。用老主亡,後主又用武,吾更為武。武節始就,武主又亡。少主始立,好用少年,吾年又老,是以未嘗一遇。」仕宦有時,不可求也。夫希世準主,尚不可為,況節高志妙,不為利動,性定質成,不為主顧者乎?

div>

body

>

html

>

注釋下各種div就可以看到效果:

overflow: hidden:超出部分不會顯示

overflow: scroll:可以滑動將內容全部顯示

overflow: auto:看下效果:

可執行**檔案:

前端學習 Css overflow

子元素預設是存在于父元素的內容區中,理論上講子元素的最大可以等於父元素內容區大小。如果子元素的大小超過了父元素的內容區,則超過的大小會在父元素以外的位置顯示,超出父元素的內容,我們稱為溢位的內容。父元素預設是將溢位內容,在父元素外邊顯示,通過overflow可以設定父元素如何處理溢位內容 可選值 v...

前端學習 Css overflow

子元素預設是存在于父元素的內容區中,理論上講子元素的最大可以等於父元素內容區大小。如果子元素的大小超過了父元素的內容區,則超過的大小會在父元素以外的位置顯示,超出父元素的內容,我們稱為溢位的內容。父元素預設是將溢位內容,在父元素外邊顯示,通過overflow可以設定父元素如何處理溢位內容 可選值 v...

學習筆記之一CSSoverflow

今天在寫前端 的時候偶然發現了乙個平時沒有注意過的css屬性 這個屬性叫overflow,初一看發現就是stackoverflow的overflow 我們可以看到為什麼會發現這個問題,是因為我在寫前端 的時候遇到了乙個棘手的問題,我們看到這個頁面應該是由左邊的div和右邊的div組成,但是我們發現右...