走势图:深入理解CSS盒子模型

來源:互聯網
更新時間:2018/2/9 3:02:18
責任編輯:魯能
字體:

福建体彩走势图 www.uyduz.icu

站長交易(//jy.Xue163.com)友情鏈接交換 虛擬主機評測+IDC導航=net188.cn

前言:前陣子在做一個項目時,在頁面布局方面遇到了一點小問題,于是上stackoverflow上求助。ifaou在幫助我解決我問題的同時,還推薦我閱讀一篇有關CSS盒子模型的文章《The CSS Box Model》,閱讀之后受益匪淺,才知道自己對盒子模型知識還是如此欠缺。恰逢學期末,項目驗收后暫時告一段落,有空閑的時間。于是想把這篇文章翻譯出來,一方面再給自己一點挑戰和鍛煉,另一方面也給大家參考,讓更多的人受益。

這篇文章適合初級web設計朋友,讓你對盒子模型有更近一步的理解。但是在閱讀這篇文章之前你應該對盒子模型html等基礎知識是有一定的了解,否則只會讓你更加云里霧里。這篇文章不會像很多的中文教程那樣,把盒子模型內邊距,外邊距,如何定位等概念有條不紊的介紹一遍。這篇文章更多的是教你在實戰過程中如何自如的控制盒子的寬度,如何用最恰當的方法定位盒子,如何解決IE中盒子的種種bug。

之所以翻譯這篇外國文章,是因為我在學習的過程中也發現,國外的教程和過內的相比,它們授人以漁,更授人以魚 。不同于國內教程有章有節有點有條目,他們的敘述方式更接近談話式的由淺入深……總而言之,目的在于給更多的初學者提供一點啟示和幫助,不必像我一樣走了許多彎路。

這是我第一次翻譯,有欠缺的地方請大家指正。我盡量把它翻譯的通俗易懂,同時也加入了一些自己的語言自己的體會,和幫助理解的圖示(為了閱讀流暢,也就不另表示了)。附上原文地址://reference.sitepoint.com/css/boxmodel

深入理解CSS盒子模型(The CSS Box Model)

如果你了解盒子模型(box model)的概念,了解它是如何決定某一個元素的最終尺寸的話,會有助你理解一個元素如何在網頁上定位的。盒子模型主要適用于塊級元素。順便提一個與此相關的概念:行內布局模型(inline layout model)——定義了行內元素是如何定位的,在行內元素格式(InlineFormatting)中有具體說明

盒子的尺寸的計算(Calculating BoxDimensions)

在CSS2.1中,塊級元素只能是矩形形狀的。當我們需要計算一個塊級元素的整體尺寸時,需要同時把內容區域(content area)[注釋1]的長寬,連同此元素的外邊距,內邊距,以及邊框都計算在內

[注釋1]:此文章中頻繁提到content 和content area這兩個概念,雖然從字面上都可以理解為盒子中的內容區域(content),但從后文的敘述來看,這兩個概念還是有區別的,到這篇文章發布為止,我還是對這兩者的區別有迷惑,希望有興趣閱讀原文的朋友能留言告訴我這兩者的區別,以便于我更正文中的錯誤。

我們可以通過聲明寬和高來定義一個元素的內容(content)的寬度和高度。如果沒有做任何的聲明,寬度和高度的默認值將是自動(auto)

w3schools上對于盒子模型的圖示如下

在圖的下方有一段很重要的話Important: When you specifythe width and height properties of an element with CSS, you are just settingthe width and height of the content area.也就是說當我們在css中設計一個塊級元素的width和height屬性時比如.box{width :100px; height:100px}時,其中的width 和height僅僅是對content部分設置的,即定義上圖中padding下虛線方框內區域的長和寬。而不是內容,內邊距,邊框的總和(但在IE的早期版本包括IE6中,盒子模型的width和height卻恰恰是這樣定義的,盡管符合人們思考的邏輯,但是不符合規范,這會造成嚴重的問題)

對寬度為自動狀態的靜態(static)定位元素(即無定位),和相對定位(relatively positioned)元素來說,計算寬度的方法是,將他們包含塊(containing block)[注釋2]的寬度減去此元素的橫向的所有外邊距,內邊距,邊框,滾動條。也就是說,從包含塊的寬度中除去元素的橫向外邊距,內邊距,邊框,滾動條(如果存在的話)的寬度,所剩的值就是了。

[注釋2]:包含塊(containing block)。如果你知道絕對定位和相對定位的實現原理的話,這個注釋可以忽略。包含塊可以理解為一個矩形,而這個矩形的作用是為它里面包含的元素提供一個參考,內部元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。例如在絕對定位中,距離它最近的已定位(position為fixed,relative或absolute)的祖先元素即為包含塊。這算比較初級的概念,不深究,請百度。

包含塊的定位屬性和尺寸被作為后代元素定位和尺寸計算的參考。盡管元素的定位必須遵從與他們的塊級元素來進行定位,但是他們也非受限于它。后代的元素也可以溢出包含塊。在大多數情況下, generated boxes[注釋3]通常扮演著子代元素包含塊的角色。想要充分了解包含塊的大量細節信息請點擊ContainingBlock

[注釋3] :不知道generated boxes應該如何翻譯,有知道的朋友請告知,謝謝

對于浮動(floated)和絕對定位(absolutelypositioned)元素(包括固定定位(fixed)元素)來說, 自動狀態的寬度會使generated box收縮到緊貼它內容大小。

我覺得我在這里有必要總結一下前兩段話的意思,前兩段話都是在說在寬度缺省的情況下(auto),盒子模型自動設置寬度的兩種方式。

我們知道,當我們放置一個塊級元素于頁面上時,并且不設置它的定位屬性(relative,absolute,fixed),即position:static,或者設置了position:relative的情況下,塊的寬度是延伸自動填充滿它的父元素的寬度區域

舉個例子:

以下為引用的內容:

.box1

{

background:black;

color:White;

height:100px;

padding:10px;

border:20px solid Red;

margin:30px;

}

注意.box1沒有設置任何的position屬性,也沒有寬度屬性。這是為了實驗相對定位或者無定位的情況

Html代碼:

以下為引用的內容:

<h2>Static or Relative Box</h2>

<div class="box1">For floated or absolutely positioned </div>

結果為:

 

即塊的寬度是延伸自動填充滿它的父元素的寬度區域。

所以當我們在計算一個被包裹中的元素的寬度時,我們只需要用父元素減去這個元素的外邊距,邊框,內邊距,和scrollbar,剩下就是它的寬度,因為它會自動填充。雖然這個基本上沒有實際應用可言……

但是浮動floated元素和絕對定位元素,他們的結果卻恰恰相反,他們會收縮以致包裹緊貼內容,同樣舉個例子

以下為引用的內容:

.box2

{

background:black;

color:White;

height:100px;

padding:10px;

border:20px solid Red;

margin:30px;

position:absolute;

}

$網神分頁符$

站長交易(//jy.Xue163.com)友情鏈接交換 虛擬主機評測+IDC導航=net188.cn

這里同樣沒有設置寬度,但是進行了絕對定位,html代碼:

以下為引用的內容:

<h2>Absolute or Float</h2>   

<div class="box2">For floated or absolutely positioned </div>

結果:

 

浮動元素和寬度

之前,在CSS2中,沒有聲明寬度的浮動元素,不會收縮并于緊貼(shrink to wrap)住他們的內容,恰恰相反的是,他們會不斷的延伸至與他們父元素最大寬度相當。這種行為在CSS2.1中被收縮緊貼代替了。但是無論如何,在IE6和更早的瀏覽器版本中,一個沒有聲明寬度的浮動元素還是會收縮緊貼住它的內容作為一種默認的設置,除非子元素有自己的布局(has a layout)[注釋3],比如說在這種情況下,父元素會伸展來適應父元素中的可用內容的寬度

[注釋3]:”IE的表現與其它瀏覽器不同的原因之一是,顯示引擎使用了一個稱為布局的內部概念……windows上的IE使用布局概念來控制元素的尺寸和定位。那些“擁有布局”的元素負責本身及其子元素的尺寸設置和定位。如果一個元素“沒有擁有布局”,那么它的尺寸和位置由最近的擁有布局的祖先元素控制……布局是許多IE顯示bug的根源”——摘自Andy Budd、Simon Collision、Cameron Moll的《CSS Mastery Advanced WebStandards Solutions(Second Edition)》(精通CSS 高級Web標準解決方案 第二版)

正如以上所說,對于沒有聲明寬度的浮動元素,在IE6和之前的版本都是采取收縮緊貼內容的行為,所以這種說法無從考證了,我也在IETest下測試過,的確如此

同樣應該被注意的是,當一個浮動元素(沒有聲明寬度)包含一個向右浮動的子元素時,它同樣也會自動的延伸填充,以適應父元素的可用內容的寬度。這種情況在之前的IE瀏覽器,包括IE7中都是存在的(之前的Firefox,包括2.0版本中也存在這個bug,但是這個問題在Firefox3.0 Alpha 6版本中已經得到了解決)。

我也為以上這段話寫了個例子給大家:

以下為引用的內容:

<div class="parent">      

<div class="containing-block">  

         

<div class="box">For floated or absolutely positioned </div>  

      

</div>            

</div>

對照一面那段話:首先是一個浮動元素containing-block,包含一個向右浮動的子元素box,父元素為parent……

以下為引用的內容:

.box

{

background:black;

color:White;

height:100px;

padding:10px;

border:20px solid Red;

margin:30px;

float:right;

}

.containing-block

{

background:blue;

height:250px;

float:right;

}

.parent

{

background:gray;

height:300px;

width:500px;

}

在Firefox中運行結果為:

  

但是在IETester中用IE5.5運行的效果是:

所以,為了避免上面提及的bug,如果可能的話,盡量為一個浮動元素指定一個具體的寬度值,總是會比較安全一點的。無論如何,只要你總是有留意到以上提及的問題,你或許會發現無寬度的浮動在一些場合下還是非常管用的,比如橫向流式(fluid-width)布局菜單

無論內容區域如何定位,如果高度,最小高度(min-height),最大高度(max-height等沒有被聲明的話,內容區域高度與內容的高度是相等的[注釋4]。

[注釋4]:這里就是讓我對content area和content產生疑惑的地方,不知道有沒有朋友能幫我看看,幫我解釋一下

所以,當你為了弄清把一個元素放在頁面上究竟需要多大尺寸時,把已經聲明內邊距,邊框,外邊距值統統與內容區域加上。當然,如果一個元素沒有內邊距,邊框,外邊距的話,也就是它的尺寸僅僅是由它的內容來決定

如果一個元素僅僅包含浮動或者絕對定位的元素,它沒有一丁點的內容,那么它的高度將為0。我們將在Floating and Clearing做更多討論

實現盒子模型

說明盒子模型的最好方式是用一個簡短的例子。我們用計算來看看在頁面上放置一個元素總到底需要多大的尺寸(這里先忽略外邊距的疊加效果——以下會有更詳細有關這個的說明):

Total width = left margin + left border + left padding + width +

right padding + right border + right margin

Total height = top margin + top border + top padding + height +

bottom padding + bottom border + bottom margin

$網神分頁符$

站長交易(//jy.Xue163.com)友情鏈接交換 虛擬主機評測+IDC導航=net188.cn

這里是我們的CSS樣例——為了一個類名為’box’的元素聲明盒子的各個屬性:

以下為引用的內容:

.box {

width: 300px;

height: 200px;

padding: 10px;

border: 1px solid #000;

margin: 15px;

}

以上的元素總共被計算出來的的尺寸是:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px

Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

以上的計算在圖1中給出了具體描述,這是從Firebug元素布局展示中截下的圖,

在圖1中,我們可以很清晰的看到內容區域處于中央,圍繞著內容區域的內邊距區域,邊框區域,外邊距區域。內容區域的外邊緣稱為內容邊緣(content edge),或者是內邊緣(inner edge);內邊距區域的外邊緣被稱為外邊距邊緣(padding edge);邊框區域的外邊緣被稱為邊框邊緣(border edge);外邊距區域的外邊緣被稱為——你應該可以猜到了——外邊距邊緣(margin edge)或外邊緣(outer edge)

你可以從這個簡短的例子中看到,為了使這個元素適應這個頁面,我們需要一個至少352px 寬度和252px高度的區域。如果可用的區域小于這個,這個元素會錯位,或者溢出它的包含塊。注意到IE6或者更早的瀏覽器版本中,在這種情況下會伸展包含塊的以容納內容區域的多余高度,這很明顯會擾亂網頁的布局。但其它版本的瀏覽器會使元素溢出它的邊界,同時忽略內容。

這個Bug翻譯過來是:“如果元素的內容比元素本身大,那么我們希望內容溢出到元素外。但是,在IE6和更低版本中,擁有布局的元素會錯誤的拓展以便適應內容的尺寸……這種錯誤意味著Window上的IE中的width實際上更像是min-width”——Andy Budd、Simon Collision、Cameron Moll的《CSS Mastery Advanced Web Standards Solutions(Second Edition)》(精通CSS 高級Web標準解決方案第二版),給大家演示一下,很簡單的:

以下為引用的內容:

<div class="IEbug">  

 

<p>Your understanding of the box model concept, and how it relates to the way in which an element,  final dimensions are determined, </p>

</div>

.IEbug

{

background:yellow;

width:100px;

height:100px;

}

火狐下測試結果:

IE6下測試結果:

留意外邊距疊加效應

盡管在上面的計算元素所需區域大小的例子中外邊距已經在計算中包括在內了,但是需要注意的是縱向的無定位(static)元素的相鄰外邊距會疊加合成為其中一個較大寬度的外外邊距的值,并非兩者之和。這就意味當計算實際上需要存放一個元素的區域大小時,并不是從外邊距的邊緣開始算起,只有最寬的外邊距會生效,并且較窄的外邊距會與較大的疊加在一起,請閱讀CollapsingMargins來了解更多有關這相當復雜的一個主題。

實際盒子模型應用

非常值得注意的一點是,當一個元素的寬度被設置為100%時(也就是說父元素的內容寬度是100%),它不應該有任何的外邊距,內邊距,或者是邊框,這只會使它放置的區域需要更大的面積。這通?;岜簧杓剖γ撬雎院雎圓⑶液苧現氐娜怕伊艘趁嫻牟季?,這樣的話內容要么溢出要么使元素比他們應該的樣式更寬

以下為引用的內容:

<div class="contain">

 

<div class="box"></div>    

  

</div>

$網神分頁符$

站長交易(//jy.Xue163.com)友情鏈接交換 虛擬主機評測+IDC導航=net188.cn

沒有margin和padding,僅有width情況下的CSS:

以下為引用的內容:

.box

{

background:black;

width:100%;

height:100px;

}

.contain

{

background:yellow;

height:120px;

width:200px;

}

效果如圖所示:

可見在沒有margin和padding的情況下,100%的內容能恰到好處的填充父元素

一旦加入了margin和padding(margin:10px;padding:10px;)之后效果如圖:

在firebug中的布局圖:

而加入了margin和padding之后,元素出現了錯位,并且只能顯示左側的margin

解決辦法是,在大多數情況下,避免給寬屬性添加具體的值(絕不是自動),并且只應用外邊距,內邊距,邊框。無定位元素的寬度將會默認為自動。甚至就算定義了內邊距,邊框,外邊距,它仍然會認為可用的內容寬度為全滿狀態。

當然,這種方法對某些例子可能失效,比如當元素不是無定位元素時,并且它的確需要一個指定的寬度(就像那個浮動元素不會自動填充它父元素的例子一樣)。在這些情況下,你有兩個選擇。

如果可用區域是固定寬度的,你能簡單的把每一個屬性元素(margin,padding等)的寬度都相加起來以匹配可用的那個固定寬度。舉個例子,如果可用的區域寬度是500px,并且你需要一個元素有20px的內邊距,簡單的把這個元素的寬度設置為460px,內邊距為20px(20+460+20=500)。這個辦法中先決條件是寬度值和元素盒子屬性使用的都是同一測量單位,因為你不希望把混合單位相加起來(200px + 10%,只是舉個例子而已,在內容中這樣的寫法是沒有意義的)。

當可用內容區域的寬度是未知的時候——比如在流式布局(fluid layout)中——這個方法是行不通的,因為百分比(percentages)和像素(pixels)不能一起相加。在這種情況下,解決方法應該是為需要的元素聲明一個100%的寬度值,并且把內邊距,邊框,外邊距的值都設置到一個嵌套其中的元素中去。這個嵌套元素沒有任何的寬度值聲明,并且可以在沒有干擾父元素的情況下展示需要的內邊距,邊框,外邊距。[注釋5]

[注釋5]呃,其實這段話我也沒有理解……

現在你應該能清晰的理解CSS盒子模型了

后記:由于本人水平有限,可能很多地方翻譯的并不是很通俗。只希望能起一個拋磚引玉的作用,有更多的朋友來完善它,指出我翻譯和理解不正確的地方。如果時間允許的話,我繼續翻譯與此相關的一些列文章(即本文中的鏈接)。

最后向大家推薦Andy Budd、Simon Collision、Cameron Moll寫的《CSS Mastery Advanced Web Standards Solutions(Second Edition)》(精通CSS 高級Web標準解決方案第二版),翻譯這篇文章時參考了其中不少內容,這也是一本適合CSS進階類圖書,不適合初學者。希望有興趣的朋友可以參考一下。(來源:Color&Cool

根據您訪問的內容,您可能還對以下內容感興趣,希望對您有幫助:

怎樣深入理解CSS+DIV網頁設計中的盒子模型

答:使用的多了,就熟悉了,別人說的再多,不如自己親身理解的透徹

如何計算CSS盒子模型的高度

答:盒子的高度 = content的高度 + padding-top(內上邊距)+ padding-bottom(內下邊距) + border-top(上邊框邊框) + border-bottom(下邊框) 深入理解CSS盒子模型(The CSS Box Model) 如果了解了盒子模型(box model)的概念,了解它是如何決定某一...

css盒子模型有幾種 csdn

答:IE盒子模型 box-sizing:border-box; W3C標準盒子模型 box-sizing:content-box; (這個是默認值) 特點是寬高一個包含了內外邊距,一個沒有包含內外邊距;自己測試吧

CSS盒子模型有什么用處,怎么用

答:css中的盒子模型是為了讓你你充分理解div+css模型的定位功能,就是利用盒子模型這樣的布局方式代替了傳統的表格布局方式。所以盒子模型是在學習div+css布局方式中必須要學習的一個模型,通過這個模型你就可以明白網頁中div和div之間的相對位置是...

CSS盒子模型的特點

答:每個盒子都有:邊界、邊框、填充、內容四個屬性;每個屬性都包括四個部分:上、右、下、左;這四部分可同時設置,也可分別設置;填充可以理解為盒子里的抗震輔料厚度,而邊框有大小和顏色之分,我們又可以理解為生活中所見盒子的厚度以及這個盒...

在css中一個獨立的盒子模型有哪幾部分組成

答:從外到內 分為 margin border padding content 從內到外,將上面的反過來就是了

說一說CSS盒子模型,盒子模型里面有哪些坑嗎

答:盒子的設計都是有TA的道理存在,然后后來慢慢的各種box-sizing的出現,盒子的計算方式也就不一了,雖然之前有低版本IE中的一個怪異模式的盒子計算方式(類似box-sizing: border-box;)…… 至于那個什么margin合并,這個跟盒模型我不知道有沒有關...

CSS盒子模型的介紹

答:在網頁中,一個元素占有空間的大小由幾個部分構成,其中包括元素的內容(content),元素的內邊距(padding),元素的邊框(border),元素的外邊距(margin)四個部分。這四個部分占有的空間中,有的部分可以顯示相應的內容,而有的部分只用來分隔相鄰...

如何通過css改變盒子模型布局

答:box-sizing:border-box; box-sizing:content-box;

網頁設計與制作中三個盒子模型的css樣式怎么弄

答:CSS盒子模型:W3C組織建議把所有的網頁上的對象都放在一個盒子中(在定義盒子寬高的時候,要考慮到內填充,邊框,邊界的存在) 一個盒子的構成: 盒子中的內容:content 盒子的邊框:border 盒子邊框與內容之間的距離:稱為填充---padding內邊距...

深入理解CSS盒子模型

和幫助理解的圖示(為了閱讀流暢,也就不另表示了)。附上原文地址://reference.sitepoint.com/css/boxmodel 深入理解CSS盒子模型(The CSS Box Model) 如果你了解盒子模...

如何理解css中盒子模型?代碼在下!

其實很簡單,說白了就是利用一個特性就是一個塊級對象寬高都是0的時候,他的邊框是成45°角的 就是底部邊框和左部是45°那么這樣就可以做成一個三角形的效果了 具體...

什么是css的盒子模型

css中的盒子模型是為了讓你你充分理解div+css模型的定位功能,就是利用盒子模型這樣的布局方式代替了傳統的表格布局方式。所以盒子模型是在學習div+css布局方式中必須...

如何計算CSS盒子模型的高度

盒子的高度 = content的高度 + padding-top(內上邊距)+ padding-bottom(內下邊距) + border-top(上邊框邊框) + border-bottom(下邊框) 深入理解CSS盒子模型(The CSS B...

什么是css盒子模式(框模型)

CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。 網頁設... 里的抗震輔料厚度,而邊框有大小和顏色之分,又可以理解為生活中所見盒子的厚度以及...

請問CSS盒子模型的有關屬性有什么?

content (內容)、padding (間隙)、border(邊框)、margin(間隔)。如圖所示:

css 盒子模型問題,謝謝

在制作頁面的時候,首先加上*{margin:0; padding:0;},這樣各個瀏覽器就沒有問題啦,他們的兼容性問題是初始值不同有的,所以現在都設置初始值為0,就可以啦

CSS盒子模型有什么用處,怎么用

css中的盒子模型是為了讓你你充分理解div+css模型的定位功能,就是利用盒子模型這樣... CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型

如何計算CSS盒子模型的高度

IE5以上的瀏覽器以及其他的瀏覽器已經統一了盒模型尺寸的計算方式。即: 【實際高度】=【預設高度】+【padding-top】+【padding-bottom】 margin是不計算在內的。...

深入講解CSS中盒模型的用法

因此,要掌握使用CSS布局的技巧,就需要深入了解框模型和視覺格式化模型的原理。 瀏... 往往被譯為“盒模型”。但是盒子是具有厚度的,也就是說盒子是三維的,而框...


www.xue163.net true //www.xue163.net/exploit/21/217136.html report 18410 深入理解CSS盒子模型,站長交易(//jy.Xue163.com)友情鏈接交換虛擬主機評測+IDC導航=net188.cn前言:前陣子在做一個項目時,在頁面布局方面遇到了一點小問題,于是上stackoverflow上求助。ifaou在幫助我解決我問題的同時,還推薦...
網友評論
最新添加資訊
    24小時熱門資訊
    娛樂時尚
      科技資訊
      歷史文化
        真視界
        旅游美食
        精彩圖文
        我愛我車
        母嬰健康
        關于本站 | 廣告服務 | 手機版 | 商務合作 | 免責申明 | 招聘信息 | 聯系我們
        Copyright © 2004-2018 xue163.net All Rights Reserved. 學網 版權所有
        京ICP備10044368號-1 京公網安備11010802011102號
        教育考試: 學歷財經建筑 醫藥公考資格外語電腦作文招聘中小學留學 文檔 移民 文庫專欄23問答中心問答圖書館知識IT編程數碼信息解決方案信息中心IT科技topzttophottopsctopnew問答新聞中心軟件教室設計大全網絡相關英語學習開發編程考試中心參考范文管理文庫營銷中心站長之家IT信息中心商學院數碼大全硬件DIY企業服務網吧在線百科硬件知識手機平板汽車游戲家電精彩攝影現代家居IT女人經驗健康養生獵奇創業攻略教育學習歷史時尚潮流福建体彩走势图漲知識
        推二八杠赢钱技巧 双色球蓝球走势图 玩时时彩怎么稳赚不赔 旺彩预测电脑版下载 大蠃家足球即时比分 重庆欢乐生肖开奖结果 七星彩全部历史开奖号 幸运飞艇看单双技巧 重庆时时最新开奖记录 重庆时时彩一星稳赚不 足球比分90vs滚球 黑龙江时时官网lm0 判断长龙 抢庄牌九游戏app下载 全天pk10人工在线计划 防止连挂倍投法