搜尋

首頁 >web前端 >html教學 >深入理解CSS溢出overflow

深入理解CSS溢出overflow

巴扎黑
巴扎黑轉載
2017-06-09 14:05:563601瀏覽

前面的話

　　當一個元素固定為某個特定大小，但內容在元素中放不下。此時就可以利用overflow屬性來控制這個狀況

 

#訂

##overflow溢位

　　值: visible | hidden | scroll | auto | inherit

　　初始值: visible

　　應用於: 區塊級元素、替換元素、單元格

　　應用於: 區塊級元素、取代元素、單元格

繼承性: 無

　　[注意]除了IE7-瀏覽器外，其他瀏覽器都不支援為table-cell元素設定overflow屬性。 firefox和IE11瀏覽器不支援給table-cell元素的設定100%高度的子元素設定overflow屬性

overflow-X | overflow- y

　　overflow-x和overflow-y的屬性原本是IE瀏覽器獨自拓展的屬性，後來被CSS3採用，並標準化。 overflow-x主要用來定義對水平方向內容溢出的剪切，而overflow-y主要用來定義對垂直方向內容溢出的剪切

　　[注意]如果overflow-x和overflow-y值相同則等同於overflow。如果overflow-x和overflow-y值不同，且其中一個值明確設定為visible或未設定預設為visible，而另一個值是非visible的值。則visible值會被重設為auto

　　值: visible | hidden | scroll | auto | inherit | no-display | no-content

#　　初始值: visible

##應用於: 區塊級元素、替換元素、表格單元格

　　繼承性: 無

##屬性

#visible

　　元素的內容在元素框之外也可見

　　[注意1]IE6-瀏覽器中元素的包含區塊會延伸，使得可以包覆其超出的內容


.box{
    height: 200px;
    width: 200px;
    background-color: lightgreen;
}.in{
    width: 300px;
    height: 100px;
    background-color: lightblue;
}


<p class="box">
    <p class="in"></p></p>

　　左圖為IE6-瀏覽器，右圖為其他瀏覽器

#　　[注意2]IE7-瀏覽器的按鈕(包括