• 
• 
• 
• 
• 
• 
• 

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

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

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

共0個(gè)回貼   分0頁(yè)

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

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

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