CSS盒子模型

2021-08-27 16:36:47 字數 645 閱讀 6603

什麼是css的盒子模式呢?為什麼叫它是盒子?先說說我們在

網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), css盒子模式都具備這些屬性。

這些屬性我們可以把它轉移到我們日常生活中的盒子(箱子)上來理解,日常生活中所見的盒子也就是能裝東西的一種箱子,也具有這些屬性,所以叫它盒子模式。那麼內容(content)就是盒子裡裝的東西;而填充(padding)就是怕盒子裡裝的東西(貴重的)損壞而新增的泡沫或者其它抗震的輔料;邊框(border)就是盒子本身了;至於邊界(margin)則說明盒子擺放的時候的不能全部堆在一起,要留一定空隙保持通風,同時也為了方便取出。在網頁設計上,內容常指文字、等元素,但是也可以是小盒子(div巢狀),與現實生活中盒子不同的是,現實生活中的東西一般不能大於盒子,否則盒子會被撐壞的,而css盒子具有彈性,裡面的東西大過盒子本身最多把它撐大,但它不會損壞的。填充只有寬度屬性,可以理解為生活中盒子裡的抗震輔料厚度,而邊框有大小和顏色之分,我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的,邊界就是該盒子與其它東西要保留多大距離。

每個html標記都可看作乙個盒子;

每個盒子都有:邊界、邊框、填充、內容四個屬性;

每個屬性都包括四個部分:上、右、下、左;這四部分可同時設定,也可分別設定;

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...

css盒子模型 說說css盒子模型

引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候,瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...

css 盒子模型 ie盒子模型

css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型,ie盒子模型,注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...