什么是CSSBox盒模型-創(chuàng)新互聯(lián)

什么是CSS Box盒模型？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、靈璧網(wǎng)絡(luò)推廣、小程序開發(fā)、靈璧網(wǎng)絡(luò)營銷、靈璧企業(yè)策劃、靈璧品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供靈璧建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

CSS盒子模型在于你做css之后每個(gè)元素都由一個(gè)包圍該元素的矩形框定義。了解框模型的工作原理是理解CSS并更好地控制布局和演示的關(guān)鍵。話不多說，讓我們直接討論一下CSS盒子模型是什么，一個(gè)盒子如何影響它周圍的盒子，以及一些常見的瀏覽器問題。

簡(jiǎn)而言之，CSS中的盒模型描述了為HTML元素生成的框。在下面的這篇文章中，您將學(xué)習(xí)關(guān)于CSS盒子模型的示例和技巧，以便最好地利用CSS開發(fā)。

什么是CSS Box模型？

文檔樹中的每個(gè)元素都由矩形框定義。在CSS盒模型描述了那些箱子和定義每個(gè)人都有的屬性。理解盒子模型如何工作的最簡(jiǎn)單方法是使用簡(jiǎn)單的圖像。

每個(gè)元素的寬度和高度與其內(nèi)容區(qū)域相關(guān)聯(lián)。然后，每個(gè)元素具有圍繞內(nèi)容的填充區(qū)域和包含填充和內(nèi)容區(qū)域的邊界。最后，每個(gè)元素的邊界之外都有一個(gè)邊距。填充，邊框和邊距的頂部，右側(cè)，底部和左側(cè)都有值。

如果你想要一個(gè)元素的邊緣作為它的邊框則padding控制元素內(nèi)部的空間，margin控制元素外部和相鄰元素之間的空間。請(qǐng)注意，在考慮任何背景擴(kuò)展時(shí)元素邊框擴(kuò)展并不包含元素邊距的任何元素的背景屬性。

塊元素和內(nèi)聯(lián)元素之間的差異

如果您熟悉CSS顯示屬性，則表示它具有block，inline和none的值。Block和inline是兩種不同類型的盒子。兩者都遵循盒子模型，每個(gè)在頁面上的布局方式有一個(gè)關(guān)鍵差異。

塊級(jí)盒一個(gè)接一個(gè)地垂直布置。如果你的html中有兩個(gè)彼此相鄰的塊級(jí)別框，則第二個(gè)將位于第一個(gè)之下。另一方面，內(nèi)聯(lián)框水平布置。假設(shè)在包含元素中有足夠的空間，內(nèi)聯(lián)框?qū)⑹冀K位于其前面的框的右側(cè)。

內(nèi)聯(lián)元素將一直包裝。它們將從前一個(gè)框的右側(cè)開始，并填充剩余的任何水平空間。然后它們將換行到下一行并再次移動(dòng)以填充水平空間。在填充任何空格之前，塊級(jí)別框?qū)⒆詣?dòng)下降到下一行。

塊和內(nèi)聯(lián)覆蓋兩個(gè)顯示屬性。第三個(gè)沒有表示沒有塊存在。如果為任何CSS框分配none值，則該框?qū)钠胀ㄎ臋n流中完全刪除。相反，如果您將CSS屬性可見性設(shè)置為隱藏，則框仍然會(huì)根據(jù)CSS框模型規(guī)則填充空間。你沒有看到它，但確實(shí)占據(jù)了空間。

浮動(dòng)，定位和正常文檔流程

上面關(guān)于塊和內(nèi)聯(lián)框的討論假設(shè)每個(gè)都在正常的文檔流程中。浮動(dòng)和定位元素仍然是框，但它們以不同方式從正常文檔流中移除。兩者都會(huì)改變其他元素對(duì)盒子的反應(yīng)。

正常流程 - 在CSS 2.1中，正常流程包括塊框的塊格式化，內(nèi)聯(lián)框的內(nèi)聯(lián)格式化，塊或內(nèi)聯(lián)框的相對(duì)定位以及導(dǎo)入框的定位。

浮動(dòng)（float） -在浮動(dòng)模型中，盒子首先根據(jù)正常流動(dòng)，然后取出來的流動(dòng)以及移位到左邊或右邊盡可能布置。內(nèi)容可能沿著浮子的一側(cè)流動(dòng)。

絕對(duì)定位（absolute） - 在絕對(duì)定位模型中，完全從正常流中移除一個(gè)框（它對(duì)后來的同級(jí)元素沒有影響），并為相應(yīng)的包含塊指定一個(gè)位置。

相對(duì)定位 （relative）- 在相對(duì)定位模型中，相對(duì)于其在正常文檔流中的位置移動(dòng)框。其他元素不受影響，并且位于沒有定位的位置。

盒子將圍繞浮動(dòng)元素流動(dòng)，它們將表現(xiàn)為絕對(duì)定位的元素不存在，并且它們將處理相對(duì)定位的元素，就好像根本沒有應(yīng)用定位一樣。

計(jì)算盒子的寬度和高度

在CSS中設(shè)置寬度或高度時(shí)，您只需設(shè)置框的內(nèi)容區(qū)域部分的寬度或高度。包含塊（框）的寬度和高度定義如下：

包含塊的寬度（框）='margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right “

包含塊的高度（框）='margin-top'+'border-top-width'+'padding-top'+'height'+'padding-bottom'+'border-bottom-width'+'margin-bottom “

請(qǐng)注意，塊的寬度和高度包括左右和上下邊距和填充以及邊框?qū)挾取?/p>

如果未指定其中一個(gè)值，則使用瀏覽器默認(rèn)值。跨瀏覽器開發(fā)的一個(gè)問題是不同的瀏覽器可能對(duì)定義框的屬性使用不同的默認(rèn)值。使用CSS重置文件的原因是為了確保瀏覽器中的所有默認(rèn)值都相同。

IE6和Box模型的問題

較舊版本的Internet Explorer（包括IE6（沒有正確的doctype））有一個(gè)盒子模型錯(cuò)誤并且不準(zhǔn)確地計(jì)算寬度屬性。

寬度應(yīng)僅指內(nèi)容區(qū)域的寬度。在怪癖模式下較舊版本的IE和IE6 計(jì)算寬度為內(nèi)容區(qū)域的寬度+左右填充+左右邊框的寬度

類似地，它在計(jì)算height屬性時(shí)包括填充和邊框。

只要您使用正確的doctype，大多數(shù)情況下您不應(yīng)再處理此問題。請(qǐng)注意，雖然IE6仍在使用，如果您未指定doctype，則IE6將恢復(fù)為quirks模式并按照本節(jié)所述不準(zhǔn)確地計(jì)算寬度和高度。

總結(jié)

CSS框模型是CSS其余部分的基礎(chǔ)。請(qǐng)記住，文檔樹中的每個(gè)元素都由此框模型描述的矩形框定義，框是兩種類型之一。塊和內(nèi)聯(lián)，關(guān)于它放置的位置以及放置后的元素，每個(gè)類型都有自己的規(guī)則。

當(dāng)通過display： none 設(shè)置框時(shí)，框占用的空間會(huì)折疊。

當(dāng)通過 visibility: hidden設(shè)置框時(shí)，不會(huì)看到，但它仍保留其空間。

浮動(dòng)和定位元素從正常的文檔流中取出框，并影響它們所處的位置以及它們周圍的元素所在的位置。

舊版本的Internet Explorer不準(zhǔn)確地計(jì)算框的可見內(nèi)容區(qū)域的寬度，從而計(jì)算框本身。這是一個(gè)你經(jīng)常遇到的問題，但仍然需要注意的問題。我希望這篇文章能幫助您更好地理解盒子模型的工作原理。

關(guān)于什么是CSS Box盒模型問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

網(wǎng)站題目：什么是CSSBox盒模型-創(chuàng)新互聯(lián)
URL地址：http://muchs.cn/article18/degggp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)頁設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、ChatGPT、定制網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)