盒模型
包括內容區,補白,邊框,邊界(外邊距)
也就是=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盒模型基礎。
一 引入 在 中的製作過程中,會把整個頁面劃分結構,讓開發具有層次性,在後期也方便更新和維護。劃分的結構會形成乙個乙個的板塊,這樣劃分出來的一塊一塊的板塊我們簡稱為盒子。把劃分出來的整個 盒子結構也就叫做盒模型。在了解盒模型的基礎上,可以更好的去排版網頁結構,方便編寫 的介面。二 盒子的布局介紹 把...