Day5 CSS 內邊距 外邊距 盒子模型

2021-09-21 17:15:37 字數 1189 閱讀 2610

padding 會改變元素的實際大小

你好

margin,類似於 padding 的表示方法。

常用技巧:margin:0 auto;

margin 設定負使得邊框和合併:margin-top:-10px;

chrome瀏覽器 f12

元素叫做盒子,對應的樣式分別為:盒子的邊框(border),盒子裡的內容與邊框之間的距離(padding),盒子與盒子之間的距離(margin).

解決padding和border的尺寸問題

box-sizing:border-box;

box1

box2

塊元素

div p ul h1~h6 dl dt dd…

獨佔一行,即使設定了寬度

支援全部樣式

不設定寬度的情況下為父級元素的100%

內聯元素

內聯元素,不獨佔一行,只支援部分樣式

不支援寬高

只支援左右margin

支援padding

內聯塊元素

也叫行內塊元素

不獨佔一行

支援所有的樣式

如果不設定寬高,他的寬高屬性由內容決定

上面是乙個塊級元素,內聯元素

元素之間的轉換

轉化成內聯元素:display:inline;

轉化成內聯塊元素:display:inline-block;

轉化為塊元素:display:block;

111222

333 內聯元素轉化為塊元素或者是內聯塊元素

內聯元素轉化為塊元素或者是內聯塊元素

內聯元素轉化為塊元素或者是內聯塊元素

內聯元素轉化為塊元素或者是內聯塊元素

讓元素隱藏,並且影藏元素不會佔據位置:display:none

block可以把元素變成塊元素,也可以顯示隱藏的元素:display:block

box1

box2

我顯示了

css 內邊距 外邊距 邊框

1.內邊距css padding 屬性定義元素邊框與元素內容之間的空白區域。例子 padding left 20px 屬性 描述padding 簡寫屬性。作用是在乙個宣告中設定元素的所內邊距屬性。padding bottom 設定元素的下內邊距。padding left 設定元素的左內邊距。padd...

CSS內邊距和外邊距

一 內邊距 css padding 屬性定義內邊距,即邊框與元素內容之間的空白區域 padding 屬性接受長度值或百分比值,但不允許使用負值 可以依次表達,也可以按照上右下左的順序分別設定各邊的內邊距,各邊均可以使用不同的單位或百分比值 例如h1 等效於 h1 百分數值是相對於其父元素的 widt...

CSS內邊距黑和外邊距

css margin 外邊距 margin 外邊距 屬性定義元素周圍的空間。margin屬性接受任何長度單位 百分數值甚至負值。margin 清除周圍的 外邊框 元素區域。margin 沒有背景顏色,是完全透明的。margin 可以單獨改變元素的上,下,左,右邊距,也可以一次改變所有的屬性。marg...