前端學習 Css overflow

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

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

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

可選值：

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

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

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

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

doctype html

html

head

meta

charset

="utf-8"

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

前端學習 Css overflow

前端學習 Css overflow

學習筆記之一CSSoverflow

相關推薦