সিএসএস পডকাস্ট - 001: বক্স মডেল
বলুন আপনার কাছে এই বিট এইচটিএমএল আছে:
<p>I am a paragraph of text that has a few words in it.</p>
তারপর আপনি এটির জন্য এই CSS লিখুন:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
বিষয়বস্তু আপনার নির্দিষ্ট করা 100px এর পরিবর্তে 142px চওড়া হয় এবং এটি আপনার উপাদান থেকে বেরিয়ে আসে। কেন এমন হল?
বক্স মডেল হল CSS এর মূল ভিত্তি। বক্স মডেল কীভাবে কাজ করে, এটি কীভাবে CSS-এর অন্যান্য দিকগুলির দ্বারা প্রভাবিত হয় এবং গুরুত্বপূর্ণভাবে, আপনি কীভাবে এটি নিয়ন্ত্রণ করতে পারেন তা বোঝা আপনাকে আরও অনুমানযোগ্য CSS লিখতে সাহায্য করতে পারে।
এটি মনে রাখা গুরুত্বপূর্ণ যে CSS দ্বারা প্রদর্শিত সবকিছুই একটি বাক্স, এমনকি যদি এটি শুধুমাত্র কিছু পাঠ্যই হয়, অথবা একটি border-radius থাকে যা এটিকে একটি বৃত্তের মতো দেখায়।
বিষয়বস্তু এবং আকার
display মান, তাদের সেট ডাইমেনশন এবং এতে থাকা বিষয়বস্তুর উপর ভিত্তি করে বক্সের আচরণ আলাদা। এই বিষয়বস্তু প্লেইন টেক্সট হতে পারে, বা চাইল্ড এলিমেন্ট দ্বারা তৈরি আরও বাক্স হতে পারে। যেভাবেই হোক, বিষয়বস্তু ডিফল্টরূপে বাক্সের আকারকে প্রভাবিত করে।
আপনি এটিকে বাহ্যিক আকার ব্যবহার করে নিয়ন্ত্রণ করতে পারেন, অথবা আপনি সামগ্রীর আকারের উপর ভিত্তি করে ব্রাউজারকে আপনার জন্য সিদ্ধান্ত নিতে দিতে অন্তর্নিহিত আকার ব্যবহার করতে পারেন৷
এখানে একটি মৌলিক ডেমো যা পার্থক্য ব্যাখ্যা করে:
ডেমোতে নির্দিষ্ট মাত্রা এবং একটি পুরু বর্ডার সহ একটি বাক্সে "CSS is awesome" শব্দ রয়েছে৷ কারণ বাক্সটির একটি নির্দিষ্ট প্রস্থ রয়েছে, এটি বাহ্যিক আকারের। এর মানে এটি তার চাইল্ড কন্টেন্টের আকার নিয়ন্ত্রণ করে। যাইহোক, "অসাধারণ" শব্দটি বক্সের জন্য অনেক বড়, তাই এটি প্যারেন্ট বক্সের সীমানা বাক্সের বাইরে উপচে পড়ে (এ বিষয়ে পরে আরও)। এই ওভারফ্লো রোধ করার একটি উপায় হল প্রস্থ নির্ধারণ না করে বা এই ক্ষেত্রে, width min-content সেট করে বাক্সটিকে অন্তর্নিহিতভাবে আকার দেওয়া। min-content কীওয়ার্ডটি বক্সটিকে তার বিষয়বস্তুর অন্তর্নিহিত ন্যূনতম প্রস্থের মতো প্রশস্ত হতে বলে (শব্দটি "অসাধারণ")। এটি বাক্সটিকে পাঠ্যের চারপাশে পুরোপুরি ফিট করতে দেয়।
এখানে একটি আরও জটিল উদাহরণ রয়েছে যা বাস্তব সামগ্রীতে বিভিন্ন আকারের প্রভাব দেখায়:
বাহ্যিক সাইজিং আপনাকে বাহ্যিক সাইজিংয়ের সাথে কীভাবে আরও নিয়ন্ত্রণ দেয় এবং অন্তর্নিহিত মাপগুলি সামগ্রীকে আরও নিয়ন্ত্রণ দেয় তা দেখতে অভ্যন্তরীণ সাইজিং চালু এবং বন্ধ করুন৷ প্রভাব দেখতে কার্ডে পাঠ্যের কয়েকটি বাক্য যোগ করুন। যখন এই উপাদানটির বাহ্যিক আকার থাকে, তখন এটি ওভারফ্লো হওয়ার আগে আপনি কতটা বিষয়বস্তু যোগ করতে পারেন তার একটি সীমা থাকে, কিন্তু যখন অভ্যন্তরীণ আকার টগল করা হয় তখন এটি ঘটে না।
ডিফল্টরূপে, এই উপাদানটির প্রতিটির 400px width এবং height সেট করা আছে। এই মাত্রাগুলি উপাদানের ভিতরের সমস্ত কিছুকে কঠোর সীমানা দেয়, যা বক্সের জন্য বিষয়বস্তু খুব বড় না হলে সম্মানিত হয়। আপনি বাক্সের উচ্চতা অতিক্রম করে এমন কিছুতে ফুলের ছবির নীচের ক্যাপশনটি পরিবর্তন করে এটি কার্যকরভাবে দেখতে পারেন।
মূল শব্দ: ওভারফ্লো ঘটে যখন বিষয়বস্তুটি যে বাক্সে রয়েছে তার জন্য খুব বড় হয়৷ overflow বৈশিষ্ট্য ব্যবহার করে একটি উপাদান কীভাবে ওভারফ্লো সামগ্রী পরিচালনা করে তা আপনি পরিচালনা করতে পারেন৷
অভ্যন্তরীণ আকারে স্যুইচ করা ব্রাউজারকে বাক্সের সামগ্রীর আকারের উপর ভিত্তি করে আপনার জন্য সিদ্ধান্ত নিতে দেয়৷ এটি ওভারফ্লো হওয়ার সম্ভাবনা অনেক কম করে কারণ বক্সটি তার বিষয়বস্তুর সাথে আকার পরিবর্তন করে।
এটা মনে রাখা গুরুত্বপূর্ণ যে অভ্যন্তরীণ সাইজিং হল ব্রাউজারের ডিফল্ট আচরণ, এবং এটি সাধারণত বহিরাগত সাইজিংয়ের চেয়ে অনেক বেশি নমনীয়তা প্রদান করে।
বক্স মডেলের এলাকা
বাক্সগুলি স্বতন্ত্র বক্স মডেল এলাকা নিয়ে গঠিত যেগুলি সমস্ত একটি নির্দিষ্ট কাজ করে।
বিষয়বস্তু বাক্স হল সেই এলাকা যেখানে বিষয়বস্তু থাকে। বিষয়বস্তু তার মূলের আকার নিয়ন্ত্রণ করতে পারে, তাই এটি সাধারণত সবচেয়ে পরিবর্তনশীল আকারের এলাকা।
প্যাডিং বক্সটি বিষয়বস্তু বাক্সের চারপাশে থাকে এবং এটি padding বৈশিষ্ট্য দ্বারা তৈরি স্থান। যেহেতু প্যাডিং বাক্সের ভিতরে থাকে, তাই বাক্সের পটভূমিটি যে স্থানটি তৈরি করে তাতে দৃশ্যমান হয়। যদি বাক্সে ওভারফ্লো নিয়ম সেট করা থাকে, যেমন overflow: auto বা overflow: scroll , স্ক্রলবারগুলিও এই স্থানটি দখল করে।
সীমানা বাক্সটি প্যাডিং বক্সকে ঘিরে থাকে এবং এর স্থানটি border মান দ্বারা সংজ্ঞায়িত করা হয়, যা উপাদানটির জন্য একটি ভিজ্যুয়াল ফ্রেম তৈরি করে। উপাদানটির সীমানা প্রান্ত হল আপনি যা দেখতে পাচ্ছেন তার সীমা।
চূড়ান্ত এলাকা, মার্জিন বক্স হল আপনার বক্সের চারপাশের স্থান, বক্সের margin নিয়ম দ্বারা সংজ্ঞায়িত। outline এবং box-shadow মতো বৈশিষ্ট্যগুলিও এই স্থানটি দখল করে কারণ সেগুলি উপাদানের উপরে আঁকা হয় এবং বাক্সের আকারকে প্রভাবিত করে না। একটি বাক্সে আপনার বক্সের 200px এর outline-width পরিবর্তন করা সীমানা প্রান্তের ভিতরে কিছু পরিবর্তন করে না।
একটি দরকারী উপমা
বক্স মডেলটি বোঝা জটিল, তাই আপনি এখন পর্যন্ত যা শিখেছেন তার জন্য এখানে একটি সাদৃশ্য রয়েছে।
এই ডায়াগ্রামে, আপনার তিনটি ছবির ফ্রেম একটি দেয়ালে একে অপরের পাশে মাউন্ট করা আছে। ফ্রেমযুক্ত চিত্রের উপাদানগুলি নিম্নরূপ বক্স মডেলের সাথে মিলে যায়:
- কন্টেন্ট বক্স হল আর্টওয়ার্ক।
- প্যাডিং বক্স হল সাদা মাউন্টিং বোর্ড, ফ্রেম এবং আর্টওয়ার্কের মধ্যে।
- বর্ডার বক্স হল ফ্রেম, আর্টওয়ার্কের জন্য একটি আক্ষরিক সীমানা প্রদান করে।
- মার্জিন বক্স হল ফ্রেমের মধ্যবর্তী স্থান।
- ছায়াটি মার্জিন বাক্সের মতো একই স্থান দখল করে।
বক্স মডেল ডিবাগ করুন
ব্রাউজার DevTools একটি নির্বাচিত বক্সের বক্স মডেল গণনার একটি ভিজ্যুয়ালাইজেশন প্রদান করে, যা আপনাকে বক্স মডেলটি কীভাবে কাজ করে এবং আপনি যে ওয়েবসাইটে কাজ করছেন সেটিকে কীভাবে প্রভাবিত করে তা বুঝতে সাহায্য করতে পারে৷
আপনার নিজের ব্রাউজারে এটি চেষ্টা করুন:
- DevTools খুলুন ।
- একটি উপাদান নির্বাচন করুন .
- বক্স মডেল ডিবাগার দেখান.
বক্স মডেল নিয়ন্ত্রণ
বক্স মডেল কিভাবে নিয়ন্ত্রণ করতে হয় তা বোঝার জন্য, আপনাকে প্রথমে বুঝতে হবে আপনার ব্রাউজারে কী ঘটবে।
প্রতিটি ব্রাউজার এইচটিএমএল নথিতে একটি ব্যবহারকারী এজেন্ট স্টাইল শীট প্রয়োগ করে যা সংজ্ঞায়িত করে যে উপাদানগুলি কীভাবে দেখাবে এবং আচরণ করবে যদি তাদের সংজ্ঞায়িত CSS না থাকে। ইউজার এজেন্ট স্টাইল শীটগুলিতে CSS ব্রাউজারগুলির মধ্যে পরিবর্তিত হয়, তবে বিষয়বস্তু পড়া সহজ করার জন্য তারা বুদ্ধিমান ডিফল্ট প্রদান করে।
একটি বৈশিষ্ট্য ব্যবহারকারী এজেন্ট স্টাইল শীট একটি বাক্সের ডিফল্ট display সেট করে। উদাহরণস্বরূপ, একটি সাধারণ প্রবাহে, একটি <div> উপাদানের ডিফল্ট display মান হল block , একটি <li> list-item একটি ডিফল্ট display মান রয়েছে এবং একটি <span> inline একটি ডিফল্ট display মান রয়েছে।
একটি inline উপাদান একটি ব্লক মার্জিন আছে, কিন্তু অন্যান্য উপাদান এটি সম্মান করে না। inline-block সাথে, অন্যান্য উপাদানগুলি ব্লক মার্জিনকে সম্মান করে, তবে প্রথম উপাদানটি inline উপাদান হিসাবে বেশিরভাগ একই আচরণ বজায় রাখে। একটি block আইটেম ডিফল্টরূপে উপলব্ধ ইনলাইন স্থান পূরণ করে, যেখানে inline এবং inline-block উপাদানগুলি তাদের সামগ্রীর মতোই বড়।
ব্যবহারকারী এজেন্ট স্টাইল শীট box-sizing সেট করে, যা একটি বাক্সকে তার বক্সের আকার কীভাবে গণনা করতে হয় তা বলে। ডিফল্টরূপে, সমস্ত উপাদানের নিম্নলিখিত ব্যবহারকারী এজেন্ট শৈলী থাকে: box-sizing: content-box; . এর মানে হল যে আপনি যখন width এবং height মতো মাত্রাগুলি সেট করেন, সেই মাত্রাগুলি সামগ্রী বাক্সে প্রযোজ্য হয়৷ যদি আপনি padding এবং border সেট করেন, তাহলে এই মানগুলি সামগ্রী বাক্সের আকারে যোগ করা হয়।
আপনার উপলব্ধি পরীক্ষা করুন
বক্স মডেল আকার প্রভাবিত বৈশিষ্ট্য আপনার জ্ঞান পরীক্ষা.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
কত চওড়া আপনি মনে করেন .my-box হবে?
200px সঠিক হবে যদি বক্সের box-sizing: border-box । এই বাক্সের প্রকৃত প্রস্থ হল 260px। কারণ CSS ডিফল্ট box-sizing: content-box , প্রয়োগকৃত প্রস্থ হল বিষয়বস্তুর প্রস্থ, এবং উভয় পাশের padding এবং border এতে যোগ করা হয়। বিষয়বস্তুর জন্য 200px + প্যাডিংয়ের 40px + সীমানার 20px মোট দৃশ্যমান প্রস্থ 260px করে।
আপনি border-box আকার নির্দিষ্ট করে এটি পরিবর্তন করতে পারেন:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
এই বিকল্প বক্স মডেলটি CSS কে কন্টেন্ট বক্সের পরিবর্তে বর্ডার বক্সে width প্রয়োগ করতে বলে। এর মানে হল আমাদের border এবং padding ভিতরে ঠেলে দেওয়া হয়, তাই আপনি যখন .my-box 200px চওড়া সেট করেন, এটি আসলে 200px চওড়ায় রেন্ডার হয়।
নিম্নলিখিত ইন্টারেক্টিভ ডেমোতে এটি কীভাবে কাজ করে তা দেখুন। যখন আপনি box-sizing মান টগল করেন, তখন নীল এলাকাটি দেখায় যে বাক্সের ভিতরে কোন CSS প্রয়োগ করা হচ্ছে।
*,
*::before,
*::after {
box-sizing: border-box;
}
এই CSS নিয়মটি নথির প্রতিটি উপাদান এবং প্রতিটি ::before এবং ::after সিউডো এলিমেন্ট নির্বাচন করে এবং box-sizing: border-box প্রয়োগ করে। এর মানে হল যে প্রতিটি উপাদান এখন এই বিকল্প বক্স মডেল ব্যবহার করে।
যেহেতু বিকল্প বক্স মডেলটি আরও অনুমানযোগ্য হতে পারে, তাই বিকাশকারীরা প্রায়শই এই নিয়মটি রিসেট এবং নর্মালাইজারগুলিতে যুক্ত করে, যেমন এটি ।