• 
• 
• 
• 
• 
• 
• 

返回貼子列表		發(fā)表新貼
主題： CSS盒子模型的深入解讀	共有1707人瀏覽過本貼	主貼管理 置　頂 加　精 結(jié)　貼 轉(zhuǎn)　貼

昵稱：奈薇建站網(wǎng) 論壇積分：108000 發(fā)貼等級：21 發(fā)貼數(shù)：1156 回貼數(shù)：1282 被砸雞蛋：1 獲贈鮮花：182

發(fā)表時間：2016/9/21 19:27:00 樓　主 CSS盒子模型的深入解讀 　　本文章適合初級網(wǎng)站制作的web設(shè)計朋友，讓你對盒子模型有更近一步的理解。建議閱讀這篇文章之前你應(yīng)該對盒子模型html等基礎(chǔ)知識是有一定的了解，否則會讓你更加云里霧里。本文章更多的是教你在實戰(zhàn)過程中如何自如的控制盒子的寬度，如何用最恰當(dāng)?shù)姆椒ǘㄎ缓凶?，如何解決IE中盒子的種種bug，不會像很多的中文教程那樣，把盒子模型內(nèi)邊距，外邊距，如何定位等概念有條不紊的介紹一遍。 　　之所以翻譯這篇外國文章，是因為青島網(wǎng)站建設(shè)的程序員在學(xué)習(xí)的過程中也發(fā)現(xiàn)，國外的教程和過內(nèi)的相比，它們授人以漁，更授人以魚。不同于國內(nèi)教程有章有節(jié)有點(diǎn)有條目，他們的敘述方式更接近談話式的由淺入深……總而言之，目的在于給更多的初學(xué)者提供一點(diǎn)啟示和幫助，不必像我一樣走了許多彎路。 　　深入理解CSS盒子模型（TheCSSBoxModel） 　　如果你了解盒子模型（boxmodel）的概念，了解它是如何決定某一個元素的最終尺寸的話，會有助你理解一個元素如何在網(wǎng)頁上定位的。盒子模型主要適用于塊級元素。順便提一個與此相關(guān)的概念：行內(nèi)布局模型（inlinelayoutmodel）——定義了行內(nèi)元素是如何定位的，在行內(nèi)元素格式（InlineFormatting）中有具體說明 　　盒子的尺寸的計算（CalculatingBoxDimensions） 　　在CSS2.1中，塊級元素只能是矩形形狀的。當(dāng)我們需要計算一個塊級元素的整體尺寸時，需要同時把內(nèi)容區(qū)域（contentarea）［注釋1］的長寬，連同此元素的外邊距，內(nèi)邊距，以及邊框都計算在內(nèi) 　?。圩⑨?］：此文章中頻繁提到content和contentarea這兩個概念，雖然從字面上都可以理解為盒子中的內(nèi)容區(qū)域（content），但從后文的敘述來看，這兩個概念還是有區(qū)別的，到這篇文章發(fā)布為止，我還是對這兩者的區(qū)別有迷惑，希望有興趣閱讀原文的朋友能留言告訴我這兩者的區(qū)別，以便于我更正文中的錯誤。 　　我們可以通過聲明寬和高來定義一個元素的內(nèi)容（content）的寬度和高度。如果沒有做任何的聲明，寬度和高度的默認(rèn)值將是自動（auto） 　　w3schools上對于盒子模型的圖示如下 　　在圖的下方有一段很重要的話Important：WhenyouspecifythewidthandheightpropertiesofanelementwithCSS，youarejustsettingthewidthandheightofthecontentarea.也就是說當(dāng)我們在css中設(shè)計一個塊級元素的width和height屬性時比如.box{width：100px;height:100px}時，其中的width和height僅僅是對content部分設(shè)置的，即定義上圖中padding下虛線方框內(nèi)區(qū)域的長和寬。而不是內(nèi)容，內(nèi)邊距，邊框的總和（但在IE的早期版本包括IE6中，盒子模型的width和height卻恰恰是這樣定義的，盡管符合人們思考的邏輯，但是不符合規(guī)范，這會造成嚴(yán)重的問題） 　　對寬度為自動狀態(tài)的靜態(tài)（static）定位元素（即無定位），和相對定位（relativelypositioned）元素來說，計算寬度的方法是，將他們包含塊（containingblock）［注釋2］的寬度減去此元素的橫向的所有外邊距，內(nèi)邊距，邊框，滾動條。也就是說，從包含塊的寬度中除去元素的橫向外邊距，內(nèi)邊距，邊框，滾動條（如果存在的話）的寬度，所剩的值就是了。 　?。圩⑨?］：包含塊（containingblock）。如果你知道絕對定位和相對定位的實現(xiàn)原理的話，這個注釋可以忽略。包含塊可以理解為一個矩形，而這個矩形的作用是為它里面包含的元素提供一個參考，內(nèi)部元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。例如在絕對定位中，距離它最近的已定位（position為fixed，relative或absolute）的祖先元素即為包含塊。這算比較初級的概念，不深究，請百度。 　　包含塊的定位屬性和尺寸被作為后代元素定位和尺寸計算的參考。盡管元素的定位必須遵從與他們的塊級元素來進(jìn)行定位，但是他們也非受限于它。后代的元素也可以溢出包含塊。在大多數(shù)情況下，generatedboxes［注釋3］通常扮演著子代元素包含塊的角色。想要充分了解包含塊的大量細(xì)節(jié)信息請點(diǎn)擊ContainingBlock。 奈薇建站網(wǎng)致力于，讓每個中國人、每個中國企業(yè)都擁有自己的“官方網(wǎng)站”！ 回復(fù)此貼 單貼管理 修　改 刪　除 清理簽名 TOP

共0個回貼   分0頁

上一頁 / 下一頁   當(dāng)前第頁

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶