CSS فریم ورک

CSS فریم ورک

تمام عناصر HTML می‌توانند به عنوان مربع در نظر گرفته شوند. در CSS، هنگام صحبت از طراحی و ترتیب، اصطلاحی مانند "مدل جعبه" یا "مدل قاب" استفاده می‌شود.

سی ایس ایس کا کاٹ ماڈل، ہر ایک ایچ تی امیلی عناصر کا کاٹ بنایا جاتا ہے۔ یہ شامل ہیں: بیرونی فضائیابی، فریم، اندرونی فضائیابی اور واقف مطلب۔ تصویر درج ذیل، کاٹ ماڈل کو دکھاتا ہے:

CSS فریم ورک

مختلف حصوں کا تعارف:

  • مطلب - کاٹ کا مطلب، جس میں متن اور تصاویر دکھائی جاتی ہیں،
  • اندرونی فضائیابی - مطلب کے گرد کا علاقہ مکمل کریں، اندرونی فضائیابی شفاف ہیں،
  • فریم - اندرونی فضائیابی اور مطلب کے گرد فریم،
  • بیرونی فضائیابی - بیرونی حاشیے کے باہر کا علاقہ مکمل کریں، بیرونی فضائیابی شفاف ہیں۔

کاٹ ماڈل، عناصر کے اطراف میں فریم جوڑنا، اور عنصر کے درمیان کا فاصلہ معین کرنا دیتی ہے۔

عنصر کا کاٹ کا سب سے اندرونی حصہ، واقف مطلب ہے، مطلب کی گردی میں اندرونی فضائیابی موجود ہیں، اندرونی فضائیابی کی حاشیے، فریم ہیں، فریم کے باہر بیرونی فضائیابی ہیں، جو اصل طور پر شفاف ہوتی ہیں، لہذا ان کی پس منظر پر کوئی عنصر کو رکھ نہیں سکتا۔

نکات:پس منظر، مطلب، اندرونی فضائیابی، فریم کے ذریعے تعین کی جاتی ہے۔

اندرونی فضائیابی، فریم اور بیرونی فضائیابی دونوں قابل اختیار ہیں، اعداد اشاریہ کا مطلب صفر ہوتا ہے۔ لیکن، کئی عناصر، یوزر ایجنسی کی سٹائل شیٹ کے ذریعے بیرونی فضائیابی اور اندرونی فضائیابی کو رکھا جاتا ہے۔ آپ کو اس عناصر کی margin اور padding کو صفر مقرر کرکے اس کی بروئر کی سٹائل کو ختم کرسکتے ہیں، جس کا طور پر الگ الگ یا عام انتخاب کی جاسکتی ہیں:

* {
  margin: 0;
  padding: 0;
}

سی ایس ایس میں، 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;
}

آزمایش کنید

عنصر کی چوڑائی اور اونچائی

تمام مرورکرنوں میں عنصر کی چوڑائی اور اونچائی کو صحیح طور پر تنظیم کرنے کے لئے، آپ کو کاٹ کے ماڈل کا کام کس طرح ہوتا ہے، جاننا چاہئے۔

تعلیمی نکات:عنصر کی width اور height کی تنظیم کے لئے، صرف مطلب کی علاقے کی چوڑائی اور اونچائی کو سی ایس ایس میں تنظیم کریں۔ عنصر کی پورے حجم کو محاسبه کرنے کے لئے، اندرونی فضائیابی، فریم اور بیرونی فضائیابی کو بھی جمع کیا جانا چاہئے۔

مثال

<div> عناصر کی کل چوڑائی 350px رہے گی:

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

آزمایش کنید

محاسبه به این صورت است:

320px(عرض)
+ 20px (فضای داخلی چپ + راست)
+ 10px (حاشیه چپ + راست)
+ 0px (فضای بیرونی چپ + راست)
= 350px

عرض کل عنصر باید به این صورت محاسبه شود:

عرض کل عنصر = عرض + فضای داخلی چپ + فضای داخلی راست + حاشیه چپ + حاشیه راست + فضای بیرونی چپ + فضای بیرونی راست

ارتفاع کل عنصر باید به این صورت محاسبه شود:

ارتفاع کل عنصر = ارتفاع + فضای داخلی بالا + فضای داخلی پایین + حاشیه بالا + حاشیه پایین + فضای بیرونی بالا + فضای بیرونی پایین