html中的盒模型

2021-10-22 23:50:20 字數 597 閱讀 2608

盒模型

包括內容區,補白,邊框,邊界(外邊距)

也就是=border+padding+margin+內容寬度。

其中padding的用法

1.padding是新增在父元素(盒子)上的

2.padding 調整子元素在父元素裡面的位置關係

3.padding會把盒子撐大

4.想讓盒子保持原來的大小:在寬高的基礎上減掉padding的值。

5.padding不會對背景圖造成影響。

6.padding沒有負值。

margin的用法

1.控制的是盒子與盒子之間的位置關係

2.margin長在盒子外圍的,不會對盒子本身的大小造成影響。

3.margin支援負值

4.讓子元素在父元素裡面左右居中:margin:0 auto

5.margin常見的bug

a 當父元素和子元素都沒有浮動的情況下,給第乙個子元素新增margin-top,會錯誤的把值新增在父元素上面。

b 相鄰兩個元素上下之間新增margin值會重疊,按較大的值設定。

html 彈性盒模型

父元素 display flex,flex direction,justify content,align items,align content 要使用彈性盒模型需要設定display flex 設定了flex direction的乙個方向為主軸則另乙個方向就為側軸,這個需要分清 1 flex d...

了解HTML 盒模型

html在布局上,有乙個非常重要的模型,那就是盒子模型,在盒子模型中把標籤內容理解為乙個物品,而css樣式理解為包容著這個物品的盒子,一般的塊級標籤都具有盒子模型的特徵,你可以在css中對這個盒子進行設定,以達到自己布局的目的,我這裡繪製了個簡圖,只寫了內填充和外邊距,因為我感覺其他的屬性更好用文字...

html盒模型基礎。

一 引入 在 中的製作過程中,會把整個頁面劃分結構,讓開發具有層次性,在後期也方便更新和維護。劃分的結構會形成乙個乙個的板塊,這樣劃分出來的一塊一塊的板塊我們簡稱為盒子。把劃分出來的整個 盒子結構也就叫做盒模型。在了解盒模型的基礎上,可以更好的去排版網頁結構,方便編寫 的介面。二 盒子的布局介紹 把...