CSS 盒子模型(框模型)

2021-09-12 07:57:10 字數 2299 閱讀 9071

——頁面元素皆為框。

框模型——box model,定義了元素進行框處理的內容(就是定義你這個元素的框應該是什麼樣的),是元素內邊距、外邊距以及邊框的一種計算方式。想要設計好乙個優秀的網頁,框模型一定是必不可少需要認真考慮的。

盒子模型就像乙個盒子,它有內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)這四個屬性。

先來乙個形象的比喻,我們都知道細胞的結構有細胞膜、細胞質、細胞核,細胞核中存放著我們傳承五千年的優秀基因dna,那麼現在就可以把存放dna的細胞核看成是乙個內容(content)細胞質也就是細胞膜與細胞核之間的物質,看成是內邊距(padding)細胞膜看成是邊框(border),而細胞與細胞之間的距離看成是外邊距(margin),整個細胞就是乙個元素,要想描述乙個細胞(元素)就必須將這四個屬性都說明才能對這個細胞(元素)有乙個清晰的認知--------------(我是學生物的!)

內容就是盒子裡面裝的東西(可以看成是細胞核),用於顯示文字和影象。實實在在的文字影象存放空間。

1、內邊距就是盒子裡面的東西與盒子之間的距離(可以看成細胞質),是元素邊框與內容之間的距離。內邊距會擴大元素邊框占地區域。

2、語法:

1》padding:value

四個方向內邊距值

2》padding:v1 v2;

v1 : 上下

v2 : 左右

3》padding:v1 v2 v3;

v1 : 上

v2 : 左右

v3 : 下

4》padding:v1 v2 v3 v4;

上 右 下 左

元素邊框可以看成就是盒子本身(可以看成細胞膜),盒子本身具有一定的面積空間。

1、外邊距就是盒子與盒子之間應該保持的距離(可以看成細胞與細胞之間的距離),是圍繞在元素邊框周圍的空白距離,也能表示當前元素與其他元素之間的空間量。

2、語法

1》具體的數值,以px為單位的數字

2》取值為正,元素正向移動,取值為負,元素反向移動

margin-left

取值為正,讓元素右移動

取值為負,讓元素左移動

margin-top

取值為正,讓元素下移動

取值為負,讓元素上移動

3》取值為% ,外邊距的值,佔父元素寬或高的佔比是多少

4》取值為 auto

自動計算外邊距的值

注意:auto只對塊級的左右外邊距有效

使用方式:

1、為塊級元素設定寬度

2、再設定其左右外邊距為 auto

表現:塊級元素在父元素中水平居中顯示

1》margin:value;

四個方向的外邊距都相同

2》margin:v1 v2;

v1 : 上下外邊距

v2 : 左右外邊距

3》margin:v1 v2 v3;

v1 : 上外邊距

v2 : 左右外邊距

v3 : 下外邊距

4》margin:v1 v2 v3 v4;

上 右 下 左

ex:maring:0 auto;

1》外邊距合併

當兩個垂直外邊距相遇時,他們將合併成乙個,最終的距離取決於兩個外邊距中距離較大的那個

2》外邊距的溢位

在下面這些特殊的條件下,為子元素設定上外邊距時,有可能會作用到父元素上

a、父元素沒有上邊框

b、為第乙個子元素設定上外邊距時

解決方案:

a、為父元素增加上邊框

弊端:對父元素的高度有影響

b、使用父元素的上內邊距來取代子元素的上外邊距

弊端:對父元素的高度有影響

c、在父元素的第乙個子元素位置處,增加乙個空

3》行內元素 以及 行內塊元素的垂直外邊距

1、行內元素垂直外邊距無效(img除外)

2、行內塊元素,設定垂直外邊距時,整行元素都跟著發生改變

CSS 盒子模型 框模型

盒子 css處理網頁時,他認為每個元素都包含在乙個不可見的盒子裡.盒子組成 內容區 content 內邊距 padding 邊塊 border 外邊距 margin 與其他盒子的距離 1.給盒子設定邊框 為乙個元素設定邊框必須指定三個樣式,缺一不可 border width 邊框寬度 border ...

CSS盒子模型(框模型)

上圖為w3c標準的盒子模型 元素的總寬度 width 寬度 padding left 左內邊距 padding right 右內邊距 border left 左邊框 border right 右邊框 margin left 左外邊距 margin right 右外邊距 元素的總高度 height 高...

css盒子模型 CSS 盒子模型

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