整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS全稱“Cascading Style Sheet”，它的意思是“層疊樣式表”或“級聯樣式表”，CSS盒子模型是在網頁設計中用到的CSS技術中引用的一種思維模型。CSS盒子模型由內容區(qū)、填充、邊框、空白邊組成。
由于CSS盒子模型是CSS中的一個重要概念，每一個元素都可以當作一個矩形的盒子，這個矩形盒子可以描述元素所占空間內容。CSS盒子模型更方便了設計者對網頁設計的整體把控。
用億圖圖示繪制CSS盒子模型十分簡單，只需要找到指定模板即可，新手參考以下幾個步驟即可完成CSS盒子模型的繪制。
第一步：下載“億圖圖示”軟件，啟動軟件界面，登錄賬號開始操作。
第二步：點擊搜索框輸入“CSS盒子模型”，尋找符合設計要求的CSS盒子模型模板，點擊“使用”打開CSS盒子模型模板。
第三步：點擊操作區(qū)的CSS盒子模型，根據自己的需要，在模板上修改各層次的注釋，在上方操作區(qū)更改字體為黑體，并更改字體大小。
第四步：雙擊CSS盒子模型中的“文本”方框，即可輸入CSS盒子模型中的文本，右側填充可以修改填充色、邊框顏色。
第五步：完成CSS盒子模型制作之后，點擊左上角的“保存”等按鈕，本次選擇保存為讓圖片格式，修改好分辨率等參數之后，CSS盒子模型就可以存儲在電腦中。
以上就是CSS盒子模型繪制方法的相關介紹。
當有繪制CSS盒子模型的需求時，選擇億圖圖示這款國產矢量繪圖軟件，讓用戶繪圖事半功倍。
億圖圖示是一款與眾不同的矢量繪圖軟件，它采用了與其他繪圖軟件完全不同的思維模式設計開發(fā)，在滿足了用戶基本的繪圖需求基礎上，開發(fā)了模板套用功能，讓繪圖的效率提高許多，同時，在云存儲的加持下，億圖圖示用戶可以隨時隨地繪制作品。
使用億圖圖示繪制CSS盒子模型，直接套用一個模板，在原有基礎上修改、添加需要的元素，提升繪圖效率。
1、可靠軟件，值得信賴：億圖圖示經過了九個大版本的升級，軟件可靠程度大幅增加，現在已經擁有超過900萬用戶，龐大的使用群體是億圖圖示經受住市場優(yōu)勝劣汰的體現。
2、軟件資源庫強大，滿足繪圖需求：億圖圖示擁有數量龐大的矢量符號庫和模板庫，當用戶繪圖時可以很輕松的找到自己需要的符號，即使符號很特殊在庫中找不到，用戶也可以自行繪制或者導入本地符號圖形、從庫外調用。
3、先用后付，性價比高：億圖圖示為新用戶謀福利，凡是新注冊的億圖圖示賬戶，均可長期使用免費基礎版本。當有高級需求的時候，可以再升級購買會員版。
言
在前端面試的過程中，CSS盒模型是一道問的頻率非常高的問題。目前網上也有很多解釋CSS盒模型的文章，看了之后自己也總結了下相關知識點，大家一起來看看吧。
感興趣的同學可以加下我自己維護的群624-576-634。
CSS
CSS盒模型-What？
我們首先要了解的一個內容就是，什么是CSS盒模型呢？
簡單點說我們可以把一個HTML頁面看做一個大的方塊，在這個大的方塊里會嵌套很多小方塊（DOM元素），然后小方塊又會嵌套其他的小方塊，這樣一層層的嵌套著就構成了一個盒模型。
既然頁面的結構都是由一系列HTML標簽構成，為什么還會有不同的盒模型呢？
想當年微軟的IE瀏覽器占據超過80%市場份額的時候，覺得自己財大氣粗(是不是有點黑-_-!)，想自己獨立制定一套瀏覽器標準，其中就包括IE的盒模型，但是其他諸如Mozilla，Google等公司不同意IE的做法，他們遵循的是W3C的標準來定制瀏覽器，也就是W3C標準盒模型，因此就造成了現在瀏覽器不同的CSS盒模型了。
接下來我們具體看看IE盒模型和W3C盒模型有什么具體的不同吧。
對比
W3C標準盒模型
元素的width和height屬性只包含內容content部分，不包含內邊距padding和邊框border部分。
IE標準盒模型
元素的width和height屬性同時包含內容content，內邊距padding和邊框border部分，即：
width = content + padding + border
使用
那么我們該如何切換兩種盒模型的展示呢？
在IE8及以下的瀏覽器中只支持IE盒模型，在IE8+及其他主流瀏覽器中，通過CSS新增的box-sizing屬性可以設置瀏覽器的盒模型。box-sizing屬性的默認值是content-box，即W3C標準盒模型；而將box-sizing值設置為border-box時，則會更改為IE盒模型。
接下來我們通過代碼和界面效果來看看兩種盒模型的差異。
效果展示
以下測試都在Chrome瀏覽器中進行。
W3C盒模型
首先定義一個div，有如下CSS屬性。
定義一個div
如上所講，在不設置box-sizing屬性的情況下會采用W3C標準盒模型，在頁面呈現的結果如下所示。
頁面效果
左側是HTML頁面的效果，右側是通過查看瀏覽器的style效果。從中可以看出內容寬度(淺藍色部分)為100px，橫向實際占據的空間為content+padding+border，也就是100px+20px*2+10px*2=160px，乘以2是因為有左右兩個方向。
IE盒模型
同樣的元素我們再看看在IE盒模型下是什么樣的展示。只需要添加box-sizing: border-box;屬性即可。
css樣式
其呈現的效果如下圖所示。
頁面效果
從圖中可以看出，width設為100px，其占據的寬度也就是100px，其中實際內容的寬度只有40px大小(淺藍色部分)，padding-left和padding-right各占20px，border-left和border-right各占10px，因此是40+20*2+10*2=100px。
由以上的例子就可以很明顯的看出IE盒模型和W3C標準盒模型的區(qū)別了。
關于margin
不管是在IE盒模型還是W3C標準盒模型中，margin產生的效果是一樣的，都是會占用實際的空間，但是不改變盒子大小。
我們在上面例子的CSS屬性中再加入margin: 30px;
首先看看在IE盒模型下效果圖如下。
IE盒模型
通過上圖可以看出盒子需要占據的空間寬度為100+30*2=160px，而盒子實際寬度仍然為100px。
然后看看在W3C標準和模型下的效果。
W3C盒模型
通過上圖可以看出盒子需要占據的空間寬度為100+20*2+10*2+30*2=220px，而盒子的實際寬度為100+20*2+10*2=160px。
總結
今天這篇文章通過圖例和代碼講解了CSS中兩種不同的盒模型，分別是IE盒模型和W3C標準盒模型，大家都學會了嗎？
個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負責控制DOM元素的頁面布局和顏色、大小的屬性。
在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現大大代替了傳統(tǒng)的table表格嵌套。
雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內容之間的聯系個區(qū)別。
所有頁面的元素都可以看做一個盒子，占據著一定的頁面空間。一般來說這些被占據的空間往往會比單純的內容要大。因此，可以通過盒子的邊框和距離等參數來控制內容的位置。
Div+CSS 盒子模型
說明：
1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區(qū)域，外邊距是透明的。
2、Border：中文叫邊框，是圍繞在內邊距（Padding）和內容外的邊框。注意，它不是透明的。
3、Padding：中文叫內邊距，控制內容周圍的區(qū)域，內邊距是透明的。
4、Content：內容，盒子的內容，顯示文本和圖像。
5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。
6、盒子實際尺寸有可能大于內容尺寸：
盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;
盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區(qū)別。
頁面如圖所示：
原始樣式
代碼：
HTML:
<body>
<div class="TsetUpper"></div>
<div class="TsetMiddle"></div>
<div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}
.TsetMiddle{
width: 600px;
height: 200px;
background-color: red;
position: relative;
margin: auto;
}
.TsetDown{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}元素邊框：我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。
按如下代碼設置Div(TsetMiddle)的Border（邊框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30+30了，而且可以設置其底色和線條樣式。
Border
margin 控制周圍的元素區(qū)域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
margin: 30px auto;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：當元素的 padding（填充）內邊距被清除時，所釋放的區(qū)域將會受到元素背景顏色的填充。
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
padding: 30px;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各屬性的值可以用px為單位，也可以用em，百分比等。
2、可以利用盒子的各種屬性，調整其內容在父容器中的位置。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
