CSS فاژمین

CSS فاژمین

Dukoki na HTML akwaii yin gida. A kanin da CSS, lokaci a zai zai ta fahimtar da tsaki da samfuri, za a yi kalmar 'model na kofar' ko 'model na kofar'.

CSS 框模型實質上是一個包圍每個 HTML 元素的框。它包括：外在距、邊框、內邊距以及實際的內容。下圖展示了框模型：

CSS فاژمین

對不同部分的說明：

  • 內容 - 框的內容，其中顯示文本和圖像。
  • 內邊距 - 清除內容周圍的區域。內邊距是透明的。
  • 邊框 - 围繞內邊距和內容的邊框。
  • 外在距 - 清除邊界外的區域。外在距是透明的。

框模型允許我們在元素周圍添加邊框，並定義元素之間的空間。

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外在距，外在距默認是透明的，因此不會遮擋其後的任何元素。

提示：背景應用於由內容和內邊距、邊框組成的區域。

內邊距、邊框和外在距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外在距和內邊距。可以通过將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外在距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

假設框的每個邊上有 10 像素的外邊距和 5 像素的內邊距。如果希望這個元素框達到 100 像素，就需要將內容的寬度設置為 70 像素，請看下圖：

CSS فاژمین نمونه 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示：內邊距、邊框和外在距可以應用於一個元素的所有邊，也可以應用於單獨的邊。

提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

範例

演示框模型：

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

جربها بنفسك

元素的寬度和高度

為了在所有瀏覽器中正確設置元素的寬度和高度，您需要了解框模型如何工作。

重要提示：使用 CSS 設置元素的 width 和 height 屬性時，只需設置內容區域的寬度和高度。要計算元素的完整大小，還必須把內邊距、邊框和外在距加起來。

範例

<div> 元素的總寬度將是 350px：

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

جربها بنفسك

حساب كما يلي:

320px (عرض)
+ 20px (المداخل الداخلية اليسرى + اليمنى)
+ 10px (الحواف اليسرى + اليمنى)
+ 0px (المداخل الخارجية اليسرى + اليمنى)
= 350px

ينبغي حساب العرض الكلي للعنصر كما يلي:

عرض العنصر الكلي = العرض + المداخل الداخلية اليسرى + المداخل الداخلية اليمنى + الحواف اليسرى + الحواف اليمنى + المداخل الخارجية اليسرى + المداخل الخارجية اليمنى

ينبغي حساب الارتفاع الكلي للعنصر كما يلي:

ارتفاع العنصر الكلي = الارتفاع + المداخل الداخلية العلوية + المداخل الداخلية السفلية + الحواف العلوية + الحواف السفلية + المداخل الخارجية العلوية + المداخل الخارجية السفلية