正文

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

發(fā)布時間：2023-04-08 12:48:57 稿源：創(chuàng)意嶺閱讀： 106

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

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

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

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

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務客戶遍布全球各地，如需了解相關業(yè)務請撥打電話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)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。

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

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

目前有： 標準盒子模型和IE盒子模型 2種盒模型，區(qū)別在于：

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

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

行內(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....

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、4. css彈性盒子模型

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

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

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

邊框可以創(chuàng)造出效果出色的邊框，并可以應用于任何元素。 基本的邊框屬性 ：

簡化寫法

備注： border: 1px solid red; 三個參數(shù)分別為邊框的寬度、樣式和顏色屬性。

css3提供的邊框屬性

eg1 ：圓角邊框的繪制

陰影屬性(box-shadow)的4個參數(shù)分別代表：背景陰影向右移動10個像素，再向下移動20個像素；陰影透明度；陰影顏色。

備注：圍繞在內(nèi)容邊框的區(qū)域就是外邊距(margin)，外邊距默認是透明區(qū)域，外邊距接受任何長度單位和百分數(shù)值。外邊距和內(nèi)邊距的屬性比較相似。margin的參數(shù)個數(shù)和對應代表大含義和padding一致。

盒子模型示例

說明：最外層的div為容器層，之后為邊框、內(nèi)邊距和內(nèi)容區(qū)域。

說明：外邊距合并就是一個疊加的概念。外邊距合并遵循邊距大的一方，即元素1的外邊距為10px，元素2的外邊距為20px,則元素1和元素2間的距離為20px；元素1的外邊距為10px，元素2的外邊距為10px,則元素1和元素2間的距離為10px。

(1) 彈性容器屬性

(2) 彈性子元素屬性

eg1 ：

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

在真正開始工作之前我們腦海中要形成這樣一種思想：表格是什么我不知道，在內(nèi)容部分我不能讓它再出現(xiàn)表現(xiàn)控制標簽，如：font、color、height、width、align等標簽不能再出現(xiàn)，（簡單說工作前先洗腦，忘掉以前的一慣做法，去接受和使用全新的方法），我不是單純的用DIV來實現(xiàn)排版的嵌套，DIV是塊級元素，而像P也是塊級元素，例如要分出幾個文字內(nèi)容塊，不是一定要用DIV才叫DIV排版，不是“

文字塊一

文字塊二

文字塊三

”，而用“

文字塊一

文字塊二

文字塊三

”更合適。用DIV+CSS設計思路是這樣的: 1.用div來定義語義結構；2.然后用CSS來美化網(wǎng)頁，如加入背景、線條邊框、對齊屬性等；3.最后在這個CSS定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等（沒有表現(xiàn)屬性的標簽），下面大家跟我一起來做一個實例加深對這個步驟的理解。先看結果圖： CSS排版結果圖演示地址：css2.html 用div來定義語義結構現(xiàn)在我要給大家演示的是一個典型的版面分欄結構，即頁頭、導航欄、內(nèi)容、版權（如下圖）典型版面分欄結構其結構代碼如下：

上面我們定義了四個盒子，按照我們想要的結果是，我們要讓這些盒子等寬，并從下到下整齊排列，然后在整個頁面中居中對齊，為了方便控制，我們再把這四個盒子裝進一個更大的盒子，這個盒子就是BODY，這樣代碼就變成:

以上就是關于盒子模型的基本屬性相關問題的回答。希望能幫到你，如有更多相關問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。