معلومات عامة
عندما تتحدث عن عنصر معين في صفحة الويب ، تكتشف أننا نتحدث عن غلاف أو حاوية ، وهذا يعني ، في الواقع ، أمامك مجموعة من العناصر "ملفوفة" في عنصر آخر أو "موضوعة" "داخل هذا العنصر. إذا لم تقم ، عند تخصيص صفحة ويب ، باستخدام عناصر إضافية ، وتعيين دور الحاوية لعنصر
<body>، فيمكنك عندئذٍ تصميم هذا العنصر كما يلي:
body {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
ولكن في بيئة اليوم ،
<body>قد لا يكون استخدام عنصر كحاوية عمليًا. تسمح لك الحاوية بمنع الأطفال من مغادرة حدودها.
لا تسمح الحاوية للعناصر الفرعية بالانتقال إلى ما وراء حدودها.
هناك جانب الصفحة ومنطقة الصفحة الرئيسية. كل من هذه المناطق داخل عنصر الحاوية. تم تعيينه فئة
.wrapper. من بين الخصائص الأخرى للحاوية ، بالطبع ، يتم أيضًا عرضه. تبدو بنية كود HTML لهذه الصفحة كما يلي:
<div class="wrapper">
<aside>...</aside>
<main>...</main>
</div>
بدون استخدام عنصر التفاف ، سيتم وضع العناصر الفرعية ، مع التركيز على حواف الشاشة. قد يكون هذا غير مريح للمستخدمين. خاصة لأولئك الذين يعملون على شاشات كبيرة.
صفحة بدون عنصر حاوية تتضمن محتوياتها
توضح هذه الصفحة كيف تشغل العناصر ، وتمتد ، الشاشة بأكملها. يحدث هذا إذا لم يكن هناك عنصر حاوية في تخطيط الصفحة. أعتقد أنه لا ينبغي أن تقترح على المستخدمين العمل مع هذه الصفحات. دعني أوضح هذا الفكر.
حول الحاجة إلى استخدام الحاويات لمحتوى صفحات الويب
إن استخدام حاوية لمحتوى الويب له العديد من نقاط القوة التي يجب أن يدركها المصممون والمطورون. بعض نقاط القوة هذه هي:
- يؤدي استخدام الحاوية إلى تحسين إمكانية قراءة محتوى الصفحة. بدون حاوية ، يمكن أن يمتد محتوى مثل النص إلى العرض الكامل للشاشة. على الشاشات الصغيرة ، يمكن أن يعطي هذا نتيجة مقبولة. لكنها تبدو سيئة حقًا على الشاشات الكبيرة.
- تجميع عناصر تصميم الصفحة يجعل من السهل ضبط المسافة بينهما.
- إذا كانت عناصر التصميم تحتاج إلى تجميعها في أعمدة ، فقد يكون هذا صعبًا بدون استخدام حاوية.
تخصيص عنصر الحاوية باستخدام CSS
الآن بعد أن قمنا بتغطية أساسيات استخدام الحاويات وفوائد استخدامها ، دعنا نلقي نظرة على كيفية تخصيصها باستخدام CSS.
اضبط عرض الحاوية
عنصر الحاوية المخصصة
عند إنشاء حاوية ، فإن أول شيء يجب أن تقرره هو مدى اتساعها. يمكن الإجابة على سؤال العرض المطلوب للحاوية عن طريق تحليل تصميم الصفحة. بشكل عام ، يمكننا القول أن الحاويات ذات العرض في النطاق
1000px-غالبًا ما يتم استخدامها1300px. على سبيل المثال ، يستخدم إطار Bootstrap الشائع عروض متساوية1170px.
.wrapper {
width: 1170px;
}
يظهر هنا عرض التثبيت لعنصر ذي فئة
.wrapperفي 1170px، ولكن في الواقع ، widthلا يوصى بالخاصية لحاوية ضبط العرض. والحقيقة هي أن هذا يؤدي إلى الحاجة إلى التمرير الأفقي للصفحة إذا كان عرض منطقة نافذة المتصفح المتاحة لعرض الصفحة أصغر 1170px. يمكنك حل هذه المشكلة باستخدام الخاصية max-width:
.wrapper {
width: 1170px;
max-width: 100%;
}
في حين أن هذه خدعة قابلة للتطبيق ، يمكنك التخلص من الممتلكات تمامًا
width، وكما هو الحال في المثال التالي ، استخدم الخاصية فقط max-width:
.wrapper {
max-width: 1170px;
}
الآن بعد أن وجدنا آلية مناسبة لضبط عرض الحاوية ، دعنا نتحدث عن كيفية محاذاة الحاوية إلى وسط الصفحة.
l قم بمحاذاة الحاوية إلى منتصف الصفحة
تمت محاذاة الحاوية إلى منتصف الصفحة من
أجل محاذاة الحاوية إلى وسط الصفحة ، عند إعداد المسافات البادئة الخارجية ، استخدم القيمة
autoللعلامات البادئة اليمنى واليسرى:
.wrapper {
max-width: 1170px;
margin: 0 auto;
}
إليك كيفية عمل الوسائد التي تم تعيينها وفقًا للقيمة وفقًا لمواصفات CSS
auto:
إذا تم تعيين الهامش الأيسر والهامش الأيمن على التلقائي ، فإن القيم التي سيتم استخدامها لهذه الوسائد ستكون هي نفسها. يتيح لك ذلك توسيط العنصر أفقيًا بالنسبة لحواف الكتلة التي تحتوي عليه.
إذا كنت مهتمًا بتفاصيل استخدام الكلمات الرئيسية
autoفي CSS ، فألق نظرة على هذه المقالة الخاصة بي.
لقد استخدمت التصميم هنا
margin: 0 auto. يعيد تعيين حجم المسافات البادئة العلوية والسفلية إلى 0 ، ويضبط المسافات البادئة اليسرى واليمنى وفقًا للاستخدام الخاص للكلمة الرئيسيةauto. هذه الخطوة لها بعض النتائج التي سأناقشها أدناه. في هذه الأثناء ، أود أن أشير إلى أنه يوصى باستخدام النسخة الكاملة من البناء المختصر الموضح أعلاه لإعداد الهوامش:
.wrapper {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
▍ضبط المساحة المتروكة اليسرى واليمنى
المسافات البادئة الأفقية (اليسرى واليمنى)
عند تصميم حاوية ، من المهم الانتباه إلى إعداد المسافات البادئة اليسرى واليمنى. عندما يكون حجم إطار العرض أقل من الحد الأقصى لعرض الحاوية ، سيؤدي ذلك إلى تكدس حواف الحاوية مقابل حواف إطار العرض. في ما يلي مثال على تصميم حاوية بها مسافة بادئة:
.wrapper {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
من خلال ضبط المساحة الداخلية للحاوية ، يمكننا التأكد من أن حواف الحاوية ، على أي حال ، ستكون موجودة على الأقل
16pxمن حواف إطار العرض ، حتى إذا كان عرض إطار العرض أقل من الحد الأقصى لعرض الحاوية. الحشو هو نوع من آليات الحماية التي تمنع حدود الحاوية من التحاضن ضد حدود إطار العرض ، حتى عندما يكون إطار العرض أضيق من الحد الأقصى لعرض الحاوية.
percent استخدام النسب المئوية عند إعداد الحاويات
أنا ، بعد نشر النسخة الأصلية من هذه المادة ، كتبت عن استخدام النسب المئوية عند إعداد الحاويات. على وجه الخصوص ، نحن نتحدث عن استخدام خاصية CSS
max-width: 90%بدلاً من استخدام الخصائص padding-leftو padding-right.
استخدام النسب المئوية عند إعداد الحاويات والظروف حيث الحد الأقصى للعرض: 90٪ يؤدي إلى نتائج مقبولة وغير مقبولة
بينما نجح هذا النهج بشكل جيد ، اتضح أن 90٪ من عرض إطار العرض كان كثيرًا على الشاشات الكبيرة. ولكن يمكن حل هذه المشكلة باستخدام استعلام الوسائط:
.wrapper {
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
/* - */
@media (min-width: 1170px) {
.wrapper {
max-width: 1170px;
}
}
ونتيجة لذلك ، اتضح أنه باستخدام قيمة النسبة المئوية ، فإننا نعقد رمز CSS. من أجل إنقاذ أنفسنا من الاضطرار إلى تطبيق استعلام وسائط ، يمكننا استخدام قيمة ثابتة للعرض. حل آخر مقترح في هذه التغريدة هو تطبيق مجموعة من الخصائص
width: 90%و max-width: 1170px:
.wrapper {
width: 90%;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
هذا نهج مثير للاهتمام ، لكنني أفضل تعديل الحشو بنفسي بدلاً من الاعتماد على النسب المئوية.
display خاصية عرض عنصر الحاوية
نظرًا لأن العلامات تستخدم لأنماط الحاويات
<div>، فإن الحاويات ، بشكل افتراضي ، هي عناصر كتلة. ماذا لو احتجت لتغيير الخاصية الحاوية displayل grid، من أجل وضع الأطفال في الشبكة؟
لا أنصح بذلك لأنه يتعارض مع فكرة الفصل بين المخاوف. عنصر الحاوية ، "غلاف" ، هو كيان الغرض منه "التفاف" العناصر الأخرى. إذا كنت بحاجة إلى وضع العناصر الفرعية للحاوية في الشبكة ، فمن الجدير إضافة عنصر آخر إلى الحاوية
<div>، بما في ذلك العناصر الأخرى التي تم displayتعيين خصائصها علىgrid... سيكون الأمر أسهل وأكثر نظافة من إعداد الشبكة بالحاوية الرئيسية. هذا النهج ، بالإضافة إلى ذلك ، يسمح لنا أن نقول أنه في المستقبل سيكون المشروع الذي يتم استخدامه فيه أسهل في الدعم.
لنأخذ حاوية مثل هذه:
<div class="wrapper">
<!-- -->
</div>
display: gridلا يوصى بتعيين
خاصية مثل هذا العنصر لأنه يمكن استخدام هذا العنصر على صفحات مختلفة. يمكن أن تؤدي إعداداته الخاصة عن طريق الخطأ إلى انتهاك وضع العناصر. فيما يلي إعداد الحاوية المؤسف:
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 16px;
}
سيكون من الأفضل استخدام كود HTML التالي:
<div class="wrapper">
<div class="featured-news">
<!-- , -->
</div>
</div>
يمكن تصميم عنصر مع فئة
featured-newsعلى النحو التالي:
.featured-news {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 16px;
}
لاحظ أنه في هذا المثال ، استخدمنا عنصرًا منفصلاً
<div>كغلاف آخر لمحتويات الصفحة. يمكنك تجاهل أسماء الفئات المستخدمة هنا. لحل مثل هذه المشكلة ، يمكنك اختيار أسماء أفضل للفصول المناسبة للاستخدام المتكرر على صفحات مختلفة من الموقع. ومع ذلك ، فإن تسمية كيانات CSS خارج نطاق هذه المقالة.
justضبط الهوامش التي تفصل بين عناصر الحاوية
هل تذكر كيف لم أوصي باستخدام الطريقة المختصرة لتحديد الهوامش لتوسيط عنصر الحاوية أعلاه؟ كان حول هذا التصميم:
.wrapper {
margin: 0 auto;
}
في حين أن هذا أسلوب عمل تمامًا ، إذا كانت هناك عناصر مجمعة متعددة على الصفحة ويجب أن تكون هناك مسافة بينهما ، فإن تطبيق هذا النمط يمكن أن يكون مربكًا. إذا قررت ، لسبب ما ، توضيح نمط عنصر الغلاف باستخدام فئة إضافية ، فإن تعيين المسافة البادئة الخارجية باستخدام هذه الفئة لن يعطي النتائج المرجوة بسبب خصوصية حساب قيم خصوصية قواعد CSS.
أعني مخطط الأنماط التالي:
.wrapper-variation {
margin-top: 50px;
}
لن يتم تطبيق خاصية
marginعنصر من فئة .wrapper-variationعلى العنصر لأنه يتجاوز الخاصية margin: 0 auto. يتجاوز النموذج القصير لتعيين خاصية شكله الكامل. لتجنب ذلك ، يوصى في مثل هذه الحالات باستخدام الشكل الكامل لخصائص التسجيل. أي ، عند تصميم عنصر مع فئة ، .wrapperتحتاج إلى القيام بذلك:
.wrapper {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
الآن دعونا نتحدث عن وضع حشو العناصر. عند العمل على كل مشروع من مشروعاتي ، أقوم بإعداد مجموعة من الفئات المساعدة لتحديد الهوامش الداخلية والخارجية. أستخدمها أينما احتجت إليها. نلقي نظرة على الشكل التالي.
الحاوية المستقلة والحاوية داخل عنصر
<section>
إليك HTML:
<div class="wrapper mb-5"></div>
<section>
<div class="wrapper"></div>
</section>
<div class="wrapper"></div>
إليك النمط:
.mb-5 {
margin-bottom: 3rem !important;
}
باستخدام هذا النهج ، يظل رمز CSS للعنصر المجمّع دون تغيير ، ويتم تعديل التباعد بين العناصر باستخدام فئات مساعد CSS. هنا قد يكون لديك سؤال حول سبب حاجتي لاستخدام العديد من الحاويات على الصفحة ، عندما يمكنني الحصول على واحدة. يرجى ملاحظة أنه في كود HTML أعلاه يوجد عنصر
<section>يقع بين عنصري غلاف.
هذا هو المكان الذي يعمل فيه التعديل بشكل جيد
!important. والحقيقة هي أن معنى استخدام الفئات المساعدة هو فرض تغيير قيم الملكية. يمكنك تحقيق هذا السلوك مع !important.
حاوية داخل عنصر ملء الشاشة
في بعض الحالات ، يحدث أن هناك عنصر
<section>بخلفية تشغل 100٪ من عرض إطار العرض ، وداخل هذا العنصر يوجد عنصر حاوية. هذا المخطط مشابه للمخطط الذي درسناه في القسم السابق.
قد تبدو بنية HTML للصفحة في مثل هذه الحالة كما يلي:
<section>
<div class="wrapper"></div>
</section>
<section>
<div class="wrapper"></div>
</section>
<section>يشغل
العنصر 100٪ من عرض إطار العرض. يمكنك تعيين صورة خلفية أو لون خلفية لهذا العنصر. تمنع الحاوية الموجودة داخل هذا العنصر المحتوى من احتلال عرض إطار العرض بالكامل.
<section>يشغل العنصر عرض منطقة العرض بالكامل ، وتحد الحاوية من المساحة التي يتم فيها عرض محتويات الصفحة.
وفي هذا الشكل ، يحتوي العنصر على
<section>صورة خلفية. يمتد عبر عرض إطار العرض بالكامل ، ويقتصر محتوى الصفحة المعروض في الحاوية على عرض الحاوية.
هل أحتاج إلى إرفاق محتويات الكتلة العلوية للصفحة في الحاوية؟
هل أحتاج إلى حاوية لتصميم الكتلة العلوية للصفحة ، والتي تسمى غالبًا "قسم البطل"؟ يعتمد على كل حالة محددة. دعنا نستكشف اثنين من الأساليب الأكثر شيوعًا لتصميم نمط الصفحة.
يتضمن النهج الأول توسيط محتويات الكتلة وتحديد عرض المحتوى.
عرض محتوى الكتلة العلوية للصفحة محدود
الخيار الثاني يوفر توزيع المحتوى داخل الكتلة العلوية.
يتم توزيع المحتوى داخل الكتلة العلوية للصفحة. من
أجل فهم هذه الأنماط بشكل أفضل ، أقترح فحص ميزات هيكلها الداخلي.
الكتلة العلوية للصفحة التي يتم توسيط محتواها
أثناء تصميم الكتلة العلوية للصفحة ، قد ترغب في وضع
<section>بعض المحتوى في العنصر المقابل ومحاذاة المركز إلى المركز دون استخدام عنصر الحاوية.
<section class="hero">
<h2><font color="#3AC1EF">How to make bread at home</font></h2>
<p>....</p>
<p><a href="/sign-up">Sign up</a></p>
</section>
عند تصميم رمز HTML أعلاه ، يمكنك توسيط محتوياته في المركز باستخدام الخاصية
text-align:
.hero { text-align: center; }
مع هذا النهج ، سيبدو كل شيء لائقًا حتى يتغير عرض نافذة المتصفح. إليك تفصيل للمشكلات التي يمكن أن يسببها هذا.
المشكلة رقم 1: يتم الضغط على محتوى القسم مقابل حواف إطار العرض
نظرًا لأنه في هذا المثال ، لم يتم تكوين المساحة المتروكة اليمنى واليسرى ، سيتم وضع محتوى القسم بالقرب من حدود هذا القسم. يؤدي هذا إلى إزعاج المستخدمين ، حيث سيكون من الصعب عليهم قراءة محتويات الجزء العلوي من الصفحة.
يتم الضغط على محتويات القسم إلى حوافه.
▍ المشكلة رقم 2: أسطر نصية طويلة جدًا على الشاشات الكبيرة
على الشاشات الكبيرة ،
<p>قد يكون من الصعب جدًا قراءة النص الذي تم وضع علامة عليه نظرًا لأن طول الفقرة طويل جدًا. وفقًا لهذا المستند ، فإن عدد الأحرف الموصى به في كل سطر هو 45-75. أطوال الخطوط خارج هذا النطاق تعقد القراءة.
طول الخط طويل جداً
olvingحل المشكلات
لحل المشاكل المذكورة أعلاه ، يمكنك استخدام حاوية. سيسمح لك بالحفاظ على طول السلسلة ضمن حدود معقولة ، ويمنع المحتوى من الالتزام بإحكام بحدود القسم.
<section class="hero">
<div class="hero__wrapper">
<h2><font color="#3AC1EF">How to make bread at home</font></h2>
<p>...</p>
<p><a href="/sign-up">Sign up</a></p>
</div>
</section>
هنا ، عند إعداد الحاوية ، أستخدم اسم الفئة
hero__wrapper، لأن هذه الحاوية ، على الأرجح ، ستكون فريدة ولن يتم استخدامها إلا لتزيين الجزء العلوي من الصفحة. لذلك ، على وجه الخصوص ، يمكن أن يكون عرض الحاوية أصغر من عرض الحاويات المستخدمة في الظروف العادية.
.hero__wrapper {
max-width: 720px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
يمكنك استخدام أي نهج مناسب لتوسيط محتوى الجزء العلوي من الصفحة. كل هذا يتوقف على كل حالة محددة. في هذا المثال ، لمحاذاة المحتوى ، يكفي استخدام الخاصية
text-align: center.
كيف تتم محاذاة الحاوية: في الوسط أو على يسار الصفحة؟
لا يمكنني تقديم إجابة محددة على هذا السؤال ، ولكني رأيت مواقع تتركز فيها الحاويات المستخدمة على شاشات الكمبيوتر المحمول ومحاذاتها إلى اليسار على شاشات سطح المكتب.
مثال على هذا الموقع هو Techcrunch. يرجى ملاحظة أنه على شاشة الكمبيوتر المكتبي ، يتم محاذاة محتوى الموقع إلى الحافة اليسرى للصفحة.
أحب محاذاة المحتوى على شاشة الكمبيوتر المحمول وعلى كمبيوتر سطح المكتب ، أحب العمل مع المواقع التي تتم محاذاة محتواها للمركز. تحتوي صفحات هذه المواقع على مسافات بادئة يسارية ومتساوية. ولكن حقيقة محاذاة محتوى بعض المواقع إلى يسار الصفحة ، قد يكون هناك سبب لا أدركه. إذا كنت تعرف سبب حدوث ذلك ، فأخبرني بذلك.
استخدام متغيرات CSS لإنشاء خيارات تصميم حاوية مختلفة
نادرًا ما يحدث أن جميع عناصر الحاوية المستخدمة في المشروع لها نفس العرض. يمكن أن يختلف عرض الحاوية وفقًا لمحتويات الحاوية وكيفية استخدامها. يتم توفير مرونة كبيرة في العمل مع الحاويات باستخدام متغيرات CSS. وهو أيضًا نهج حديث للغاية لتكوين الحاويات. لنلقي نظرة على مثال.
إليك HTML للحاوية:
<div class="wrapper"></div>
إليك النمط:
.wrapper {
max-width: var(--wrapper-width, 1170px);
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
إذا قرأت كود CSS بعناية ، فقد تلاحظ أنه
var()تم تمرير قيمتين: الأولى متغيرة --wrapper-width، والثانية قيمة عادية 1170px. يتم حجز القيمة الثانية. معنى وجوده هو أنه سيتم استخدامه إذا كانت قيمة المتغير --wrapper-widthغير محددة.
ماذا تعني؟ وهذا يعني أن لدينا في أيدينا أداة لإنشاء أنواع مختلفة من عناصر الغلاف بسبب إمكانية إعادة تعريف قيمة المتغير
--wrapper-width. تبدو هكذا:
<div class="wrapper" style="--wrapper-width: 720px"></div>
بفضل هذا النهج ، تمكنت من إنشاء حاوية خاصة دون اللجوء إلى الإجراءات التالية:
- إضافة فصل جديد للعنصر.
- نسخ ونسخ الأنماط الموجودة.
سيكون من الأسهل الحفاظ على هذا العنصر في المستقبل. بالإضافة إلى ذلك ، فإنه يسهل التخصيص باستخدام أدوات مطور المتصفح.
إذا لم تعجبك هذه الطريقة لأنها تستخدم نمطًا مضمنًا لتجاوز قيمة متغير CSS ، يمكنك بسهولة حل هذه المشكلة عن طريق إضافة فئة جديدة إلى العنصر. على سبيل المثال ، كما هو موضح أدناه.
إليك ترميز HTML:
<div class="wrapper wrapper--small"></div>
هكذا يبدو النمط:
.wrapper--small {
--wrapper-width: 720px;
/* . */
}
يمكنك العثور على مثال عملي هنا.
باستخدام العرض: المحتويات
أولاً ، دعني أتحدث قليلاً عن قيمة
contentsالعقار display. كل عنصر في CSS هو كتلة. تحتوي هذه الكتلة على شيء ؛ لها هوامش داخلية وخارجية وحدود. يؤدي استخدام خاصية display: contentsإلى إزالة الكتلة التي تم تعيينها إليها من تدفق المستند. يمكن اعتبار هذا على أنه إزالة علامات العلامات الافتتاحية والختامية.
إليك الترميز:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<!-- -->
</div>
</header>
إليك النمط:
.site-header__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
عنصر الالتفاف
عند تنفيذ شيء يشبه هذا المثال ، قد يكون من الضروري جعل قسم العنوان من الموقع يمتد إلى عرض الصفحة بالكامل بحيث لا يقتصر عرضه على خصائص الحاوية.
.site-header__wrapper {
display: contents;
}
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
هنا ، بسبب استخدام الخاصية
display: contents، سيتم إخفاء عنصر الغلاف كما كان. الآن عندما display: flexيتم تطبيق خاصية على عنصر مع فئة .site-header، يصبح أطفال الحاوية أطفالًا .site-header.
يأخذ رأس الموقع ، في العرض ، كل المساحة المتاحة
خلفية مستجيبة ومحتوى ثابت
يوفر كتاب CSS Secrets تقنية مثيرة للاهتمام يمكن استخدامها لتصميم أقسام ذات خلفية متجاوبة (خلفية يمكن أن تشغل العرض الكامل لإطار العرض) وعنصر حاوية للمحتوى. دعونا نلقي نظرة على الطريقة المعتادة لإنشاء تخطيطات لمثل هذه الأقسام.
إليك ترميز HTML:
<section>
<div class="wrapper"></div>
</section>
هنا الأنماط:
section {
background-color: #ccc;
}
.wrapper {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
هنا، وقيم الخصائص
margin-left: autoو margin-right: autoتحسب عن طريق أخذ نصف عرض مساحة العرض وطرح عرض المحتوى منه. يمكن تحقيق الشيء نفسه باستخدام المسافة البادئة.
حشوة داخلية
section {
padding: 1rem calc(50% - 585px);
}
لكن المهمة لم تنجز بعد. على الأجهزة المحمولة ، سيتم ضغط المحتوى على حواف إطار العرض. يمكنك حل هذه المشكلة ، على سبيل المثال ، مثل:
section {
padding: 1rem;
}
@media (min-width: 1170px) {
section {
padding: 1rem calc(50% - 585px);
}
}
كحل بديل ، يمكنك اقتراح استخدام وظيفة CSS جديدة
max(). باستخدامها ، نقوم بتعيين الحد الأدنى لحجم المساحة الداخلية المتساوية 1rem، وعندما يتم تمرير القيمة الثانية إليها ، نحدد التعبير 50% — 585px.
section {
padding: 1rem max(1rem, (50% - 585px));
}
إذا كنت مهتمًا بالتفاصيل حول وظائف CSS
min()، max()و clamp()- إليك الأشياء الخاصة بي حول هذا الموضوع.
كيف تصمم عناصر الحاوية؟
