سی ایس ایس نے باکس ماڈل کو مثالوں کے ساتھ سمجھایا۔

آج میں سی ایس ایس کے بیک گراونڈ کلپ اور بیک گراؤنڈ نژاد خصوصیات کا استعمال کرتے ہوئے باکس ماڈل کی وضاحت کرنے جارہا ہوں۔ پس منظر کلپ اور پس منظر کی خصوصیات کیا ہیں؟ انہیں کیوں استعمال کیا جاتا ہے ، اور ان میں سے ہر ایک کے درمیان فرق؟

ٹھیک ہے ، یہ ایک ایسا سوال ہے جو اسٹارٹ اپ دماغوں سے اوسط ویب ڈویلپرز کی طرف جاتا ہے۔ ان میں سے کچھ لوگ اس سے کچھ حد تک واقف ہیں ، اور دیگر حیرت میں ہیں کہ یہ 2 خصوصیات کہاں استعمال کی جاسکتی ہیں۔

ٹھیک ہے ، ان 2 خصوصیات کو سمجھنے سے پہلے ، آپ کو سی ایس ایس باکس ماڈل سمجھنے کی ضرورت ہے۔ تو ، آئیے اس کے ساتھ شروعات کریں۔

پہلے ایک Div تشکیل دیں اور اس کے اندر "p" لیبل رکھیں ،

کچھ مواد یہ ہے ...

اور پھر اسے کچھ اسٹائل دیں۔

div {پس منظر: # 666؛ چوڑائی: 300px؛ اونچائی: 250px؛ } p {چوڑائی: 200px؛ پس منظر: سرخ؛ }

بظاہر ہم نے Div عنصر پر کوئی فلرز یا حدود نہیں ڈالیں ، لہذا Div عنصر کے پاس ابھی تک کوئی خانہ یا فیلڈ نہیں ہے جس کو بھرنے کے ل. ، اور پورا باکس ایک مواد خانہ ہے۔

جیسا کہ نیچے کی تصویر میں دکھایا گیا ہے۔

آپ کروم سافٹ ویئر کھول کر خود کو کھول سکتے ہیں

اب Div کو اوپر ، نیچے ، بائیں ، دائیں سے 50px جگہ دیں۔

div {پس منظر: # 666؛ چوڑائی: 300px؛ اونچائی: 250px؛ بھرنے: 50px؛ // بھریں اوپر ، نیچے ، بائیں ، دائیں}

اب ہمیں 50px بھرنے کی جگہ اور مندرجات خانہ کے اندر ، جیسا کہ ذیل کی تصویر میں دکھایا گیا ہے۔

اب آخر کار ہمارے پاس 50 پکس باکس ہے

اب "p" عنصر سے چوڑائی کو ہٹا دیں تاکہ مشمولات کی پوری چوڑائی لی جا.۔

p {پس منظر: سرخ؛ }

آپ نیچے دی گئی تصویر میں نتیجہ دیکھ سکتے ہیں۔

'P' عنصر جزو کی پوری چوڑائی حاصل کرنے کے ل expand پھیلتا ہے

اب ، ہم یہ کہتے ہیں کہ آپ وال پیپر کو "Div" میں شامل کرتے ہیں اور وال پیپر کو "اندر" سیٹ کرتے ہیں تاکہ اس کے سائز کو باکس میں فٹ کرسکیں ، اور آپ اسے سرحد بھی دیتے ہیں کیونکہ کوئی حد بندی نہیں ہے۔

div {پس منظر: # 666 url ('https://bit.ly/2gzkSPX') دہرایا نہیں گیا ہے؛ پس منظر کے سائز: پر مشتمل ہے؛ بارڈر: 10px ٹھوس سیاہ؛ چوڑائی: 300px؛ اونچائی: 250px؛ بھرنے: 50px؛ }

اس کے بعد نیچے دی گئی تصویر کی طرح نظر آئے گا۔

آپ سافٹ ویئر تیار کرنے والے کے پاس جاکر اور تصویر میں دکھائے جانے والے باکس ماڈل پر کلک کرکے بھی اس کی جانچ کرسکتے ہیں

پہلے سے طے شدہ طور پر ، Div کی اصلیت پیڈنگ باکس میں سرایت کرتی ہے ، شبیہہ حد سے شروع ہوتی ہے اور مشمولات باکس میں ظاہر ہوتا ہے کیونکہ مشمولات باکس بھرنے والے فیلڈ میں ہوتا ہے۔

پس منظر: بھرتی باکس؛ / * پہلے سے طے شدہ قیمت * /

مثال کے طور پر ، ہم شبیہہ بھرنے والے خانہ کے ساتھ شروع کرنا چاہتے ہیں ، لیکن ہم صرف تصویر کے حصے کو مواد کے خانے میں ظاہر کرنا چاہتے ہیں ، اس کے بعد مواد والے خانے میں ڈیو وال پیپر لگائیں۔

div {پس منظر: # 666 url ('https://bit.ly/2gzkSPX') دہرایا نہیں گیا ہے؛ پس منظر کے سائز: پر مشتمل ہے؛ پس منظر کلپ: مواد باکس؛ بارڈر: 10px ٹھوس سیاہ؛ چوڑائی: 300px؛ اونچائی: 250px؛ بھرنے: 50px؛ }

آپ نیچے دی گئی شبیہہ میں نتائج دیکھ سکتے ہیں ، کیوں کہ مشمولات والے خانے میں شبیہہ کا صرف ایک حصہ نظر آتا ہے ، لیکن یہ تصویر فل باکس سے شروع ہوتی ہے کیونکہ "باکس-آرجن" پہلے سے طے شدہ ہے۔

بظاہر ، مواد کے خانے میں تصویر کا صرف وہ حصہ نظر آرہا ہے اور باقی چھپا ہوا ہے

اب ہم وہ حصہ کھولیں جہاں پس منظر کی تصویر پیڈ باکس میں آجائے ، اس کے لئے ہمیں ڈیو وال پیپر پیڈ باکس میں واپس کرنے کی ضرورت ہے ، جو اسے تبدیل کرنے سے پہلے ڈیفالٹ ویلیو تھی۔

div {پس منظر: # 666 url ('https://bit.ly/2gzkSPX') دہرایا نہیں گیا ہے؛ پس منظر کے سائز: پر مشتمل ہے؛ پس منظر کلپ: بھرتی باکس؛ بارڈر: 10px ٹھوس سیاہ؛ چوڑائی: 300px؛ اونچائی: 250px؛ بھرنے: 50px؛ }

جیسا کہ آپ نیچے دیئے گئے نتائج سے دیکھ سکتے ہیں ، اب ہم تصویر کا وہ حصہ بھی دیکھتے ہیں جو پوشاک خانے میں آتا ہے ، کیونکہ ہم نے پس منظر کا کلپ پیڈ باکس میں رکھ دیا ہے۔

اب ہم تصویر کا حصہ تصویر باکس میں بھی دیکھ سکتے ہیں

اب ، یقینی بنائیں کہ ہمارا ڈیو وال پیپر بارڈر باکس سے شروع ہوتا ہے اور اس کے ل، ، ہمیں "ڈیو" پس منظر کو بارڈر باکس کی اصلیت دینے کی ضرورت ہے۔ پہلے ، فرق کو دیکھنے کے ل the بارڈر کا سائز بڑھاؤ۔

div {پس منظر: # 666 url ('https://bit.ly/2gzkSPX') دہرایا نہیں گیا ہے؛ پس منظر کے سائز: پر مشتمل ہے؛ پس منظر کی ابتداء: بارڈر باکس؛ پس منظر کلپ: بھرتی باکس؛ بارڈر: 20px ٹھوس سیاہ؛ / * چوڑائی اب 20px * / چوڑائی: 300px؛ اونچائی: 250px؛ بھرنے: 50px؛ }

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

اب تصویر چیک باکس سے شروع ہوتی ہے

اب ، میری اس بات کو ثابت کرنے کے لئے کہ شبیہہ کسی سرحد کے خانے سے شروع ہوتی ہے اور اسی وجہ سے اس تصویر کا ایک چھوٹا سا حصہ سیاہ سرحد کے پیچھے ہے ، آئیے سرحد کو تھوڑا سا دھندلا بنا دیں تاکہ یہ دھندلا ہوجائے اور ہم تصویر کے کس حصے کو دیکھ سکیں۔ سرحد سے پرے

div {پس منظر: # 666 url ('https://bit.ly/2gzkSPX') دہرایا نہیں گیا ہے؛ پس منظر کے سائز: پر مشتمل ہے؛ پس منظر کی ابتداء: بارڈر باکس؛ پس منظر کلپ: بھرتی باکس؛ بارڈر: 20px solid rgba (0،0،0،0،5)؛ / * چوڑائی rgba استعمال کرتے ہوئے () * /: 300px؛ اونچائی: 250px؛ بھرنے: 50px؛ }
یہاں آپ بیہوش بارڈر کے پیچھے کی تصویر دیکھ سکتے ہیں

اب ، آپ اب تصویر کے حصے کو سرحد کے پیچھے دیکھ سکتے ہیں ، اور اس سے میری بات ثابت ہوتی ہے کہ شبیہہ سرحد کے ساتھ ہی شروع ہوتی ہے ، کیونکہ ہم نے پس منظر کا پس منظر بارڈر ونڈو پر رکھا ہے۔

اب جب آپ پس منظر اور کلپ آرٹ میں فرق سیکھ چکے ہیں اور سی ایس ایس باکس ماڈل کے بارے میں بھی جانتے ہو ، اب وقت آگیا ہے کہ ہم وہاں پہنچیں اور اس کے ساتھ کچھ عمدہ تخلیق کریں۔ # گوڈلک

اگر آپ انٹرنیٹ تک رسائی سے متعلق میرا سابقہ ​​مضمون کھو بیٹھے ہیں تو ، لنک یہاں ہے ، لہذا اسے پڑھنا نہ بھولیں۔ یہاں کلک کریں