خصائص CSS المتعلقة بنموذج الصندوق

Articles

تشرح هذه المقالة خصائص CSS المتعلقة بنموذج الصندوق۔

يمكنك التعرف على حالات الاستخدام والصياغة لخصائص مثل العرض والارتفاع والهامش۔

YouTube Video

HTML للمعاينة

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

مرتبط بنموذج الصندوق

خصائص `width` و`height`

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

تُستخدم خصائص width وheight في CSS لتحديد عرض وارتفاع العنصر۔ تُستخدم هذه الخصائص بشكل خاص عند تحديد حجم العناصر الكتلية، مثل الصور ومقاطع الفيديو وغيرها۔

في الفئة width-height-fixed، يتم تحديد قيم ثابتة للعرض والارتفاع۔
في الفئة width-height-percent، يتم تحديد قيم النسبة المئوية للعرض والارتفاع۔

القيم التي يمكن تحديدها

يمكن أن تحتوي خصائص width وheight على القيم التالية۔

auto: الحجم الافتراضي۔ يعدل الحجم تلقائيًا بالنسبة إلى العنصر الأب۔
قيم ثابتة: تحدد عرضًا ثابتًا بالبكسل أو بالنسبة المئوية أو بالوحدات النسبية۔(ex: 100px, 50%, 10rem)
- على سبيل المثال، يعين 250px حجم العنصر إلى 250 بكسل، بينما يعين 50% إلى 50% من حجم العنصر الأب۔
min-content: يتناسب مع الحجم الأدنى للمحتوى۔
max-content: يتناسب مع الحجم الأقصى للمحتوى۔
fit-content: يضبط حجم العنصر بشكل مناسب استنادًا إلى حجم المحتوى۔

تحديد القيم الدنيا والقصوى

خصائص min-width وmax-width وmin-height وmax-height هي خصائص CSS تُستخدم لتحديد قيود الحجم المتعلقة بعرض وارتفاع العنصر۔ باستخدام هذه الخصائص، يمكنك التأكد من بقاء العنصر ضمن نطاق حجم معين۔

خصائص `margin` و`padding`

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

خصائص margin وpadding تُستخدم في CSS للتحكم في التباعد الخارجي والداخلي للعناصر ضمن نموذج الصندوق۔ تُستخدم هذه الخصائص لضبط المسافة بين العناصر وتنظيم المظهر العام۔

في الفئة margin-padding، يتم تحديد كل من margin وpadding۔ يوجد فراغ margin خارج الإطار الصلب وفراغ padding داخل الإطار الصلب۔
في الفئة margin-only، يتم تحديد margin فقط۔ يمكنك أن ترى أن المنطقة الزرقاء أصغر مقارنة بفئة margin-padding لأنّه لا يوجد فراغ padding داخل الإطار الصلب۔
في الفئة no-margin، يتم تعيين كل من margin وpadding إلى 0۔ يمكنك أن ترى أن المنطقة الزرقاء مدفوعة بالكامل إلى اليسار لأنه لا يوجد فراغ margin خارج الإطار الصلب۔

بهذه الطريقة، تقوم خاصية margin بتعيين المساحة الخارجية للعنصر، مما يضبط المسافة بين العناصر۔ من ناحية أخرى، تحدد خاصية padding المساحة الداخلية للعنصر، مما يضبط المسافة بين المحتوى والحدود۔

خاصية `margin`

تحدد خاصية margin المساحة الخارجية (الهامش) للعنصر۔ تُستخدم لإنشاء مسافة بين العناصر المجاورة۔ يمكن تحديد القيم التالية:۔
قيم ثابتة: يمكنك تحديد حجم الهامش بالبكسل أو الوحدات النسبية (em، rem) أو النسب المئوية۔(ex: 10px, 1em, 5%)
auto: مفيد لتوسيط العناصر ذات الكتل۔ عند تحديد العرض، يتم ضبط الهوامش اليمنى واليسرى تلقائيًا۔
القيم الموجبة والسالبة: القيم الموجبة توسع المسافة، بينما القيم السالبة تقرب العناصر من بعضها۔

التدوين المختصر:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

يمكن أن تأخذ خاصية margin ما بين قيمة واحدة إلى أربع قيم۔

قيمة واحدة: تنطبق على جميع الجوانب۔
قيمتان: الأولى تنطبق على الأعلى والأسفل، والثانية على اليسار واليمين۔
ثلاث قيم: تنطبق بالترتيب على الأعلى، اليسار واليمين، ثم الأسفل۔
أربع قيم: تنطبق بالترتيب على الأعلى، اليمين، الأسفل، اليسار۔

خاصية `padding`

الوظيفة:

تحدد خاصية padding المساحة الداخلية (الحشو) للعنصر۔ تُستخدم لإنشاء مسافة بين المحتوى وحدود العنصر۔ يمكن تحديد القيم التالية:۔
قيم ثابتة: تحدد حجم الحشو۔(ex: 10px, 1em, 5%)
لا يمكن استخدام القيم السالبة۔ يمكن تحديد قيم الحشو كأرقام موجبة فقط۔

التدوين المختصر:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

مثل margin، يمكنك تحديد ما بين قيمة واحدة إلى أربع قيم۔

قيمة واحدة: تنطبق على جميع الجوانب۔
قيمتان: الأولى تنطبق على الأعلى والأسفل، والثانية على اليسار واليمين۔
ثلاث قيم: تنطبق بالترتيب على الأعلى، اليسار واليمين، ثم الأسفل۔
أربع قيم: تنطبق بالترتيب على الأعلى، اليمين، الأسفل، اليسار۔

خاصية `box-sizing`

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing هي خاصية في CSS تتحكم في كيفية حساب عرض وارتفاع العنصر۔

في فئة content-box، يكون عرض العنصر 360 بكسل۔ العرض هو 300 بكسل، مع حشو من اليمين واليسار بمجموع 40 بكسل وحدود من اليمين واليسار بمجموع 20 بكسل، مما يجعل المجموع الكلي 360 بكسل۔
في border-box، عرض العنصر يكون 300 بكسل۔ يتم تضمين الحشو والحدود في العرض المحدد۔

قيم `box-sizing`

هناك قيمتان أساسيتان لـ box-sizing: content-box و border-box، وتكون content-box هي القيمة الافتراضية۔

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

عند تحديد content-box، يتم ضبط عرض وارتفاع المحتوى فقط بواسطة width و height۔ يتم إضافة padding و border إليه لتحديد الحجم النهائي۔ بعبارة أخرى، تشير width و height فقط إلى منطقة المحتوى۔

في هذا المثال، يتم تحديد width بمقدار 200px، ولكن مع إضافة عرضي padding و border على الجانبين الأيسر والأيمن، يصبح العرض الفعلي النهائي للعنصر 260px۔

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

عند تحديد border-box، يتم حساب width و height متضمنةً padding و border۔ بمعنى آخر، يصبح width و height المحددين هما الحجم الإجمالي للمحتوى و padding و border۔

في هذه الحالة، يكون width المحدد هو 200px، وبما أن padding و border متضمنان أيضًا، يظل العرض الفعلي النهائي للعنصر 200px۔ يتم تعديل padding و border داخله۔

ملخص لاختلافات `box-sizing`

خاصية	طريقة الحساب	حساب العرض الفعلي
`content-box` (الافتراضي)	يشير `width` إلى المحتوى فقط۔ يتم إضافة `padding` و`border`۔	`width` + `padding` + `border`
`border-box`	`width` هو كل شيء (يشمل المحتوى، `padding`، `border`)	يتم استخدام العرض المحدد كما هو.

مزايا `box-sizing`

استخدام border-box يعمل على استقرار تخطيط الصفحة۔ إضافة padding أو border لا تغير الحجم المحدد، مما يجعل الحسابات أبسط۔
يكون ذلك مفيدًا عند إنشاء تخطيطات مرنة۔ في التصاميم المتجاوبة أو التخطيطات المعقدة، غالبًا ما يتم استخدام border-box لتجنب تقلبات الحجم غير المتوقعة۔

كيفية تطبيق `border-box` عالميًا

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

من خلال تعيين CSS بهذه الطريقة، يمكن تطبيق border-box على جميع العناصر لتجنب تغييرات الحجم غير المتوقعة۔

الملخص

box-sizing يتحكم في ما إذا كان padding و border مشمولين في width و height للعنصر۔
استخدام border-box يجعل حسابات الحجم أسهل وهو مناسب لتصميم المواقع المتجاوبة۔

خاصية `visibility`

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

تُستخدم خاصية visibility لإظهار أو إخفاء العناصر، ولكنها على عكس خاصية display تؤثر على التخطيط حتى إذا كان العنصر مخفيًا۔ تقوم فقط بإخفاء العنصر مع الاحتفاظ بموقعه وحجمه الأصليين دون التأثير على تخطيط العناصر الأخرى۔

الصياغة الأساسية

1element {
2    visibility: value;
3}

value: قيمة تحدد رؤية العنصر۔

أنواع القيم

يمكن تعيين خاصية الرؤية للقيم التالية:۔

`visible`

تحديد visible سيعرض العنصر۔ هذه هي القيمة الافتراضية۔

`hidden`

تحديد hidden سيُخفي العنصر ولكن سيتم حجز مساحته في التخطيط۔

`collapse`

يُستخدم collapse بشكل أساسي للصفوف أو الأعمدة داخل الجداول۔ يصبح العنصر غير مرئي ويتم تجاهل مساحته أيضًا۔ عند تطبيقه على صفوف أو أعمدة الجداول، يتم إزالة الصفوف أو الأعمدة المخفية بالكامل من التخطيط۔
ومع ذلك، عند استخدامه على العناصر الكتلية العادية أو الخطية (باستثناء عناصر الجداول)، فإنه يتصرف مثل hidden ويتم الاحتفاظ بمساحة التخطيط۔

`inherit`

عند تحديد inherit، سيتم توريث قيمة خاصية visibility من العنصر الأصل۔

الاختلافات بين `visibility` و `display`

هناك اختلافات بين visibility و display كما يلي۔

visibility: hidden يقوم بإخفاء العنصر ولكنه يحتفظ بمساحته وتخطيطه۔
display: none يزيل العنصر تمامًا من التخطيط، مما يسمح للعناصر الأخرى بملء تلك المساحة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS لعرض الكود والاقتباسات خصائص CSS المتعلقة بالخلفية

خصائص CSS المتعلقة بنموذج الصندوق

YouTube Video

HTML للمعاينة

مرتبط بنموذج الصندوق

خصائص width وheight

القيم التي يمكن تحديدها

تحديد القيم الدنيا والقصوى

خصائص margin وpadding

خاصية margin

التدوين المختصر:

خاصية padding

الوظيفة:

التدوين المختصر:

خاصية box-sizing

قيم box-sizing

content-box

border-box

ملخص لاختلافات box-sizing

مزايا box-sizing

كيفية تطبيق border-box عالميًا

الملخص

خاصية visibility

الصياغة الأساسية

أنواع القيم

visible

hidden

collapse

inherit

الاختلافات بين visibility و display

YouTube Video

خصائص `width` و`height`

خصائص `margin` و`padding`

خاصية `margin`

خاصية `padding`

خاصية `box-sizing`

قيم `box-sizing`

`content-box`

`border-box`

ملخص لاختلافات `box-sizing`

مزايا `box-sizing`

كيفية تطبيق `border-box` عالميًا

خاصية `visibility`

`visible`

`hidden`

`collapse`

`inherit`

الاختلافات بين `visibility` و `display`