盒模式是 CSS 中一個(gè)重要的概念，即元素在頁(yè)面所占據(jù)的空間位置，盒模型的屬性包括：內(nèi)容 (content)、填充 (padding)、邊框 (border)、邊界 (margin)，盒模型一共分為兩種，一種是 W3C 標(biāo)準(zhǔn)盒模型，另一種是 IE 盒模型（又稱怪異盒模型）
成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站與策劃設(shè)計(jì),陽(yáng)城網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:陽(yáng)城等地區(qū)。陽(yáng)城做網(wǎng)站價(jià)格咨詢:18982081108
元素盒模型寬高 = 內(nèi)容的寬高 + 內(nèi)邊距padding + 邊框border + 外邊距margin
背景顏色從 border-box 開(kāi)始生效的，背景圖像從 padding-box 開(kāi)始生效的，CSS 3 屬性 : content-box / padding-box / border-box 可以改變背景圖像從盒模型的哪部分開(kāi)始生效
通過(guò)盒模型的外邊距 margin 拉開(kāi)各元素之間的間隙、距離，使用 padding 來(lái)?yè)伍_(kāi)自身的寬高
在低版本 IE 里，若不添加 !DOCTYPE html 的文檔聲明，就會(huì)按照 IE 盒模型進(jìn)行解析
元素盒模型寬高 = 內(nèi)容的寬高【元素的寬高 + padding + border】 + 外邊距margin
IE 盒模型的計(jì)算方式和 W3C 的盒模型很相似，但有一點(diǎn)是非常不同的，這就是：內(nèi)邊距和邊框并不被包含在計(jì)算的范圍內(nèi)，這就意味著，如果元素也有內(nèi)邊距 padding 和邊框 border ，那么實(shí)際內(nèi)容區(qū)域?qū)?huì)縮小，為它們騰出空間
在實(shí)際設(shè)計(jì)中，我們會(huì)發(fā)現(xiàn)，IE 盒模型更容易進(jìn)行控制，我們一般先將整個(gè)容器的尺寸先確定，然后再填充具體的內(nèi)容，通過(guò) padding 來(lái)調(diào)整內(nèi)容的具體位置，通過(guò) margin 來(lái)調(diào)整容器與其他元素之間的間隙，無(wú)論如何調(diào)整，整個(gè)容器的結(jié)構(gòu)是固定的，不會(huì)改變的；而在標(biāo)準(zhǔn)盒模型中，我們?cè)谡{(diào)整 padding 和 margin 的同時(shí)，往往會(huì)將容器本身的結(jié)構(gòu)打亂，需要重新設(shè)置內(nèi)容 content 的尺寸
CSS 3 屬性： box-sizing: border-box; 可以讓元素按照 IE 盒模型進(jìn)行解析，即設(shè)置的寬高包括了 border 以及 padding 的值
display 屬性，元素的顯示方式，規(guī)定元素應(yīng)該生成的框的類型，這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型
注釋 ： inline-block 在 IE7 開(kāi)始支持，在 IE6 下設(shè)置 _display:inline; 也可以實(shí)現(xiàn)相同效果，下劃線 _ 是只針對(duì) IE6 所設(shè)置的 CSS 樣式，例： _width:100px;
我們來(lái)回顧下塊元素和行元素的特點(diǎn)，塊元素的特點(diǎn)： 豎直排列，可以設(shè)置寬高，寬度占滿整行，即寬度 100%，另起新行 ；行元素的特點(diǎn)： 水平排列，設(shè)置寬高不生效，寬度由內(nèi)容決定，高度由行高決定 ，這是我們之前已經(jīng)了解過(guò)的，那么它們?cè)O(shè)置內(nèi)外邊距的特點(diǎn)又是什么呢？我們來(lái)嘗試一下
由運(yùn)行結(jié)果可以得知， 行元素在豎直方向上設(shè)置的 margin 不生效，水平方向上設(shè)置的 margin 疊加
由運(yùn)行結(jié)果可以得知， 行元素在水平方向上設(shè)置的 padding 生效，豎直方向上的不生效 ，雖然元素的范圍增大了，但是，由于行元素的高度是由內(nèi)容決定的，所以加了上下 padding 以后會(huì)與臨近行的元素產(chǎn)生干涉
所以，行元素建議盡量不要設(shè)置上下的內(nèi) / 外邊距，即 padding-top , padding-bottom 和 margin-top ， margin-bottom ，因?yàn)橐雌鸩坏叫Ч纯雌饋?lái)有效實(shí)則容易引起布局混亂
由運(yùn)行結(jié)果可以得知， 塊元素在豎直方向上設(shè)置的 margin 以大的 margin 來(lái)計(jì)算 ，因?yàn)閴K元素寬度默認(rèn)占滿整行，設(shè)置內(nèi)邊距 padding 和水平方向上的外邊距 margin 只會(huì)調(diào)整元素的位置，在這里就不再驗(yàn)證
行元素在豎直方向上設(shè)置的 margin / padding 不生效，水平生效
塊元素在豎直方向上設(shè)置的 margin 會(huì)重疊，大的那個(gè)值生效
行元素在水平方向上設(shè)置的 margin / padding 不會(huì)重疊，水平相加
設(shè)置了 inline-block 屬性之后，行元素就具有塊元素的特點(diǎn)【可以設(shè)置寬高；豎直方向上的 padding/margin 生效】，塊元素就可以水平排列
display:none; 和 visibility:hidden; 都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來(lái)，但兩者是有區(qū)別的：
display:none; 不為被隱藏的對(duì)象保留其物理空間，即該對(duì)象在頁(yè)面上徹底消失，不占據(jù)空間位置，完全消失
visibility:hidden; 使對(duì)象在網(wǎng)頁(yè)上不可見(jiàn)，但該對(duì)象在網(wǎng)頁(yè)上所占的空間沒(méi)有改變，還占據(jù)原來(lái)的空間位置，可以理解為透明
讓有寬度【非寬度100%】的 塊元素水平居中 ： margin:0 auto;
設(shè)置 單行文本的豎直居中 ： line-height: 該元素高度;
行元素水平居中 ：給行元素的父級(jí)添加 text-alingn:center;
text-align:center/left/right; 設(shè)置塊元素中的內(nèi)容文本、圖片的對(duì)齊方式，只能設(shè)置在塊元素，在行元素中設(shè)置無(wú)效
行文過(guò)程中出現(xiàn)錯(cuò)誤或不妥之處在所難免，希望大家能夠給予指正，以免誤導(dǎo)更多人，最后，如果你覺(jué)得我的文章寫的還不錯(cuò)，希望能夠點(diǎn)一下 喜歡 和 關(guān)注 ，為了我能早日成為優(yōu)秀作者獻(xiàn)上一發(fā)助攻吧，謝謝！^ ^
CSS樣式可能會(huì)是這個(gè)樣子的:body{background:#999;}
#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
} 下面是一個(gè)效果預(yù)覽： 設(shè)置為相對(duì)定位，當(dāng)我們定位logo的時(shí)候，我們希望它的位置是相對(duì)于容器的，因此使用相對(duì)定位：
#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
} 將它定位到盒子的外面現(xiàn)在你需要做的就僅僅是定位logo，將其水平定位，讓它從容器中突出出來(lái)。
#logo{position:absolute;
盒模型有兩種：
① 標(biāo)準(zhǔn)模式
② 怪異模式（quirks 模式）
---------------------------------------------分割線----------------------------------------------
在文件頭使用!DOCTYPE HTML都會(huì)觸發(fā)標(biāo)準(zhǔn)模式，如果DOCTYPE缺失則在ie6，ie7，ie8下將會(huì)觸發(fā)怪異模式（quirks 模式）。也可以在css上加入box-sizing:content-box;
box-sizing:content-box---------標(biāo)準(zhǔn)盒模型
例：
.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
}
盒子總寬度/高度=width/height+padding+border+margin
也就是說(shuō)，如果你設(shè)定width為200px，那么文本（內(nèi)容）所占的寬度就是200px。無(wú)論設(shè)置border,還是padding都會(huì)影響那個(gè)盒子的寬度，這樣的話會(huì)影響其他的位置，一般用于大框架里的小東西。
---------------------------------------------分割線----------------------------------------------
box-sizing:border-box--------怪異盒模型
例：
.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
box-sizing:border-box;
}
盒子總寬度/高度=width/height + margin = 內(nèi)容區(qū)寬度/高度 + padding + border + margin;
可以說(shuō)是，你設(shè)置width為200px時(shí)，那么盒子的寬度就是200px，無(wú)論設(shè)置border,還是padding都不會(huì)影響那個(gè)盒子的寬度。
在網(wǎng)頁(yè)里設(shè)置那些大的框架會(huì)很好用。
在CSS中，所有元素被“ 盒子 ”所包圍，利用盒模型的基本原理來(lái)實(shí)現(xiàn)CSS準(zhǔn)確布局，元素排列等處理
CSS廣泛使用的兩種盒子，其在頁(yè)面流和元素之間的關(guān)系表現(xiàn)為不同的行為：
對(duì)于定義為塊級(jí)盒子（block）的元素會(huì)表現(xiàn)出以下行為：
對(duì)于定義為內(nèi)聯(lián)盒子（inline）的元素會(huì)表現(xiàn)出以下行為：
通過(guò)對(duì)盒子設(shè)置display的屬性值，來(lái)控制盒子的外部顯示類型
外部顯示類型與內(nèi)部顯示類型
外部顯示類型：決定盒子是塊級(jí)還是內(nèi)聯(lián)，即決定了盒子之間的布局方式
內(nèi)部顯示類型：決定了盒子內(nèi)部的元素是如何布局的，默認(rèn)情況是按照正常文檔流布局，也可以通過(guò)設(shè)置display值為flex和grid來(lái)改變內(nèi)部元素之間的布局方式
不同顯示類型的例子
block：
圖中段落里的 span word /span 被設(shè)置為 display：block
因此其獨(dú)占一行，寬度填滿整個(gè)父元素
flex：
圖中的列表被設(shè)置為 display：block ，每個(gè)列表是一個(gè)塊級(jí)元素 —— 像段落一樣 —— 會(huì)充滿整個(gè)容器的寬度并且換行
inline-flex與inline
圖中的列表被設(shè)置為 display：inline-flex ，使得在一些flex元素外創(chuàng)建一個(gè)內(nèi)聯(lián)框
最后設(shè)置兩個(gè)段落為 display: inline ， inline flex 容器和兩個(gè)段落在同一行上，而不是像塊級(jí)元素一樣換行
CSS組成一個(gè)盒模型需要以下幾個(gè)部分：
在標(biāo)準(zhǔn)模型中，如果你給盒設(shè)置 width 和 height，實(shí)際設(shè)置的是 content box。 padding 和 border 再加上設(shè)置的寬高一起決定整個(gè)盒子的大小
如果使用標(biāo)準(zhǔn)模型寬度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box
如果使用替代模型，一切都將變得簡(jiǎn)單很多，此時(shí)的 width 和 height 就是盒子可見(jiàn)的寬度與高度，無(wú)論怎么改變 padding 或 border 的值，都會(huì)通過(guò)壓縮 conten box 的大小來(lái)保持 width 和 height 的值不變
如需使用，只需要聲明以下CSS樣式：
外邊距是盒子周圍一圈看不到的空間。它會(huì)把其他元素從盒子旁邊推開(kāi)。 外邊距屬性值可以為正也可以為負(fù)。設(shè)置負(fù)值會(huì)導(dǎo)致和其他內(nèi)容重疊。無(wú)論使用標(biāo)準(zhǔn)模型還是替代模型，外邊距總是在計(jì)算可見(jiàn)部分后額外添加
CSS：
html：
結(jié)果如下：因?yàn)樯贤膺吘嘣O(shè)置為負(fù)值，所以兩個(gè)邊框會(huì)重疊
外邊距折疊
理解外邊距的一個(gè)關(guān)鍵是外邊距折疊的概念。如果你有兩個(gè)外邊距相接的元素，這些外邊距將合并為一個(gè)外邊距，即最大的單個(gè)外邊距的大小
結(jié)果如下，中間間隔的部分為50px
如下圖所示，對(duì)內(nèi)聯(lián)盒子設(shè)置 width 和 height 都不會(huì)生效，雖然margin，padding和border會(huì)生效，但不會(huì)改變與其它內(nèi)聯(lián)盒子的關(guān)系，因此其內(nèi)邊距和邊框會(huì)與段落的其它元素重疊
要避免上述情況，只需要將內(nèi)聯(lián)盒子的display值設(shè)置為inline-block即可
設(shè)置之后的效果為：
但因其保留有inline的特征，所以它不會(huì)跳轉(zhuǎn)到新行
float可以使得當(dāng)前元素脫離正常文本流，并吸附到父元素的左邊（left）或者右邊（right）正常布局中位于該浮動(dòng)元素之下的內(nèi)容，此時(shí)會(huì)圍繞著浮動(dòng)元素進(jìn)行排列
基本的常見(jiàn)用途在于圖片與文字環(huán)繞排版以及首字母下沉：
重點(diǎn)是這個(gè)，元素浮動(dòng)具有一定的規(guī)則與限制
設(shè)置如下三個(gè)盒子（均以塊級(jí)元素方式呈現(xiàn)）：
將box1設(shè)置為向右浮動(dòng)：
因?yàn)閎ox1脫離正常文檔流，所以box2和box3會(huì)向上填補(bǔ)box1的空位，box1浮動(dòng)到父元素（body）的最右邊
設(shè)置box1向左浮動(dòng)：
同理，box1脫離正常文檔流，box2與box3向上填補(bǔ)box1的空位，此時(shí)box1浮動(dòng)到父元素（body）的最左邊，所以會(huì)覆蓋掉box2（浮動(dòng)元素在正常流文檔的上方）
設(shè)置box2向左浮動(dòng)：
可以看到box3因?yàn)閎ox2脫離正常文檔流而向上填充其空位，box2因?yàn)楦?dòng)到左邊覆蓋了box3，然而box1仍處于正常文檔流中，并且在html文件中最先聲明，所以box2只能在box1的下方進(jìn)行浮動(dòng)（即使box2設(shè)置為向右浮動(dòng)也是一樣）
設(shè)置box1、box2與box3都向左浮動(dòng)：
可以看到三個(gè)盒子均向左浮動(dòng)，直到碰到前一個(gè)浮動(dòng)框的邊緣為止（對(duì)于box1來(lái)說(shuō)是碰到父元素的邊緣），因此呈現(xiàn)如此的排列狀況
如果當(dāng)父元素太窄，無(wú)法包含三個(gè)盒子的寬度，則無(wú)法容納的元素向下移動(dòng)，直到有足夠的空間使得其能向某個(gè)方向浮動(dòng)，如下圖所示：
如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”
相關(guān)參考：
浮動(dòng)的規(guī)則先討論到此
高度塌陷
在父元素container內(nèi)設(shè)置一個(gè)盒子box1，此時(shí)沒(méi)有設(shè)置浮動(dòng)，box1會(huì)撐起父元素container的高度
如果此時(shí)設(shè)置box1浮動(dòng)，因?yàn)槠涿撾x了正常文檔流，無(wú)法撐起盒子的高度，所以將發(fā)生高度塌陷：
為了解決這個(gè)問(wèn)題，在此提供三種方法：
1. 添加額外標(biāo)簽
首先在父元素內(nèi)添加空白內(nèi)容的額外標(biāo)簽clearfix
然后再CSS規(guī)則中添加以下內(nèi)容：
通過(guò)清除父元素內(nèi)空白元素的浮動(dòng)，使得父元素邊框重新包含浮動(dòng)內(nèi)容
2. 父級(jí)元素添加overflow屬性
直接在父元素內(nèi)添加overflow屬性：
同樣可以清除浮動(dòng)，結(jié)果如下：
3. after偽元素
html文檔改為：
在CSS規(guī)則里添加：
html
head
title無(wú)標(biāo)題文檔/title
style type="text/css"
.box{ width:500px; height:500px; border:1px solid #F00;}
/style
/head
body
div class="box"/div
/body
/html
這就是一個(gè)簡(jiǎn)單的div盒子，盒子就是所謂的一個(gè)個(gè)div，N個(gè)DIV組成的就是HTML網(wǎng)頁(yè)。具體的你需要看一些相關(guān)書籍學(xué)習(xí)一下。
重慶分公司
重慶分公司
