天天看點

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 不做任何處理。預設的樣式

繼續閱讀