認識CSS樣式中的盒子模型

良多小伙伴知道上面是盒模子，可是并不知道它具體指什么，并且都有什么特征。今天我就來教大師理解盒模子

方式/步調

1
起首盒子模子顧名思義就是“盒子”與里面的“物品”的關系。所以我們先假設一個盒子而且里面放著塊物體
2
我們把盒子當當作頁面元素，好比<div>標簽。而盒子里面的物品是盒子模子的內容，這個內容可所以文字，也可所以圖片，還可所以別的的標簽元素
3
我們盒子與物品之間的距離叫盒子模子的填充物（padding）
4
我們把盒子與另一個盒子之間的距離叫盒子模子的外邊距（margin）
5
我們把盒子的邊框（圖中紅色的處所），在樣式內外叫border
6
值得注重的是，內填充（padding），外邊距（margin），邊框（border）都有4個偏向。好比內填充就有：padding-top, padding-right, padding-bottom, padding-left。若是我們把padding-right的值改小了，那么物品（元素）就會往右移
7
若是想設心猿意馬元素的高度或者寬度的話，則必需要注重：里面的物品的現實高度應該是它原本的高度（像素單元）加上上下內填充以及上下邊框才是它的現實高度。寬度則是同理的
8
在一般環境下，<div>,<ul>,<h>,<p>,<ol>,<table>等塊級標簽都具備了盒子模子的特征