Web前端開(kāi)發(fā)第11章：盒子模型1本章主要內(nèi)容盒子盒子類(lèi)型盒子的屬性瀏覽器的盒子調(diào)試21.盒子盒子是一個(gè)概念，也可以說(shuō)是容器，可以在里面放置網(wǎng)頁(yè)中需要顯示的內(nèi)容，文檔中每一個(gè)元素都會(huì)產(chǎn)生一個(gè)盒子，盒子擁有很多屬性，如width、height、padding、border和margin等。元素盒子的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距可以呈現(xiàn)元素的背景。內(nèi)邊距的邊緣是邊框，邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的元素。31.1元素盒子4元素盒子的組成1.盒子盒子的內(nèi)邊距、邊框和外邊距的寬度都是可選的，其默認(rèn)值是零。許多元素將會(huì)由瀏覽器自身設(shè)置不同的外邊距和內(nèi)邊距，可以通過(guò)將元素的margin和padding設(shè)置為零來(lái)覆蓋這些瀏覽器樣式，以實(shí)現(xiàn)元素在不同瀏覽器中樣式的統(tǒng)一。51.1元素盒子1.盒子外邊距外邊距相當(dāng)于文檔中的頁(yè)邊距，是元素邊框邊緣與相鄰元素之間的距離，主要用來(lái)分割各種元素，設(shè)置元素之間的距離。如下圖中，淺灰色部分表示盒子的外邊距。61.1元素盒子1.盒子外邊距使用margin屬性來(lái)定義元素外邊距，屬性值單位可以為長(zhǎng)度單位（px、pt、em、ex、in等）或百分比，取值可以為正值或負(fù)值。同時(shí)外邊距還有專(zhuān)門(mén)設(shè)置某一方向上外邊距的屬性：margin-top、margin-right、margin-bottom、margin-left五種屬性。71.1元素盒子1.盒子margin屬性margin可以設(shè)置為auto。常見(jiàn)的做法是為外邊距設(shè)置固定的長(zhǎng)度值。還可以為margin設(shè)置一個(gè)百分比數(shù)值。百分比數(shù)是相對(duì)于父元素的width計(jì)算的。81.1元素盒子1.盒子值復(fù)制在Web前端開(kāi)發(fā)中，有時(shí)需要輸入一些重復(fù)的值。例如：這種情況下可以使用值復(fù)制，不必重復(fù)地鍵入相同的數(shù)字。上面的規(guī)則與下面的規(guī)則是等價(jià)的。91.1元素盒子1.盒子值復(fù)制的規(guī)則如下：如果缺少左外邊距的值，則使用右外邊距的值。如果缺少下外邊距的值，則使用上外邊距的值。如果缺少右外邊距的值，則使用上外邊距的值。101.1元素盒子1.盒子值復(fù)制的規(guī)則如下：如果為外邊距指定了3個(gè)值，則第4個(gè)值（即左外邊距）會(huì)從第2個(gè)值（右外邊距）復(fù)制得到。如果給定了2個(gè)值，第4個(gè)值會(huì)從第2個(gè)值復(fù)制得到，第3個(gè)值（下外邊距）會(huì)從第1個(gè)值（上外邊距）復(fù)制得到。如果只給定一個(gè)值，那么其他3個(gè)外邊距都由這個(gè)值（上外邊距）復(fù)制得到。111.1元素盒子1.盒子值復(fù)制的規(guī)則如下：利用這個(gè)簡(jiǎn)單的機(jī)制，只需指定必要的值，而不必全部都應(yīng)用4個(gè)值。例如：121.1元素盒子1.盒子單邊外邊距屬性使用單邊外邊距屬性可以為元素單邊上的外邊距設(shè)置值。例如把p元素的左外邊距設(shè)置為20px。131.1元素盒子1.盒子外邊距合并外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。141.1元素盒子1.盒子外邊距合并當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。151.1元素盒子1.盒子外邊距合并當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)），它們的上和/或下外邊距也會(huì)發(fā)生合并。161.1元素盒子1.盒子外邊距合并一個(gè)空元素，它有外邊距，但是沒(méi)有邊框或填充，這種情況下，上外邊距與下外邊距就碰到了一起，就會(huì)發(fā)生合并。171.1元素盒子1.盒子外邊距合并如果空元素外邊距遇到另一個(gè)元素的外邊距，也會(huì)發(fā)生合并。181.1元素盒子1.盒子外邊距合并初看上去可能有點(diǎn)奇怪，但實(shí)際上，它是有意義的。如下圖所示，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。191.1元素盒子注：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。20現(xiàn)場(chǎng)演示：案例11-01：外邊距示例1.盒子邊框：border邊框在網(wǎng)頁(yè)布局中就是用來(lái)分割模塊的。如下圖中，黑色表示盒子的邊框。211.1元素盒子1.盒子邊框可以指定樣式、顏色或?qū)挾?。寬度屬性值可以指定長(zhǎng)度值，比如2px或0.1em；或者使用3個(gè)關(guān)鍵字thin、medium（默認(rèn)值）和thick之一。邊框顏色可以省略，瀏覽器就會(huì)根據(jù)默認(rèn)值來(lái)解析。當(dāng)元素各邊框定義不同顏色時(shí)，邊角會(huì)平分來(lái)劃分顏色的分布。221.1元素盒子1.盒子border常用屬性邊框有border、border-style、border-width、border-color、border-top、border-right、border-bottom、border-left八種常用屬性。231.1元素盒子24現(xiàn)場(chǎng)演示：案例11-02：邊框1.盒子內(nèi)邊距：padding內(nèi)邊距就是元素包含的內(nèi)容與元素邊框內(nèi)邊沿之間的距離。如下圖中，深灰色表示盒子的內(nèi)邊距。251.1元素盒子1.盒子內(nèi)邊距：padding定義內(nèi)邊距使用padding屬性，屬性值單位可以為長(zhǎng)度單位（px、pt、em、ex等）或百分比，取值可以為正值，但不允許使用負(fù)數(shù)值。內(nèi)邊距有padding、padding-top、padding-right、padding-bottom、padding-left五種屬性。261.1元素盒子1.盒子內(nèi)邊距：padding271.1元素盒子1.盒子padding屬性設(shè)置h1元素的各邊都有10像素的內(nèi)邊距。按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值，例如：281.1元素盒子1.盒子單邊內(nèi)邊距屬性通過(guò)使用單邊內(nèi)邊距屬性，可以分別設(shè)置上、右、下、左內(nèi)邊距。例如：291.1元素盒子1.盒子內(nèi)邊距的百分比數(shù)值下面這條規(guī)則把段落的內(nèi)邊距設(shè)置為父元素width的10%。如果一個(gè)段落的父元素是div元素，那么它的內(nèi)邊距要根據(jù)div的width計(jì)算。例如：301.1元素盒子1.盒子內(nèi)邊距與外邊距在用法上有很大的相似性。但是在使用時(shí)應(yīng)該了解內(nèi)邊距的幾個(gè)不同的特性：當(dāng)元素沒(méi)有定義邊框時(shí)，可以把內(nèi)邊距當(dāng)作外邊距來(lái)使用，用來(lái)調(diào)節(jié)元素與其它元素之間的距離。由于外邊距相鄰時(shí)會(huì)出現(xiàn)重疊現(xiàn)象，而且比較復(fù)雜，使用內(nèi)邊距來(lái)調(diào)節(jié)元素之間的距離往往不用考慮邊距重疊的問(wèn)題。當(dāng)為元素定義背景時(shí)，對(duì)于外邊距區(qū)域來(lái)說(shuō)，背景圖像是不顯示的，它永遠(yuǎn)表現(xiàn)為透明狀態(tài)；而內(nèi)邊距區(qū)域卻可以顯示背景。行內(nèi)元素的內(nèi)邊距能夠影響元素邊框的大小，而外邊距不存在這樣的問(wèn)題。311.1元素盒子32現(xiàn)場(chǎng)演示：案例11-03：內(nèi)邊距1.盒子寬和高：width/height這里要講的寬和高，指的是元素內(nèi)容區(qū)域的寬和高，不是盒子的實(shí)際寬度和高度。如下圖中，白色部分表示元素的寬和高。元素的寬度指width的屬性值，高度指height的屬性值。屬性值單位可以為長(zhǎng)度單位（px、pt、em、ex、in等）或百分比，取值為正值。331.1元素盒子1.盒子W3C標(biāo)準(zhǔn)盒子模型目前瀏覽器大部分元素都是基于此模型，在內(nèi)容區(qū)外面，依次圍繞著padding區(qū)，border區(qū)，margin區(qū)。盒子的寬度和高度計(jì)算公式如下：盒子的寬度=margin-left+border-left+padding-left+width+pdding-right+border-right+margin-right。盒子的高度=margin-top+border-top+padding-top+height+pdding-bottom+border-bottom+margin-bottom。341.2尺寸35盒子的尺寸1.盒子IE傳統(tǒng)盒子模型這種盒子模型主要存在于IE6以下版本瀏覽器（不包括IE6或QuirksMode下IE5.5+）。雖然市面上用IE6以下的瀏覽器應(yīng)該相當(dāng)少，但是由于form中部分元素還基于傳統(tǒng)的盒子模型此種模型依然被CSS3保留使用。盒子的寬度和高度計(jì)算公式如下：盒子的寬度=margin-left+width+margin-right。盒子的高度=margin-top+height+margin-bottom。361.2尺寸2.盒子類(lèi)型CSS提供了display屬性來(lái)控制盒子的類(lèi)型，盒子的基本類(lèi)型如表所示。372.1盒子的基本類(lèi)型382.盒子類(lèi)型nonedisplay屬性可指定為none值，用于設(shè)置目標(biāo)對(duì)象隱藏，一旦該對(duì)象隱藏，其占用的頁(yè)面空間也會(huì)釋放。與此類(lèi)似的還有visibility屬性，該屬性也可用于設(shè)置目標(biāo)對(duì)象是否顯示。與display屬性不同，當(dāng)通過(guò)visibility隱藏某個(gè)HTML元素后，該元素占用的頁(yè)面空間依然會(huì)被保留。visibility屬性的兩個(gè)常用值為visible和hidden，分別用于控制目標(biāo)對(duì)象的顯示和隱藏。392.1盒子的基本類(lèi)型40現(xiàn)場(chǎng)演示：案例11-04：display屬性值none2.盒子類(lèi)型blockblock類(lèi)型的盒子會(huì)占據(jù)一行，允許通過(guò)CSS設(shè)置高度和寬度。一些元素默認(rèn)就是block類(lèi)型，比如div、p等。inlineinline類(lèi)型的盒子不會(huì)占據(jù)一行（默認(rèn)允許在一行放置多個(gè)元素），即使用CSS設(shè)置寬度和高度也不會(huì)起作用。一些元素默認(rèn)就是inline類(lèi)型，比如span、a。412.1盒子的基本類(lèi)型42現(xiàn)場(chǎng)演示：案例11-05：display屬性值block與inline2.盒子類(lèi)型inline-block通過(guò)為display屬性設(shè)置inline-block，即可實(shí)現(xiàn)這種盒子類(lèi)型，它是inline和block的綜合體，inline-block類(lèi)型既不會(huì)占據(jù)一行，也支持width和height指定寬度和高度。432.1盒子的基本類(lèi)型44現(xiàn)場(chǎng)演示：案例11-06：display屬性值inline-block2.盒子類(lèi)型list-itemlist-item可以將目標(biāo)元素轉(zhuǎn)換為類(lèi)似ul的列表元素，也可以同時(shí)在元素前添加列表標(biāo)志。452.1盒子的基本類(lèi)型46現(xiàn)場(chǎng)演示：案例11-07：display屬性值list-item2.盒子類(lèi)型inline-table在默認(rèn)情況下，table元素屬于block類(lèi)型，也就是說(shuō)，該元素默認(rèn)占據(jù)一行，它的左邊不允許出現(xiàn)其他內(nèi)容，它的右邊也不允許出現(xiàn)其他內(nèi)容。CSS為table元素提供了一個(gè)inline-table類(lèi)型，它允許設(shè)置表格的width、height值，而且允許它的左邊、右邊出現(xiàn)其他內(nèi)容。472.1盒子的基本類(lèi)型48現(xiàn)場(chǎng)演示：案例11-08：display屬性值inline-table2.盒子類(lèi)型表格相關(guān)的盒子類(lèi)型除inline-table類(lèi)型外，CSS3還提供了如下屬性值：table：此元素會(huì)作為塊級(jí)表格來(lái)顯示，表格前后帶有換行符。table-row-group：此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示。table-header-group：此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示。table-footer-group：此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示。table-row：此元素會(huì)作為一個(gè)表格行顯示。table-column-group：此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示。table-column：此元素會(huì)作為一個(gè)單元格列顯示。table-cell：此元素會(huì)作為一個(gè)表格單元格顯示。table-caption：此元素會(huì)作為一個(gè)表格標(biāo)題顯示。492.1盒子的基本類(lèi)型50現(xiàn)場(chǎng)演示：案例11-09：表格相關(guān)的盒子類(lèi)型2.盒子類(lèi)型run-inrun-in類(lèi)型有點(diǎn)相似于inline類(lèi)型，run-in類(lèi)型的元素希望顯示在他后面的元素內(nèi)部；如果run-in類(lèi)型的元素后面緊跟一個(gè)block類(lèi)型的元素，那么run-in類(lèi)型的元素將被放入后面的元素中顯示。512.1盒子的基本類(lèi)型52現(xiàn)場(chǎng)演示：案例11-10：display屬性值run-in2.盒子類(lèi)型CSS3對(duì)display的屬性值進(jìn)行了補(bǔ)充，CSS3新增的類(lèi)型如表所示。532.2CSS3新增的類(lèi)型2.盒子類(lèi)型rubyruby相關(guān)的盒子類(lèi)型是CSS3新增的盒子類(lèi)型，常用在文本注釋或標(biāo)注文本的發(fā)音，Chrome中暫不支持該類(lèi)型，可在Firefox、IE8及以上版本瀏覽器中測(cè)試ruby相關(guān)的盒子類(lèi)型。542.2CSS3新增的類(lèi)型55現(xiàn)場(chǎng)演示：案例11-11：ruby相關(guān)的盒子類(lèi)型2.盒子類(lèi)型boxbox類(lèi)型還沒(méi)有得到Firefox、Opera、Chrome瀏覽器的完全支持，但可以使用它們的私有屬性定義firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。box類(lèi)型盒子的屬性說(shuō)明如表所示。562.2CSS3新增的類(lèi)型2.盒子類(lèi)型box-align有start、end、center、baseline、stretch五種屬性值。572.2CSS3新增的類(lèi)型2.盒子類(lèi)型box-pack有start、end、center、justify四種屬性值。582.2CSS3新增的類(lèi)型59現(xiàn)場(chǎng)演示：案例11-12：屬性box-align和box-pack2.盒子類(lèi)型box-direction有normal、reverse、inherit三種屬性值。602.2CSS3新增的類(lèi)型61現(xiàn)場(chǎng)演示：案例11-13：屬性box-direction2.盒子類(lèi)型box-flex屬性規(guī)定框的子元素是否可伸縮其尺寸。622.2CSS3新增的類(lèi)型63現(xiàn)場(chǎng)演示：案例11-14：屬性box-fiex2.盒子類(lèi)型box-ordinal-group屬性規(guī)定框中子元素的顯示次序，值更低的元素會(huì)顯示在值更高的元素前面顯示，其取值只能為整數(shù)。642.2CSS3新增的類(lèi)型65現(xiàn)場(chǎng)演示：案例11-15：屬性box-ordinal-group2.盒子類(lèi)型各瀏覽器對(duì)盒子的支持情況如表所示。662.3瀏覽器對(duì)盒子的支持情況673.盒子的屬性如在樣式中指定了盒子的寬度和高度，就可能出現(xiàn)內(nèi)容在盒子中容納不下的情況，可以使用overflow屬性來(lái)指定如何顯示盒子中容納不下的內(nèi)容。同時(shí)，與overflow屬性相關(guān)的還有overflow-x、overflow-y及text-overflow屬性。683.1內(nèi)容溢出3.盒子的屬性overflow使用overflow屬性來(lái)指定對(duì)于盒子中容納不下的內(nèi)容的顯示方法。overflow有visible、hidden、scroll、auto、inherit五種屬性值。693.1內(nèi)容溢出70現(xiàn)場(chǎng)演示：案例11-16：屬性overflow3.盒子的屬性overflow-x和overflow-y使用overflow-x屬性或overflow-y屬性，可以單獨(dú)指定在水平方向上或垂直方向上內(nèi)容超出盒子的容納范圍時(shí)的顯示方法，使用方法與overflow屬性的使用方法相似。713.1內(nèi)容溢出3.盒子的屬性overflow-x和overflow-yoverflow-x和overflow-y有visible、hidden、scroll、auto、no-display、no-content六種屬性值，如表所示。723.1內(nèi)容溢出73現(xiàn)場(chǎng)演示：案例11-17：屬性overflow-x和屬性overflow-y3.盒子的屬性text-overflow當(dāng)通過(guò)把overflow屬性的屬性值設(shè)為“hidden”的方法，將盒子中容納不下的內(nèi)容隱藏起來(lái)時(shí)，如果使用text-overflow屬性，可以在盒子的末尾顯示一個(gè)代表省略的符號(hào)“…”。但是，text-overflow屬性只在當(dāng)盒子中內(nèi)容水平方向上超出盒子的容納范圍時(shí)有效。text-overflow有clip、ellipsis、string三種屬性值，如表所示。743.1內(nèi)容溢出75現(xiàn)場(chǎng)演示：案例11-18：屬性text-overflow3.盒子的屬性為了增強(qiáng)用戶(hù)體驗(yàn)，CSS增加了一個(gè)非常實(shí)用的屬性resize，它允許用戶(hù)通過(guò)拖動(dòng)的方式來(lái)修改元素的尺寸，改變?cè)氐拇笮?。resize有none、both、horizontal、vertical、inherit五種屬性值，如表所示。763.2自由縮放77現(xiàn)場(chǎng)演示：案例11-19：屬性resize3.盒子的屬性外輪廓outline在頁(yè)面中呈現(xiàn)的效果和邊框border呈現(xiàn)的效果極其相似，但和元素邊框border完全不同，外輪廓線(xiàn)不占用網(wǎng)頁(yè)布局空間，不一定是矩形，外輪廓屬于一種動(dòng)態(tài)樣式，只有元素獲取到焦點(diǎn)或者被激活時(shí)呈現(xiàn)。外輪廓有outline-color、outline-style、outline-width、outline-offset、inherit五種屬性，如表所示。783.3外輪廓3.盒子的屬性outline-color定義外輪廓線(xiàn)的顏色，默認(rèn)值為黑色。屬性值為CSS中定義的顏色值?？梢詾轭伾禐轭伾Q(chēng)（比如red、blue）、十六進(jìn)制值（比如#ff0000、#cccccc）、rgb代碼（比如rgb(255,0,0)、rgb（167、167、167）。793.3外輪廓3.盒子的屬性outline-style定義外輪廓線(xiàn)的樣式，在實(shí)際應(yīng)用中，