整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
標
CSS中有一個極其重要的理論，那就是“CSS盒子模型”的理論。網頁就是由許多一個一個小盒子組成的，這些盒子之間會互相影響，從而影響整個網頁的排版。
CSS里有一個極其重要的理論，那就是"CSS盒子模型"理論。一個頁面排版好不好看，靈活不靈活修改，跟css盒子模型有直接的關系。
頁面上所有的東西，包括一段話、一張圖片都可以看成是一個盒子，無數個小盒子，就組成了個大盒子，也就是最終得到了一個頁面。
到處都是小盒子
可以看得出個頁面由很多這樣的盒子組成，并且這些盒子還會互相影響。
所以從兩個方面來理解：一是理解單獨一個盒子的內部結構，二是理解多個盒子之間的相互關系。
盒子模型其實很容易理解，不必被網上那些看似很專業的圖給唬住，其實非常簡單，用一個雞蛋來舉例。
3層結構的雞蛋
這是一個香噴噴的雞蛋，可以看到有3層結構，分別是最里面的蛋黃、中間的蛋白和最外面的蛋殼。
Css盒子模型也是一樣，我們設置的一段話、一張圖片等等，這是實實在在的存在，就等同于雞蛋的蛋黃。
雞蛋的蛋殼等同于元素的邊框，大部分的元素都是可以設置邊框。
蛋白的這部分，就等同于填充物，將蛋黃和蛋殼隔得更遠，同時讓雞蛋變得更大，這對應了css模型中內邊距。
雞蛋的蛋黃、蛋白、蛋殼對應上了盒子模型中的內容（content）、內邊距（padding）、邊框（border）
這三種元素就足以組成一個盒子，就如同一個雞蛋。但這還不夠，如果一堆雞蛋堆在一起，就很容易碰壞，就需要將他們的距離拉開一點。
在雞蛋自身以外，通過安放海綿，來拉開距離，這對應盒子模型中的外邊框（margin）。
自此一個完整的盒子模型就出現了，控制自身的屬性（內容、內邊距、邊框）+控制身外的屬性（外邊距），就這么簡單。
無論網上的圖看似有多么專業，實際上用雞蛋就容易理解。
盒子模型
內邊距padding，又常常稱為"填充、補白"，它指的是內容區到邊框之間的那一部分。
內邊距padding分為四個方向的內邊距：padding-top、padding-right、padding-bottom、padding-left。
他常常用來增加空白的部分，起到美化的作用。左邊就是做了留白處理，不會像右邊那么緊湊。
對比圖
語法：padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
padding-top：50px的意思是內容與上邊框之間填充的大小是50px
效果
外邊距margin用于設置外邊距。是指盒子與盒子之間的距離。
內邊距分為四個方向的內邊距：margin-top、margin -right、margin -bottom、margin -left。
他的作用就是拉開兩個盒子之間的距離。如果設置過小，那么盒子之間就會顯得很擁擠，就會導致網頁很擁擠。
對比圖
語法：margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
margin-top：50px 意思是上邊框與上邊框鄰居的盒子的距離是50px
效果
子模型的簡介：
網頁設計中常用的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物——盒子作一個比喻來理解，所以叫它盒子模式。
CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
下面有一個圖片來解釋一些盒子模型（如下圖）：
不同部分的說明：
width(寬度)
height（高度）
Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。
總寬度 = 寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距。
總高度 = 高度 + 頂部填充 + 底部填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距。
代碼與效果演示：
代碼部分如下：
<head><meta charset="utf-8"><title>盒子模型</title><style type="text/css">
演示效果如下：
不作聲明時，網頁默認的有margin和padding，可以通過以下代碼去除掉網頁中默認的margin和padding。
代碼演示如下：
<style>
直接寫上 padding:20px; 的話默認的是上下左右都是 20px ；
當padding:10px 20px ;設為兩個值的時候，第一個表示上下，第二值表示左右；
當padding:10px 20px 30px 設置為三個值的時候，第一個值表示上 第二個值表示左右，第三個值表示下；
四個值的時候，采用上右下左。
網頁設計中常聽的屬性名：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模型都具備這些屬性。這些屬性我們可以用日常生活中的常見事物盒子作一個比喻來理解，所以叫它盒子模型。CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
語法：
border : border-width border-style border-color<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: 5px solid red; width: 80px; }</style></head><body> <div>碼海無際</div></body></html>邊框屬性—設置邊框樣式（border-style），邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：
CSS 邊框屬性：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { border-width: 5px; border-style: solid; border-color: red; width: 80px; } .d2 { border-bottom: 5px solid blue; width: 80px; }</style></head><body> <div>碼海無際</div> <br> <div class="d2">碼海無際</div></body></html>padding屬性用于設置內邊距。 是指 邊框與內容之間的距離。
注意： 后面跟幾個數值表示的意思是不一樣的：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { border: 1px solid red; width: 80px; padding: 15px 30px; }
.dv2 { border: 1px solid red; width: 80px; padding-top: 15px; padding-bottom: 15px; padding-left: 30px; padding-right: 30px; }</style></head><body> <div class="dv1">碼海無際</div> <br> <div class="dv2">碼海無際</div></body></html>margin屬性用于設置外邊距。 設置外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容。
取值順序跟內邊距相同。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1{ width: 80px; border: 1px solid red; margin: 15px; } .dv2{ width: 80px; border: 1px solid red; }</style></head><body> <div class="dv1">碼海無際</div> <div class="dv2">碼海無際</div></body></html>可以讓一個盒子實現水平居中，需要滿足一下兩個條件：
然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 120px; border: 1px solid red; margin: 50px auto; /*只是讓盒子居中，盒子里面的內容不會居中*/ text-align: center; }</style></head><body> <div class="dv1">碼海無際</div></body></html>為了更方便地控制網頁中的元素，制作網頁時，可使用如下代碼清除元素的默認內外邊距：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; /* 清除內邊距 */ margin: 0; /* 清除外邊距 */ } .dv1 { width: 120px; border: 1px solid red; }</style></head><body> <div class="dv1">碼海無際</div></body></html>當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 80px; height: 50px; background-color: red; margin-bottom: 20px; } .dv2 { margin-top: 30px; width: 80px; height: 50px; background-color: blue; }</style></head><body> <div class="dv1">碼海無際</div> <div class="dv2">碼海無際</div></body></html>對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。
解決方案：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dv1 { width: 100px; height: 100px; background-color: red; /*border-top: 1px solid darkmagenta;*/ /*padding-top: 1px;*/ overflow: hidden; } .dv2 { width: 80px; height: 50px; background-color: blue; margin-top: 20px; }</style></head><body> <div class="dv1"> <div class="dv2"></div> </div></body></html>*請認真填寫需求信息，我們會在24小時內與您取得聯系。
