溢位overflow和空間定位z index

2021-08-19 00:24:37 字數 886 閱讀 1821

語法格式:overflow: visible | hidden | scroll | auto

visible : 若內容溢位,溢位可見

hidden : 若內容溢位,溢位 不可見

scroll : 保持元素框大小,在框內應用滾動條顯示內容

auto : 等同於scroll,它表示在需要時應用滾動條 

適用情況:

① 當元素有負邊界時

② 框寬於上級元素內容區,不允許換行

③ 元素框寬於上級元素區域寬度

④ 元素框高於上級元素取餘高度

⑤ 元素定義了絕對定位

綜藝節目

1 非誠勿擾

2 康熙來了

3 快樂大本營

4 爸爸去哪了

5 天天向上

6 我們約會吧

效果圖如下:

若改為overflow:hidden;則有如下效果:

第六個將被隱藏看不見,沒有滾動條無法下滑。

z-index屬性用於調整定位時重疊塊的上下位置,與它的名稱一樣,想象頁面為x-y軸,垂直於頁面的方向為z軸,z-index值大的頁面位於小的上方。

aaaaaa

bbbbbb

cccccc

效果圖如下:

CSS 文件流和 overflow 溢位

文件流 流動方向 inline 元素從左到右,到達最右邊才會換行 block 元素從上到下,每乙個都另起一行 inline block 也是從左到右,寬度 inline 寬度為內部 inline 元素的和,部能用 width 指定 block 預設自動計算寬度,可用 windth 指定 inline...

CSS的內容溢位和剪裁 overflow

css的內容溢位和剪裁 overflow 為什麼要使用overflow html中經常會出現子元素的寬度或高度超過了 父元素的高度或寬度。頁面上的顯示內容就會超出 父元素的邊框。可以通過overflow進行控制處理。overflow介紹 滾動條樣式主要涉及到如下overflow屬性 overflow...

overflow屬性,此溢位非彼溢位

有四個值 visible 預設值 scroll,hidden和auto。scroll值能阻止內容溢位,但會增加出滾動條,通過拉動滾動條可以瀏覽所有內容。auto 如果內容溢位被限制,則會新增乙個滾動條,使超出的內容可以通過滾動展示出來。hidden 隱藏掉內容溢位的部分,溢位的內容將不可見。當文字超...