1. 程式人生 > >Display樣式 overflow樣式

Display樣式 overflow樣式

1. 內連盒子模型

內連盒子模型 不能設定 內容大小

width

height

兩個屬性

可以設定border,垂直不影響排版,水平影響排版

可以設定 padding 內邊距。水平影響排版,垂直不影響

可以設定margin  外邊距  只能設定水平,影響排版

水平外邊距不會重疊。

2.Display樣式用於修改元素的型別

        可選值 block 改為塊元素

                    inline 改為內連元素

                    inline-block 塊內元素

                        將元素轉換為塊內元素。既有塊元素的特徵,又有內連元素的特徵

                        既可以設定寬高,又不獨佔一行。

 display 的none可以隱藏元素。不會佔頁面的位置

visibility樣式也可以設定元素隱藏

    可選值hidden 隱藏元素,但是任然佔頁面的位置

    visible 預設值。不隱藏

3.overflow

     按理來說子元素的大小最大應該是等於父元素的大小

    但是html裡面可以設定的子元素比父元素還大。然後就會溢位到父元素外面去顯示

 overflow樣式就是用來處理這種情況的

        可選值  hidden 將溢位的內容剪下不顯示

                    scroll 新增滾動條。大小跟父元素一樣大。但是可以通過滾動看到溢位的內容 無論溢位不溢位都會有滾動條

                    auto 自動。 如果溢位就通過滾動條檢視溢位的元素,否則沒有滾動條,比較智慧。這個

                    visible 不做任何處理。預設的樣式