盒子模型的基本屬性（盒子模型的基本屬性是）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于盒子模型的基本屬性的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

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

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

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

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

本文目錄:

• 1、css盒子模型的深入理解，在塊級、行內(nèi)元素的區(qū)別和特性

• 2、什么是css盒子模式（框模型）

• 3、4. css彈性盒子模型

• 4、HTML盒模型基本屬性有哪些

一、css盒子模型的深入理解，在塊級、行內(nèi)元素的區(qū)別和特性

盒子模型用于處理元素的內(nèi)容、內(nèi)邊距、邊框和外邊距的方式簡稱。元素框的最內(nèi)部分是實際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會遮擋其后的任何元素。

內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是零。但是，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距?？梢酝ㄟ^將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式。

CSS實現(xiàn)頁面布局的一種思想：把頁面的所有元素都看成一個類似于禮品盒的盒子，禮品盒可能會有好多層包裝組成，那么頁面元素也對應(yīng)的有內(nèi)容、邊框、內(nèi)外邊距等組成。這里特別提醒一下，盒模型是要把元素看成立體的，它確實有空間的3D屬性,css盒子3D模型從上到下分為5層：1、border；2、content+padding；3、background-image；4、background-color；5、margin。

目前有： 標(biāo)準(zhǔn)盒子模型和IE盒子模型 2種盒模型 ，區(qū)別在于：

為了滿足跨瀏覽器的差異，我們比較肯定的方式是使用標(biāo)準(zhǔn)盒模型，這里通過在網(wǎng)頁頂部增加DOCTYPE的聲明，來解決跨瀏覽器兼容方案（或者使用css3的聲明方式）：

塊級元素會獨占一行,默認(rèn)情況下,其寬度自動填滿其父元素寬度。

行內(nèi)元素不會獨占一行,相鄰的行內(nèi)元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內(nèi)容而變化，另外

塊級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table...

行內(nèi)元素(內(nèi)聯(lián)元素)：a , span, strong, em, br , img , input, label, select, textarea, cite....

如果想讓一個元素可以設(shè)置寬度高度，又讓它以行內(nèi)形式顯示，我們可以設(shè)置display的值為inline-block。

CSS3增加的box-sizing屬性,允許我們規(guī)定元素使用哪種盒模型。IE8及以上版本支持該屬性，F(xiàn)irefox 需要加上瀏覽器廠商前綴-moz-，對于低版本的IOS和Android瀏覽器也需要加上-webkit-。它具有有3個屬性值：

box-sizing:content-box： W3C標(biāo)準(zhǔn)盒模型，默認(rèn)屬性。padding和border不被包含在定義的width和height之內(nèi)。

box-sizing:border-box： IE6混雜模式盒模型， padding和border被包含在定義的width和height之內(nèi)。此屬性表現(xiàn)為怪異模式下的盒模型。

box-sizing：inherit ： 從父級元素中繼承該屬性。

如果設(shè)置box-sizing：border-box來使用IE6混雜盒模型 ，那么

設(shè)置padding與border后，內(nèi)容區(qū)的寬度和高度被壓縮為70px 70px,盒子的原尺寸仍然是100px 100px

當(dāng)一個容器寬度定義為 width:100%; 之后，如果再增加 padding 或者 border 則會溢出父容器，是向外擴張的。如果使用該樣式，指定為 box-sizing: border-box; 則 padding 和 border 就不會再溢出，而是向內(nèi)收縮的，這個效果是非常實用的。

二、什么是css盒子模式（框模型）

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

網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，

CSS盒子模式都具備這些屬性。

這些屬性可以把它轉(zhuǎn)移到日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。

每個盒子都有：邊界、邊框、填充、內(nèi)容四個屬性；

每個屬性都包括四個部分：上、右、下、左；這四部分可同時設(shè)置，也可分別設(shè)置；里的抗震輔料厚度，而邊框有大小和顏色之分，又可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。

三、4. css彈性盒子模型

備注 ：我們需要在不同設(shè)備的不同尺寸屏幕下去瀏覽網(wǎng)頁，傳統(tǒng)的網(wǎng)頁布局方式很難滿足響應(yīng)式布局的需要。因此css3提出了一些全新的布局屬性，包括： 彈性盒子模型 ， 多列屬性 ， 響應(yīng)式布局 等等。彈性盒子模型的最大特征在于動態(tài)修改子元素的寬度和高度，以滿足在不同尺寸屏幕下的恰當(dāng)布局。

說明 ：盒子模型的內(nèi)容范圍包括內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)。盒子模型就是通過div和css樣式來設(shè)計一個可以添加邏輯的效果。

備注 ：內(nèi)邊距(padding)在 content 外，邊框內(nèi)。內(nèi)邊距有1個參數(shù)時，上下左右外邊距都為該參數(shù)值；2個參數(shù)時，第一個參數(shù)為 上下 外邊距值，第二個參數(shù)為 左右 外邊距值；4個參數(shù)分別代表 上右下左 外邊距值。

邊框可以創(chuàng)造出效果出色的邊框，并可以應(yīng)用于任何元素。 基本的邊框?qū)傩?/strong> ：