CSS ফ্রেম মডেল
- পূর্ববর্তী পৃষ্ঠা CSS উচ্চতা/প্রশস্ততা
- পরবর্তী পৃষ্ঠা CSS হোল
CSS ফ্রেম মডেল
সব এইচটিএমএল এলাকা একটি বাক্স হিসাবে দেখা যায়।সিএসএসতে, ডিজাইন এবং লেআউট নিয়ে আলোচনাকালে,
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：
বিভিন্ন অংশের ব্যাখ্যা:
- কনটেন্ট - ফ্রেমের কনটেন্ট, যেখানে টেক্সট ও ছবি প্রদর্শিত হয়
- প্যাডিং - কনটেন্ট চারপাশের অঞ্চল পুনরুদ্ধার করা। প্যাডিং স্বচ্ছ।
- বর্নার - প্যাডিং ও কনটেন্টের চারপাশের বর্নার
- মার্গিন - সীমান্ত থেকে বাইরের অঞ্চল পুনরুদ্ধার করা। মার্গিন স্বচ্ছ।
ফ্রেম মডেল দ্বারা আমরা উপাদান চারপাশে বর্নার যোগ করতে এবং উপাদানের মধ্যে গতিপথ নির্ধারণ করতে পারি。
উপাদান ফ্রেমের মধ্যস্থ অংশ হল একটি প্রকৃত কনটেন্ট, যা প্রত্যক্ষ প্রতিটি কনটেন্টকে ঘিরে আছে। প্যাডিং প্রতিটি উপাদানের পটভূমি প্রদর্শন করে। প্যাডিংয়ের শেষের দিকে হল বর্নার, যা প্রতিটি উপাদানের পটভূমি প্রদর্শন করে। বর্নার থেকে বাইরে হল মার্গিন, যা ডিফল্টভাবে স্বচ্ছ, তাই তা পরবর্তী উপাদানকে বাধা দেবে না。
সতর্কতা:প্রধানত প্রতিটি উপাদানের পরিচ্ছন্ন অঞ্চলের প্রতিটি কনটেন্ট ও প্যাডিং, বর্নার এবং মার্গিন অঞ্চলের প্রয়োগ করা হয়。
প্যাডিং, বর্নার এবং মার্গিন অপশনাল, ডিফল্ট মান ০। কিন্তু, অনেক উপাদানকে ব্যবহারকারী অ্যাগেন্ট স্টাইলসেট মার্গিন ও প্যাডিং সম্পূর্ণকরে। এই ব্রাউজার শৈলীকে ওভাররাইড করার জন্য, উপাদানের মার্গিন ও প্যাডিংকে ০ হিসাবে সম্পূর্ণকরতে হবে। এটা আলাদা আলাদা করে করা যেতে পারে, কিংবা সাধারণ চিহ্নিতকারী ব্যবহার করে সকল উপাদানকে সম্পূর্ণকরতে হবে:
* {
মার্গ: 0;
প্যাডিং: 0;
}
CSS-এ, width ও height শুধুমাত্র কনটেন্ট অঞ্চলের প্রস্থতা ও উচ্চতা সুপারিশ করে। প্যাডিং, বর্নার এবং মার্গিন সম্প্রসারণ করলে, এটা কনটেন্ট অঞ্চলের মাপ প্রভাবিত করবে না, কিন্তু উপাদানের সম্পূর্ণ মাপ বাড়াবে。
বৈশিষ্ট্য: ফ্রেমের প্রত্যেক শিল্পক্ষেত্রে 10 পিক্সেল মার্গিন এবং 5 পিক্সেল প্যাডিং আছে। একটি 100 পিক্সেল প্রস্থতা প্রাপ্ত করার জন্য, কনটেন্ট প্রস্থতা 70 পিক্সেল হবে, অতএব দৃশ্যক্ষেত্র দেখুন:
#box {
প্রস্থতা: 70px;
মার্গিন: 10px;
প্যাডিং: 5px;
}
সতর্কতা:প্যাডিং, বর্নার এবং মার্গিন উপাদানের সকল শিল্পক্ষেত্রে বা অলিপক্ষে শিল্পক্ষেত্রে প্রয়োগ করা যেতে পারে。
সতর্কতা:সতর্কতা: মার্গিনটি নেতিবাচক মানের হতে পারে এবং বহু ক্ষেত্রে নেতিবাচক মার্গিন ব্যবহার করা হয়。
উদাহরণ
ফ্রেম মডেল প্রদর্শন:
div {
প্রস্থতা: 300px;
বর্নার: 15px সবুজ হলুদ;
প্যাডিং: 50px;
মার্গিন: 20px;
}
উপাদানের প্রস্থতা ও উচ্চতা
সকল ব্রাউজারে উপাদানের প্রস্থতা ও উচ্চতা সহজলভ্যতা সম্পন্নকরার জন্য, আপনাকে অবশ্যই ফ্রেম মডেল কিভাবে কাজ করে তার কথা জানতে হবে。
গুরুত্বপূর্ণ নোটিশ:CSS দ্বারা প্রতিটি উপাদানের width এবং height প্রতিযোগীতা সম্পূর্ণকারী করার সময়, শুধুমাত্র কনটেন্ট অঞ্চলের প্রস্থতা ও উচ্চতা সম্পূর্ণকারী করতে হবে। উপাদানের সম্পূর্ণ মাপ নির্ধারণ করার জন্য, আপনাকে অবশ্যই আউটারলাইন, বর্নার এবং মার্গিনকেও যোগ করতে হবে。
উদাহরণ
<div> তৈরির মোট প্রস্থতা হবে 350px:
div {
প্রশস্ততা: 320px;
প্যাডিং: 10px;
বর্তনী: 5px solid gray;
মার্গ: 0;
}
গণনা এইভাবে করা হয়:
320px(প্রশস্ততা) + 20px (ডান+বাঁদিক ইনার মার্গ) + 10px (ডান+বাঁদিক বর্তনী) + 0px (ডান+বাঁদিক বাহ্যিক মার্গ) = 350px
এলিমেন্টের মোট প্রশস্ততা এইভাবে গণনা করা উচিত:
এলিমেন্টের মোট প্রশস্ততা = প্রশস্ততা + ডানদিক ইনার মার্গ + বাঁদিক ইনার মার্গ + ডানদিক বর্তনী + বাঁদিক বর্তনী + ডানদিক বাহ্যিক মার্গ + বাঁদিক বাহ্যিক মার্গ
এলিমেন্টের মোট উচ্চতা এইভাবে গণনা করা উচিত:
এলিমেন্টের মোট উচ্চতা = উচ্চতা + উপরের ইনার মার্গ + নিচের ইনার মার্গ + উপরের বর্তনী + নিচের বর্তনী + উপরের বাহ্যিক মার্গ + নিচের বাহ্যিক মার্গ
- পূর্ববর্তী পৃষ্ঠা CSS উচ্চতা/প্রশস্ততা
- পরবর্তী পৃষ্ঠা CSS হোল
