css知识笔记（二）——盒子模型
盒子模型
類比月餅：禮盒是最外層，里面的月餅（伍仁）是頁面元素，比如一個div；"伍仁"本身是盒子的內容（可以是文字、圖片、另一個標簽元素），月餅和月餅盒之間的距離稱為盒子模型的內邊距padding，盒子與盒子之間的距離在樣式表里叫外邊距margin，盒子的邊框在樣式表里叫border，內填充、外邊距、邊框都有四個方向：padding-top，padding-right，padding-bottom，padding-left（順序不能亂）。
如果把padding-top改小，整個月餅就會往上移，如圖：
如果給這塊月餅一個高度，那么它的實際高度=月餅高度+內填充高度+內邊框高度+邊界，如圖：
邊框：盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。
如下面代碼為 div 來設置邊框粗細為 2px、樣式為實心的、顏色為紅色的邊框：
div{ border:2px solid red;}上面是 border 代碼的縮寫形式，可以分開寫：
div{ border-width:2px; border-style:solid; border-color:red;}注意：
1、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）。
2、border-color（邊框顏色）中的顏色可設置為十六進制顏色，如: border-color:#888;//前面的井號不要忘掉。
3、border-width（邊框寬度）中的寬度也可以設置為：
thin | medium | thick（但不是很常用），最常還是用象素（px）。
只在一個方向設置樣式：
div{border-bottom:1px solid red;border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;
寬度和高度：
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充以里的內容范圍。
因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
元素的高度也是同理。
比如：
css代碼：
div{width:200px;padding:20px;border:1px solid red;margin:10px; }html代碼：
<body><div>文本內容</div> </body>元素的實際長度為：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可查看元素盒模型，如下圖：
填充：元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。如下代碼：
順序一定不要搞混。可以分開寫上面代碼：
div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px; }如果上、右、下、左的填充都為10px;可以這么寫
div{padding:10px;}如果上下填充一樣為10px，左右一樣為20px，可以這么寫：
div{padding:10px 20px;}邊界:?元素與其它元素之間的距離可以使用邊界（margin）來設置。邊界也是可分為上、右、下、左。如下代碼： div{margin:20px 10px 15px 30px;}
也可以分開寫：
div{margin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px; }如果上右下左的邊界都為10px;可以這么寫：
div{ margin:10px;}如果上下邊界一樣為10px，左右一樣為20px，可以這么寫：
div{ margin:10px 20px;}總結一下：padding和margin的區別，padding在邊框里，margin在邊框外。
——————————————————————————————————————————————————————————————
以上內容參考自慕課網：http://www.imooc.com
總結
以上是生活随笔為你收集整理的css知识笔记（二）——盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 单身20年的手速到底有多快！！！！
- 下一篇： css学习笔记（三）——布局模型