css盒子模型的理解（css盒子模型的理解和認(rèn)識(shí)）

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于css盒子模型的理解的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

開(kāi)始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話(huà)答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫(xiě)出的就越詳細(xì)，有微信小程序端、在線(xiàn)網(wǎng)頁(yè)版、PC客戶(hù)端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶(hù)遍布全球各地，如需了解相關(guān)業(yè)務(wù)請(qǐng)撥打電話(huà)175-8598-2043，或添加微信：1454722008

本文目錄:

• 1、盒子模型介紹

• 2、請(qǐng)簡(jiǎn)述 css 盒子模型與css怪異盒模型

• 3、介紹一下標(biāo)準(zhǔn)的css的盒子模型？與低版本ie的盒子模型有什么不同的

• 4、什么是盒子模型啊?能舉個(gè)實(shí)際的例子嗎?

一、盒子模型介紹

概念： 盒子模型（Box Model）就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的 容器。

作用： CSS 圍繞這些盒子產(chǎn)生了一種“盒子模型”概念，通過(guò)定義一系列與盒子相關(guān)的屬性，可以極大地 豐富 和 促進(jìn) 各個(gè)盒子乃至整個(gè) HTML 文檔的 表現(xiàn)效果和布局結(jié)構(gòu) 。

組成： 每個(gè)盒子都由元素的內(nèi)容(content)、內(nèi)邊距（padding）、邊框（border）和外邊距（margin），4個(gè)屬性組成。

每個(gè)屬性都包括4個(gè)部分：上、右、下、左。屬性的4部分可以同時(shí)設(shè)置，也可以分別設(shè)置。

一、內(nèi)容(content)

     寬度width和高度height屬性設(shè)置，對(duì)盒子內(nèi)容大小的大小進(jìn)行控制

二、內(nèi)邊距（padding）

padding屬性用于設(shè)置內(nèi)邊距。 是指邊框與內(nèi)容之間的距離。

a）padding-top、padding-right、padding-bottom、padding-left

        b)  padding: 1px 2px 3px 4px(  順時(shí)針 )

注意： 后面跟幾個(gè)數(shù)值表示的意思是不一樣的。值的個(gè)數(shù)表達(dá)意思：

            1個(gè)值padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素

            2個(gè)值padding:  上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素

            3個(gè)值padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素                                     左右是5像素 下是10像素

            4個(gè)值padding:  上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 比如: padding: 3px 5px 10px                                 15px; 表示 上3px 右是5px 下 10px 左15px

三、盒子邊框（border）

border 屬性來(lái)定義盒子的邊框，該屬性包含3個(gè)子屬性：border-style(邊框樣式)，border-color(邊框顏色)，border-width(邊框?qū)挾?。

1、定義寬度

a） border-top-width、border-bottom-width、border-left-width、border-right-width 

b） border-width:2px;                      

                     border-width:1px 2px 3px 4px;               

　 注意： 當(dāng)定義邊框?qū)挾葧r(shí)，必須要定義邊框的顯示樣式，由于 默認(rèn)樣式為none ,所以?xún)H設(shè)置邊框的寬度，由于樣式不存在，邊框?qū)挾纫沧詣?dòng)被清除為 0。

2、定義顏色

Demo:border-top-color: green;  border-color: yellow;

3、定義樣式 border-style:

                    hidden:隱藏邊框(IE 不支持)                 dotted:點(diǎn)線(xiàn)

                    dashed:虛線(xiàn)             solid:實(shí)線(xiàn)            double:雙線(xiàn)邊框

4、復(fù)合屬性

        綜合寫(xiě)法：border : border-width || border-style || border-color

         注意：順序不能錯(cuò)誤。

5、圓角邊框（CSS3）：

    語(yǔ)法：border-radius: 左上角  右上角  右下角  左下角;

    Demo：border-radius: 10px;       /*  一個(gè)數(shù)值表示4個(gè)角都是相同的 10px 的弧度 */

                        border-radius: 50%;         /*  100px   50% 取寬度和高度 一半  */

四、外邊距（margin）

margin屬性用于設(shè)置外邊距。 設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”，定義了元素與其他相鄰元素的距離， 這段空白通常不能放置其他內(nèi)容。

margin-top、margin-right、margin-bottom、margin-left

margin:1px 2px 3px 4px(  順時(shí)針 )

常用功能：

一、盒子水平居中

可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿(mǎn)足一下兩個(gè)條件：

               塊級(jí)元素和盒子必須指定寬度（width）

        左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。

二、外邊距合并

    margin的外邊距合并（margin collapsing）

           margin屬性有一個(gè)特別的行為，就是外邊距合并，這個(gè)行為只對(duì)普通文檔流中的塊級(jí)元素的 垂直外邊距有效； 行內(nèi)框（inline-block）、浮動(dòng)元素和絕對(duì)定位的原素不會(huì)發(fā)生外邊距合并。

        發(fā)生外邊距合并的兩種基本情況：

        1、兩個(gè)或多個(gè)垂直毗鄰的兄弟元素，上面元素的下邊距會(huì)與下面元素的上邊距發(fā)生合并，合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

        2.父元素和子元素之間，父元素的上外邊距和第一個(gè)子元素的上外邊距、父元素的下外邊距和最后一個(gè)子元素的下外邊距。發(fā)生這種情況的前提是父元素和第一個(gè)（或最后一個(gè)）子元素之間不存在邊框和內(nèi)邊距把外邊距分隔開(kāi)，合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

三、盒子模型和box-sizing

        box-sizing是用來(lái) 設(shè)置width、height的作用對(duì)象 的。

        三個(gè)值:content-box(默認(rèn)值) 、  border-box 、inherit（繼承父類(lèi)）;

         注意：沒(méi)有margin-box

        box-sizing:conten-box，width=元素的內(nèi)容區(qū)    (標(biāo)準(zhǔn)盒子模型)

        box-sizing:border-box，width=元素內(nèi)容區(qū)+padding+border  (IE盒子模型)

四、背景剪裁 (Background clip)

        當(dāng)我們給一個(gè)元素設(shè)置background-color和background-imge時(shí)，這個(gè)背景會(huì)覆蓋到元素border的外邊界，background-clip屬性可以用來(lái) 調(diào)整背景所覆蓋的區(qū)域:

        border-box:背景延伸到邊框外，默認(rèn)值

        padding-box：背景延伸到內(nèi)邊距外，但是不會(huì)繪制到border。

        content-box：背景被裁剪至內(nèi)容區(qū)（content box）外沿。

五、溢流（overflow）

        當(dāng)用絕對(duì)的值設(shè)置盒子的大小時(shí)（比如，固定像素的 width 和 height），內(nèi)容可能會(huì)超出設(shè)置的大小，此時(shí)內(nèi)容就會(huì)溢流盒子。要控制這時(shí)候發(fā)生的事情，我們可以使用 overflow 屬性。 最常用的：

        hidden：溢出部分不會(huì)顯示

        visible：默認(rèn)值，子元素會(huì)從父元素溢出，在父元素外部顯示

        scroll：生成兩個(gè)滾動(dòng)條，通過(guò)滾動(dòng)條來(lái)查看完整的內(nèi)容

        auto：根據(jù)需要生成滾動(dòng)條

六、輪廓(Outline)

        盒子的 outline 看起來(lái)像邊界，但是它不是盒模型的一部分。它表現(xiàn)得像邊界，但是是畫(huà)在盒子之上，不會(huì)修改盒子的大?。ň唧w來(lái)說(shuō)，ouline 是畫(huà)在邊界框之外，外邊距區(qū)域之內(nèi)）。

七、盒子顯示（display）類(lèi)型

        display 三種常見(jiàn)的值為 block、inline、inline-block

                    block（塊盒）：盒子之前以及之后的內(nèi)容出現(xiàn)在不同的行上

                    inline （行內(nèi)盒）：與塊盒相反：與周?chē)奈谋竞推渌袃?nèi)元素出現(xiàn)在同一行，并且其內(nèi)容會(huì)像段落中的文本行一樣，隨著文本流換行（寬度和高度設(shè)置對(duì)行內(nèi)盒無(wú)效，在行內(nèi)盒上的所有內(nèi)邊距、外邊距和邊界設(shè)置會(huì)改變周?chē)谋镜奈恢?，但是不?huì)影響周?chē)鷫K盒的位置。）；

                    inline-block（行內(nèi)塊盒）：

          介于前兩者之間：

                   像行內(nèi)盒一樣，跟隨周?chē)奈谋玖鞫逊牛粫?huì)在其前后創(chuàng)建換行；

                   像塊盒一樣，使用寬度和高度設(shè)置大小，并且維護(hù)其塊完整性 — 它不會(huì)跨段落行換行。

          塊級(jí)元素默認(rèn)設(shè)置為 display: block; ，行內(nèi)元素默認(rèn)設(shè)置為 display: inline 。

display: flex  — 允許你處理一些困擾CSS已久的一些傳統(tǒng)布局問(wèn)題，例如布置一系列彈性等寬容器或者垂直居中內(nèi)容。

二、請(qǐng)簡(jiǎn)述 css 盒子模型與css怪異盒模型

1、盒模型與怪異模型的設(shè)置

當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算（默認(rèn)模式）；

當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算；

2、盒模型

在網(wǎng)頁(yè)中，一個(gè)元素占有空間的大小由幾個(gè)部分構(gòu)成，其中包括元素的內(nèi)容（content），

元素的內(nèi)邊距（padding），元素的邊框（border），元素的外邊距（margin）四個(gè)部分，

這就是盒子模型。

在標(biāo)準(zhǔn)模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin

3、怪異盒模型

在怪異模式下，盒子的總寬度和高度是包含內(nèi)邊距padding和邊框border寬度在內(nèi)的，盒子總寬度/高度=width/height + margin = 內(nèi)容區(qū)寬度/高度 + padding + border + margin;

三、介紹一下標(biāo)準(zhǔn)的css的盒子模型？與低版本ie的盒子模型有什么不同的

1.網(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。

2.這些屬性我們可以用日常生活中的常見(jiàn)事物——盒子作一個(gè)比喻來(lái)理解，所以叫它盒子模式。

3.CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。

想象一個(gè)盒子，它有：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）四個(gè)屬性；

讓我們俯視這個(gè)盒子，它有上下左右四條邊，所以每個(gè)屬性除了內(nèi)容（content），都包括四個(gè)部分：上下左右；這四部分可同時(shí)設(shè)置，也可分別設(shè)置；內(nèi)邊距可以理解為盒子里裝的東西和邊框的距離，而邊框有厚薄和顏色之分，內(nèi)容就是盒子中間裝的東西，外邊距就是邊框外面自動(dòng)留出的一段空白。

參考地址：http://baike.baidu.com/link?url=oLkRp6pcOqFwPmPxpdsblEm2YarVt-MC5j1qWWkAX1x_R5_qIjBu4BWStxprusf3q80ihaVQQzRr2e1yPvp9pdBgy9Oo9ndFjejYPmWwTioTsKvMP1LW9IHlmGxNsBNV

四、什么是盒子模型啊?能舉個(gè)實(shí)際的例子嗎?

什么是CSS的盒子模式呢？為什么叫它是盒子？先說(shuō)說(shuō)我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中常聽(tīng)的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin).在黑馬程序員學(xué)習(xí)時(shí)候就會(huì)有老師教過(guò)，

CSS盒子模式這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻?lái)理解，日常生活中所見(jiàn)的盒子也具有這些屬性，所以叫它盒子模式。那么內(nèi)容就是盒子里裝的東西；而內(nèi)邊距(padding)就是怕盒子里裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；邊框(border)就是盒子紙板的厚度；至于外邊距(margin)則說(shuō)明盒子擺放的時(shí)候的不能全部堆在一起，要留一定空隙保持通風(fēng)，同時(shí)也為了方便取出嘛。內(nèi)容(content)就是盒子里裝的東西. 在網(wǎng)頁(yè)設(shè)計(jì)上，內(nèi)容(content)常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實(shí)生活中盒子不同的是，現(xiàn)實(shí)生活中的東西一般不能大于盒子，否則盒子會(huì)被撐壞的，而CSS盒子具有彈性，里面的東西大過(guò)盒子本身最多把它撐大，但它不會(huì)損壞的。

以上就是關(guān)于css盒子模型的理解相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。

推薦閱讀：

云服務(wù)ecs快照（云服務(wù)ecs快照是啥意思）

中國(guó)船舶cssc全稱(chēng)（中國(guó)船舶xd）

css3中背景漸變（css3背景漸變圖片）

每日一問(wèn)的經(jīng)典問(wèn)題

好的電商平臺(tái)有哪些（好的電商平臺(tái)有哪些）