CSS盒子模型就是在CSS技術(shù)所使用的一種思維模型。CSS假定所有的HTML文檔元素都生成一個描述該元素在HTML文檔布局中所占空間的矩形元素框，可以形象地將其看作是一個盒子。通過定義一系列與盒子相關(guān)的屬性，可極大地豐富和促進各個盒子乃至整個HTML文檔的表現(xiàn)效果和布局結(jié)構(gòu)。
創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司，專注重慶網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計，有關(guān)成都定制網(wǎng)頁設(shè)計方案、改版、費用等問題，行業(yè)涉及地磅秤等多個領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認可。
CSS盒子模型由內(nèi)容區(qū)、填充、邊框和空白邊四部分組成。內(nèi)容區(qū)是盒子模型的中心，呈現(xiàn)盒子的主要信息內(nèi)容；填充是內(nèi)容區(qū)和邊框之間的空間；邊框是環(huán)繞內(nèi)容區(qū)和填充的邊界；空白邊位于盒子的最外圍，是添加在邊框外周圍的空間。
擴展資料：
CSS盒子模型特點：
1、豐富的樣式定義：CSS提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
2、易于使用和修改：CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用?？傊?，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進行統(tǒng)一管理。
3、多頁面應(yīng)用：CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現(xiàn)多個頁面風(fēng)格的統(tǒng)一。
參考資料來源：百度百科-CSS盒子模型
盒子模型分為哪幾部分？
一個盒子模型分成幾部分：
- 內(nèi)容區(qū)（content）
- 內(nèi)邊距（padding）
- 邊框（border）
- 外邊距（margin）12345
內(nèi)容區(qū)
內(nèi)容區(qū)：盒子中放置內(nèi)容的區(qū)域，也就是元素中的文本內(nèi)容，子元素都是存在于內(nèi)容區(qū)中的。
如果沒有元素設(shè)置內(nèi)邊距和邊框，則設(shè)置內(nèi)容大小偶人和盒子大小一致123
通過width 和height 兩個屬性可以設(shè)置內(nèi)容的大小1
width 和height屬性值適合用于塊元素1
內(nèi)邊距
內(nèi)邊距：元素內(nèi)容區(qū)與邊框以內(nèi)的空間1
默認情況下width和height不包含padding的大小
12
使用padding屬性來設(shè)置元素的內(nèi)邊距
舉例：
-padding:10px 20px 30px 40px;
這樣會設(shè)置元素的 上，右，下，上 四個方向的內(nèi)邊距。(按照順時針方向)
padding:10px 20px 30px;
分別指定 上，左右，下 四個方向的內(nèi)邊距
padding:10px 20px;
分別指定 上下，左右 四個方向的內(nèi)邊距
padding:10px ;
分別指定 上左下右 四個方向的內(nèi)邊距
同時在CSS中還提供padding-top padding-right padding-left padding-bottom1234567891011121314
邊框
可以在元素周圍創(chuàng)建邊框，邊框是元素可見的最外部1
可以使用border屬性來設(shè)置盒子的邊框：
-border:1px red solid;
上邊的樣式分別指定了邊框的 寬度 ，顏色，樣式123
也可以使用border-top/left/right/bottom分別指定 上右下左 四個方向的邊框
和padding一樣，默認width 和height 并包括邊框的寬度123
邊框樣式
邊框樣式可以設(shè)置多種樣式：
-none（沒有邊框）
-dotted（點線）
-dashed（虛線）
-solid（實線）
-double（雙線）
-groove（槽線）
-ridge（脊線）
-inset（凹線）
-outset（凸線）1234567891011
外邊距
外邊距是原素邊框與周圍元素相距的空間1
使用margin屬性可以設(shè)置外邊距1
用法和padding 類似，同樣也提供了四個方向的
margin-top/right/bottom/left12
當(dāng)將左右外邊距設(shè)置為auto時，瀏覽器會將左右外邊距設(shè)置為相等，所以這行代碼 margin:0 auto 可以使元素居中
1
margin 在一個聲明中設(shè)置所有外邊距屬性。
margin-top 設(shè)置元素的上外邊距。
margin-bottom 設(shè)置元素的下外邊距。
margin-left 設(shè)置元素的左外邊距。
margin-right 設(shè)置元素的右外邊距。
備注 ：我們需要在不同設(shè)備的不同尺寸屏幕下去瀏覽網(wǎng)頁，傳統(tǒng)的網(wǎng)頁布局方式很難滿足響應(yīng)式布局的需要。因此css3提出了一些全新的布局屬性，包括： 彈性盒子模型 ， 多列屬性 ， 響應(yīng)式布局 等等。彈性盒子模型的最大特征在于動態(tài)修改子元素的寬度和高度，以滿足在不同尺寸屏幕下的恰當(dāng)布局。
說明 ：盒子模型的內(nèi)容范圍包括內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)。盒子模型就是通過div和css樣式來設(shè)計一個可以添加邏輯的效果。
備注 ：內(nèi)邊距(padding)在 content 外，邊框內(nèi)。內(nèi)邊距有1個參數(shù)時，上下左右外邊距都為該參數(shù)值；2個參數(shù)時，第一個參數(shù)為 上下 外邊距值，第二個參數(shù)為 左右 外邊距值；4個參數(shù)分別代表 上右下左 外邊距值。
邊框可以創(chuàng)造出效果出色的邊框，并可以應(yīng)用于任何元素。 基本的邊框?qū)傩?：
簡化寫法
備注： border: 1px solid red; 三個參數(shù)分別為邊框的寬度、樣式和顏色屬性。
css3提供的邊框?qū)傩?/p>
eg1 ：圓角邊框的繪制
陰影屬性(box-shadow)的4個參數(shù)分別代表：背景陰影 向右 移動10個像素，再 向下 移動20個像素；陰影 透明度 ；陰影 顏色 。
備注：圍繞在內(nèi)容邊框的區(qū)域就是外邊距(margin)，外邊距默認是透明區(qū)域，外邊距接受任何長度單位和百分數(shù)值。外邊距和內(nèi)邊距的屬性比較相似。margin的參數(shù)個數(shù)和對應(yīng)代表大含義和padding一致。
盒子模型示例
說明：最外層的div為容器層，之后為邊框、內(nèi)邊距和內(nèi)容區(qū)域。
說明：外邊距合并就是一個疊加的概念。外邊距合并遵循邊距大的一方，即元素1的外邊距為10px，元素2的外邊距為20px,則元素1和元素2間的距離為20px；元素1的外邊距為10px，元素2的外邊距為10px,則元素1和元素2間的距離為10px。
(1) 彈性容器屬性
(2) 彈性子元素屬性
eg1 ：
CSS 有 非常重要的 三個特性：層疊性、繼承性、優(yōu)先級。
相同選擇器 給設(shè)置 相同的樣式，此時一個樣式就會 覆蓋（層疊） 另一個沖突的樣式。
層疊主要解決樣式?jīng)_突的問題 。
層疊性原則：
CSS中的繼承：子標(biāo)簽會繼承父標(biāo)簽的某些樣式，如 文本顏色 和 字號。
簡單理解：子承父業(yè)。
當(dāng)同一個元素指定多個選擇器，就會有優(yōu)先級的產(chǎn)生。
優(yōu)先級注意點：
權(quán)重疊加 ：如果是復(fù)合選擇器，則會有權(quán)重疊加，需要計算權(quán)重。
練習(xí)：
頁面布局要學(xué)習(xí)三大核心： 盒子模型, 浮動 和 定位 .
學(xué)習(xí)好盒子模型能非常好的幫助我們布局頁面.
網(wǎng)頁布局過程：
網(wǎng)頁布局的核心本質(zhì)： u 就是利用 CSS 擺盒子 /u。
所謂 盒子模型 ：就是把 HTML 頁面中的布局元素看作是一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。
CSS 盒子模型本質(zhì)上是一個盒子，封裝周圍的 HTML 元素，它包括：u邊框/u、u外邊距/u、u內(nèi)邊距/u、和 u實際內(nèi)容/u
border可以設(shè)置元素的邊框。邊框有三部分組成： 邊框?qū)挾?粗細)、 邊框樣式 、 邊框顏色
語法：
CSS 邊框?qū)傩栽试S你指定一個元素邊框的 樣式 和 顏色 。
語法
邊框樣式 border-style 可以設(shè)置如下值：
邊框簡寫：
邊框分開寫法：
課堂要求：請給一個 200*200 的盒子，設(shè)置上邊框為紅色，其余邊框為藍色（提示：一定注意邊框的層疊性）
border-collapse 屬性控制瀏覽器繪制表格邊框的方式。它控制相鄰單元格的邊框。
語法：
邊框會額外增加盒子的實際大小。因此我們有兩種方案解決:
padding 屬性用于設(shè)置內(nèi)邊距，即 邊框與內(nèi)容 之間的距離。
padding 屬性（簡寫屬性）可以有一到四個值。
以上 4 種情況，我們實際開發(fā)都會遇到。
內(nèi)邊距會影響盒子實際大小
當(dāng)我們給盒子指定 padding 值之后，發(fā)生了 2 件事情：
也就是說，如果盒子已經(jīng)有了寬度和高度，此時再指定內(nèi)邊框，會撐大盒子。
解決方案：
u如果保證盒子跟效果圖大小保持一致/u，則 讓 width/height 減去多出來的內(nèi)邊距大小 即可。
padding內(nèi)邊距可以撐開盒子,我們可以做非常巧妙的運用.
因為每個導(dǎo)航欄里面的字數(shù)不一樣多,我們可以不用給每個盒子寬度了,直接給padding最合適。
相關(guān)取值:
padding內(nèi)邊距可以撐開盒子, 有時候,也會讓我們?nèi)バ薷膶挾取?/p>
現(xiàn)實開發(fā)時候，小米側(cè)邊欄，文字距離左側(cè)的距離不能用text-indent調(diào)整，這樣不精確，實際開發(fā)的做法是：給padding值，這樣更加精確
如果盒子本身沒有指定width/height屬性, 則此時padding不會撐開盒子大小.
margin 屬性用于設(shè)置外邊距，即控制盒子和盒子之間的距離。
margin 簡寫方式代表的意義跟 padding 完全一致。
外邊距可以讓 塊級 盒子 水平居中 ，但是必須滿足兩個條件：
① 盒子必須指定了寬度（width）。
② 盒子 左右的外邊距 都設(shè)置為 auto 。auto----自動
常見的寫法，以下三種都可以：
注意： 以上方法是讓塊級元素水平居中， 行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素添加 text-align:center 即可。
使用 margin 定義塊元素的 垂直外邊距 時，可能會出現(xiàn)外邊距的合并。
主要有兩種情況:
1. 相鄰塊元素垂直外邊距的合并
2. 嵌套塊元素垂直外邊距的塌陷
當(dāng)上下相鄰的兩個塊元素（兄弟關(guān)系）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有 上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值中的 較大者這種現(xiàn)象被稱為 相鄰塊元素垂直外邊距的合并 。
解決方案：
對于兩個嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。
解決方案：
① 可以為父元素定義上邊框。
② 可以為父元素定義上內(nèi)邊距。
③ 可以為父元素添加 overflow:hidden。
還有其他方法，比如浮動、固定，絕對定位的盒子不會有塌陷問題，后面再總結(jié)。
網(wǎng)頁元素很多都帶有默認的內(nèi)外邊距，而且不同瀏覽器默認的也不一致。因此我們在布局前，首先要清除下網(wǎng)頁元素的內(nèi)外邊距。
注意： 行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不要設(shè)置上下內(nèi)外邊距(因為設(shè)置了也不起作用)。但是轉(zhuǎn)換為塊級和行內(nèi)塊元素就可以了。
因為網(wǎng)頁美工大部分效果圖都是利用 PS（Photoshop） 來做的，所以以后我們大部分切圖工作都是在 PS 里面完成。
因為網(wǎng)頁美工大部分效果圖都是利用 PS（Photoshop） 來做的，所以以后我們大部分切圖工作都是在 PS 里面完成。
總結(jié)
標(biāo)簽都是有語義的, 合理的地方用合理的標(biāo)簽。比如產(chǎn)品標(biāo)題 就用 h, 大量文字段落就用p
類名就是給每個盒子起了一個名字,可以更好的找到這個盒子, 選取盒子更容易,后期維護也方便。
大部分情況兩個可以混用，兩者各有優(yōu)缺點，但是根據(jù)實際情況，總是有更簡單的方法實現(xiàn)。
布局有很多種實現(xiàn)方式，同學(xué)們可以開始先模仿我的寫法，然后再做出自己的風(fēng)格。
最后同學(xué)們一定多運用輔助工具,比如屏幕畫筆,ps等等
去掉 li 前面的 項目符號（小圓點）
語法：
圓角邊框、盒子陰影、文字陰影
（重點記住前兩個，文字陰影做了解）
在 CSS3 中，新增了 圓角邊框 樣式，這樣我們的盒子就可以變圓角了。
border-radius 屬性用于設(shè)置元素的外邊框圓角。
語法：
radius 半徑（圓的半徑）原理：（橢）圓與邊框的交集形成圓角效果
CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子添加陰影。
語法：
注意 ：
在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應(yīng)用于文本。
語法：
CSS中， Box Model叫盒子模型（或框模型），Box Model規(guī)定了元素框處理元素內(nèi)容（element content）、內(nèi)邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。在HTML文檔中，每個元素（element）都有盒子模型，所以說在Web世界里（特別是頁面布局），Box Model無處不在。下面是Box Model的圖示：
說明：上圖中，由內(nèi)而外依次是元素內(nèi)容（content）、內(nèi)邊矩（padding-top、padding-right、padding- bottom、padding-left）、邊框（border-top、border-right、border-bottom、border- left）和外邊距（marging-top、margin-right、margin-bottom、margin-left）。
內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個元素的所有邊，也可以應(yīng)用于單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。?
下圖是W3School的Box Model 圖解：?
示例代碼如下：
htmlhead
style type="text/css"
/* “*” 代表通配符，代表適用于所有標(biāo)簽*/
*{ ? ? ? ? ? ?padding: 0px; ? ? ? ? ? ?margin: 0px; ? ? ? ?}
/*ID選擇器*/
#myDiv{ ? ? ? ? ? ?/*實際的寬度，width+左右邊距+左右邊框*/
width: 200px; ? ? ? ? ? ?height: 300px; ? ? ? ? ? ?border: 1px solid red; ? ? ? ? ? ?/*
padding填充，內(nèi)邊距
*/
/*
1.上下左右的的值
2.上下，左右
3.上，左右，下
4.上，右，下，左（順時針方向）
*/
padding: 0px 10px 0px; ? ? ? ? ? ?margin: 10px 20px 10px; ? ? ? ?}
#myDiv2{ ? ? ? ? ? ?width: 200px; ? ? ? ? ? ?height: 300px; ? ? ? ? ? ?border: 1px solid green; ? ? ? ?}
/*類選擇器*/
.title{ ? ? ? ? ? ?color: blue; ? ? ? ? ? ?font-size: 14px; ? ? ? ?}
/*混合使用*/
span.title{ ? ? ? ? ? ?font-size: 25px; ? ? ? ?}
div p{ /*代表div下的p標(biāo)簽*/
font-size: 20px; ? ? ? ? ? ?color: yellow; ? ? ? ?}
/style
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titleTitle/title/headbody
div id="myDiv"
pabc/p
/div
div id="myDiv2"/div
span class="title"Javascript/span
i class="title"ActionScript/i/body/html
說了這么多，怎樣選擇，根據(jù)項目情況而定，以及個人熟練程度。。。加油
內(nèi)容 content ：盒子的主要區(qū)域，盒子中的文本內(nèi)容以及后代元素都顯示在內(nèi)容區(qū)域中。
內(nèi)邊距 padding ：內(nèi)容與盒子邊界的距離。
邊框 border ：邊框顯示在盒子的邊界上。
外邊距 margin ：盒子和相鄰兄弟元素或父元素的距離。
盒子的大小=內(nèi)容的大小+內(nèi)邊距的大小+邊框的大小
元素默認 總寬度 = 父元素內(nèi)容的寬度 - 元素自己的左右外邊距
元素默認 內(nèi)容寬度 = 父元素內(nèi)容的寬度 - 元素自己的左右外邊距 - 元素自己的左右邊框?qū)挾?- 元素自己的左右內(nèi)邊距
重慶分公司
重慶分公司
