web前端 overflow用法詳解

2021-10-22 16:33:01 字數 557 閱讀 5135

例如:

#容器a

你好啊你好啊你好啊你好啊你好啊你好啊你好啊

你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊

你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊

字數過多,寬度較小,裝不下自然就會超出容器。

overflow:hidden隱藏超出部分文字

auto 超出後會顯示滾動條

scroll 永遠有滾動條

在乙個父元素中,子元素設定margin-top/bottom會塌陷給父元素,為防止這種現象發生,解決辦法有:

設定父元素的padding、border、overflow:hidden。
父元素高度沒有設定的情況下,子元素全部浮動,就會導致父元素高度塌陷。解決辦法之一就是給父元素設定overflow。詳情見下面**。

overflow:hidden、auto、scroll均可。推薦使用hidden。這樣父元素就會根據子元素或者子元素內容自適應變化。

.list1

前端知識點之overflow屬性的用法

如果你沒有設定乙個盒子的 高度,該盒子的高度將根據他容納的內容的需要進行增長 但是當你給盒子指定乙個高度或者寬度而裡面的內容超出的時候可以用到overflow,又或者想讓浮動元素撐起 包含塊的時候也可以使用overflow屬性 overflow屬性 其有四個值 visible 預設 hidden,s...

overflow和display的用法

overflow的用法 帕蘭映像的詳解 引數 visible 不剪下內容也不新增滾動條。假如宣告此預設值,物件將被剪下為包含物件的window或frame的大小,並且clip屬性設定將失效。auto 此為body物件和textarea的預設值。在需要時剪下內容並新增滾動條。hidden 不顯示超過物...

Web前端學習(二) Css的基礎用法

css 層疊樣式表 英文全稱 cascading style sheets 是一 種用來表現html 標準通用標記語言的乙個應用 或xml 標 準通用標記語言的乙個子集 等檔案樣式的計算機語言。css不 僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁 各元素進行格式化 格式 屬性 屬性值...