جعبه مدل CSS با مثال توضیح داده شده است.

امروز می خواهم مدل جعبه را با کمک CSS پس زمینه-کلیپ و خاصیت پس زمینه مبدا توضیح دهم. پس زمینه-کلیپ و پس زمینه منشا چیست؟ برای چه مواردی استفاده می شود و تفاوت بین هر یک از آنها چیست؟

خوب ، این سوالی است که ذهن مبتدی تا سطح متوسط ​​برنامه نویسان وب دارد. برخی از آنها تا حدودی با آن آشنا هستند و برخی دیگر هنوز هم تعجب می کنند که می توانند از این 2 خاصیت استفاده کنند.

خوب ، قبل از اینکه بتوانید این 2 ویژگی را درک کنید ، باید مدل جعبه CSS را درک کنید. بنابراین ، بیایید با آن شروع کنیم.

ابتدا یک "div" ایجاد کنید و برچسب "p" را درون آن قرار دهید ،

برخی از مطالب موجود در اینجا ...

و سپس به آن سبک دهید

همانطور که می بینید ما عنصر "div" به هیچ وجه حاشیه ای و حاشیه ای نداده ایم ، بنابراین عنصر "div" هنوز هیچ جعبه بالشتک یا حاشیه ای ندارد و کل کادر در نظر گرفته شده است.

همانطور که در تصویر زیر نشان داده شده است.

می توانید با باز کردن ابزار توسعه دهنده Chrome ، خود را بررسی کنید

اکنون مقداری از 50px از بالای ، پایین ، چپ ، راست را به "div" بدهید.

div {
 زمینه: # 666؛
 عرض: 300px؛
 ارتفاع: 250px؛
 بالشتک: 50px؛ // بالشتک از بالا ، پایین ، چپ ، راست
}

اکنون جعبه بالشتک 50px را داریم و کادر محتوا همانطور که در تصویر زیر نشان داده شده است ، درون جعبه لنت است.

در حال حاضر ، ما در نهایت جعبه بالشتک از 50px داریم

اکنون بیایید عرض را از عنصر "p" حذف کنیم ، بنابراین می توان به عرض کامل جعبه محتوا دست یافت.

پ{
 زمینه: قرمز؛
}

نتیجه را می توانید در تصویر زیر مشاهده کنید.

عنصر ‘P to باعث می شود تا عرض کامل کادر محتوا را بگیرد

اکنون ، بیایید بگوییم که شما یک تصویر پس زمینه را به "div" اضافه می کنید و اندازه پس زمینه آن را "حاوی" می گذارید تا اندازه آن را درون جعبه تنظیم کند و همچنین به آن مرز بدهید ، زیرا بدون مرز هیچ جعبه مرزی وجود ندارد.

div {
 پیش زمینه: # 666 url ('https://bit.ly/2gzkSPX') بدون تکرار؛
 اندازه پس زمینه: حاوی؛
 مرز: 10px سیاه و سفید جامد؛
 عرض: 300px؛
 ارتفاع: 250px؛
 بالشتک: 50px؛
}

سپس مانند شکل زیر در شکل زیر ظاهر خواهد شد.

همانطور که در تصویر نشان داده شده است ، می توانید آنرا بررسی کنید

به طور پیش فرض ، مبدا پس زمینه div روی جعبه padding تنظیم می شود و این بدان معنی است که تصویر از جعبه حاشیه شروع می شود ، و همچنین در جعبه محتوا قابل مشاهده خواهد بود زیرا جعبه محتوا درون جعبه padding است.

پس زمینه-مبدا: padding-box؛ /* مقدار پیش فرض */

بیایید بگوییم که می خواهیم تصویری از جعبه padding شروع شود ، اما ما فقط می خواهیم بخشی از تصویر را که درون جعبه محتوا قرار دارد فاش کنیم ، بنابراین باید کلیپ پس زمینه div را در جعبه محتوا تنظیم کنیم.

div {
 پیش زمینه: # 666 url ('https://bit.ly/2gzkSPX') بدون تکرار؛
 اندازه پس زمینه: حاوی؛
 پس زمینه-کلیپ: جعبه محتوا؛
 مرز: 10px سیاه و سفید جامد؛
 عرض: 300px؛
 ارتفاع: 250px؛
 بالشتک: 50px؛
}

در تصویر زیر می توانید نتایج موجود در تصویر را مشاهده کنید که فقط بخشی از تصویر که درون جعبه محتوا قابل مشاهده است اما تصویر از جعبه padding شروع می شود ، زیرا این مقدار پیش فرض "پس زمینه-orgin" است.

همانطور که می بینید فقط بخشی از تصویر قابل مشاهده است که درون جعبه محتوا و استراحت پنهان است

حال ، بخشی از تصویر پس زمینه که درون جعبه padding قرار دارد را نیز فاش می کنیم ، برای این کار باید کلیپ پس زمینه div را به جعبه padding برگردانیم که قبل از تغییر آن مقدار پیش فرض بود.

div {
 پیش زمینه: # 666 url ('https://bit.ly/2gzkSPX') بدون تکرار؛
 اندازه پس زمینه: حاوی؛
 Background-clip: padding-box؛
 مرز: 10px سیاه و سفید جامد؛
 عرض: 300px؛
 ارتفاع: 250px؛
 بالشتک: 50px؛
}

در نتایج زیر می بینید که اکنون بخشی از تصویر که درون جعبه لنت قرار می گیرد نیز قابل مشاهده است زیرا ما پس زمینه-کلیپ را به جعبه بالشتک تنظیم کرده ایم.

اکنون می توانیم بخشی از تصویر را که درون جعبه لنت قرار دارد ، ببینیم

حال ، مطمئن شویم که تصویر پس زمینه div ما از جعبه حاشیه شروع می شود و برای این کار ما باید به دیوان خود یک شکل پس زمینه مرز جعبه بدهیم. اما اول ، اجازه دهید اندازه مرز را افزایش دهیم تا متوجه تفاوت آن شویم.

div {
 پیش زمینه: # 666 url ('https://bit.ly/2gzkSPX') بدون تکرار؛
 اندازه پس زمینه: حاوی؛
 زمینه-مبدا: جعبه مرزی؛
 Background-clip: padding-box؛
 مرز: 20px سیاه و سفید جامد؛ / * عرض مرز 20px اکنون * /
 عرض: 300px؛
 ارتفاع: 250px؛
 بالشتک: 50px؛
}

همانطور که در تصویر زیر مشاهده می کنید زیرا اکنون تصویر پس زمینه از کادر مرزی شروع می شود ، به همین دلیل بخش کوچکی از تصویر توسط مرز سیاه پوشانده می شود ، به عبارت دیگر بخشی از تصویر در پشت مرز سیاه است.

اکنون تصویر از مرز شروع می شود

حال برای اثبات این نکته که تصویر از مرز شروع می شود و به همین دلیل است که بخش کوچکی از تصویر در پشت مرز سیاه قرار دارد ، اجازه دهید مرز کمی از کدورت را به آن بدهیم تا بتواند محو شود و ما می توانیم بخشی از تصویر را ببینیم که پشت مرز است

div {
 پیش زمینه: # 666 url ('https://bit.ly/2gzkSPX') بدون تکرار؛
 اندازه پس زمینه: حاوی؛
 زمینه-مبدا: جعبه مرزی؛
 Background-clip: padding-box؛
 مرز: 20px جامد rgba (۰ 0 ۰ ،0 ۰ .5 ۵)؛ / * با استفاده از rgba () * /
 عرض: 300px؛
 ارتفاع: 250px؛
 بالشتک: 50px؛
}
در اینجا می توانید تصویر پشت مرز محو را مشاهده کنید

در اینجا می روید ، اکنون می توانید قسمتی از تصویر را ببینید که در پشت مرز است و این نیز نکته من را ثابت می کند که اکنون تصویر از جعبه حاشیه شروع می شود ، زیرا ما پیش زمینه را از جعبه مرزی تنظیم می کنیم.

اکنون که می دانید تفاوت بین زمینه-مبدا و پس زمینه-کلیپ را می دانید و همچنین در مورد مدل CSS جعبه مدل می دانید ، زمان آن رسیده است که شما بروید و با آن چیزهای شگفت انگیز بسازید. #Goodluck

اگر مقاله قبلی من در مورد قابلیت دسترسی به وب را فراموش کرده اید ، پیوندی به این صفحه دارید ، فراموش نکنید که آن را بخوانید. اینجا کلیک کنید