TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

সিএসএস বক্স মডেল টিউটোরিয়াল

2

ফ্রন্ট এন্ড ওয়েব ডিজাইনের জন্য CSS একটি চমৎকার হাতিয়ার। জনপ্রিয়তা কেবল ব্যবহারের সহজতার সাথে নয় বরং শক্তিশালী কার্যকারিতার সাথেও। CSS একটি ওয়েবপৃষ্ঠার প্রতিটি উপাদানকে প্রভাবিত করে। অতএব, প্রতিটি ওয়েব ডিজাইনার সাধারণ লেআউট ডিজাইনারদের মূল বিকাশকারী হওয়ার জন্য CSS এর মূল বিষয়গুলি জানা উচিত। CSS- এ বক্স মডেল হল একটি পৃষ্ঠায় লেআউট এবং উপাদানগুলির অবস্থান নির্ধারণের ভিত্তি। এই নিবন্ধে আমরা বিস্তারিতভাবে CSS বক্স মডেলের মৌলিক বিষয়গুলি অনুসন্ধান করব। উপরন্তু, আমরা একটি ব্রাউজারে একটি এলিমেন্টের বক্স মডেল কিভাবে বিশ্লেষণ করব তাও কভার করব।



সিএসএস বক্স মডেল কি?

CSS ব্যবহার করার সময়, একটি ওয়েবপৃষ্ঠার প্রতিটি HTML উপাদান একটি আয়তক্ষেত্রাকার বাক্স হিসাবে বিবেচিত হয়। অতএব ধারণাটিকে বক্স মডেল হিসাবে উল্লেখ করা হয়। এটি সহজেই একটি ওয়েব পেজের লেআউট সংজ্ঞায়িত করতে এবং উপাদানগুলিকে আপনার প্রয়োজন অনুসারে সারিবদ্ধ করতে সাহায্য করে। বক্স মডেলে HTML উপাদানের বিষয়বস্তু কেন্দ্রে অবস্থিত এবং তারপরে প্যাডিং, সীমানা এবং মার্জিন নীচে দেখানো হয়েছে:

সিএসএস বক্স মডেল টিউটোরিয়াল

সিএসএস বক্স মডেল এলিমেন্ট

  • মার্জিন – এটি সীমান্তের আশেপাশের এলাকা এবং সর্বদা স্বচ্ছ। মার্জিনের উদ্দেশ্য উপাদানগুলির মধ্যে এবং ব্রাউজারের প্রান্ত থেকে প্রয়োজনীয় স্থান সরবরাহ করা।
  • সীমানা – এটি সামগ্রী এবং প্যাডিং এলাকার চারপাশে একটি দৃশ্যমান লাইন। সাধারণত এটি একটি উপাদান একটি রূপরেখা প্রদান করতে ব্যবহৃত হয় এবং কোন রং এবং প্রস্থ থাকতে পারে।
  • প্যাডিং – প্রকৃত বিষয়বস্তু এবং সীমানার মধ্যবর্তী স্থানকে প্যাডিং বলা হয়। যখন বিষয়বস্তুর দৃশ্যমান সীমান্ত রেখা থাকে, তখন কিছু প্যাডিং থাকা উপযুক্ত। এটি বিষয়বস্তু এবং সীমানার মধ্যে স্থান তৈরি করতে সাহায্য করবে।
  • বিষয়বস্তুএইচটিএমএল ট্যাগের মধ্যে পাঠ্য এবং চিত্রের মতো প্রকৃত বিষয়বস্তু ।

সম্পর্কিত: নতুনদের জন্য CSS ইউনিট টিউটোরিয়াল

বক্স মডেল এলিমেন্টের উদাহরণ

বক্স মডেল ধারণাটি ব্যাখ্যা করার জন্য div ট্যাগের মধ্যে একটি অনুচ্ছেদ তৈরির একটি সহজ উদাহরণ দেওয়া যাক। CSS নীচের মত হওয়া উচিত:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; } </style>

লক্ষ্য করুন যে মার্জিন এবং প্যাডিংয়ের জন্য CSS কোডে যথাক্রমে উপরের, বাম, নীচে এবং ডান দিকের মাত্রা রয়েছে।

এবং উপরের CSS এর সাথে বিষয়বস্তু theোকাতে HTML হল:

<div class="box-model"> <p>This is a test content to explain how CSS box model will look like. This is a paragraph with different padding, different margin and border of 10px.</p> </div>

উপরের কোডটির আউটপুট ব্রাউজারে নিচের মত দেখাবে। যেমন উল্লেখ করা হয়েছে, মার্জিন দেখা যাবে না কারণ এটি স্বচ্ছ।

সিএসএস বক্স মডেল টিউটোরিয়াল

IE 11 ব্রাউজারে একটি এলিমেন্টের CSS বক্স মডেল দেখা

কিভাবে একটি ব্রাউজারে CSS বক্স মডেল চেক করবেন?

তত্ত্বকে ব্যবহারিক পদ্ধতিতে দেখা ভাল ধারণা। আপনি সরাসরি আপনার ওয়েব ব্রাউজার থেকে একটি উপাদানের CSS বক্স মডেল দেখতে পারেন। এখানে, আমরা গুগল ক্রোম ব্রাউজারের সাথে স্ক্রিনশট দেখাই। ফায়ারফক্স, এজ এবং সাফারির মতো অন্যান্য ব্রাউজারের ক্ষেত্রেও পদ্ধতিটি একই থাকে।

  • যেকোনো ওয়েব পেজ খুলুন এবং আপনি যে উপাদানটি অন্বেষণ করতে চান তাতে ডান ক্লিক করুন।
  • আপনি যে কোনও পাঠ্য, চিত্র, ভিডিও বা ফাঁকা স্থানে ডান ক্লিক করতে পারেন।
  • ডেভেলপার কনসোল খোলার জন্য "ইন্সপেক্ট এলিমেন্ট" অপশনটি বেছে নিন।
  • এটি HTML দেখার জন্য একটি বাম ফলক এবং CSS দেখার জন্য ডান ফলক রয়েছে।
  • আপনি ডান ফলকের "লেআউট" ট্যাবের অধীনে নির্বাচিত উপাদানটির CSS বক্স মডেল দেখতে পারেন।
  • উপরের উদাহরণ কোড উল্লেখ করে – সমস্ত সীমানা, মার্জিন এবং প্যাডিংগুলি CSS- তে সংজ্ঞায়িত সঠিক মাত্রার সাথে মিলবে।

দ্রষ্টব্য, আপনি "এলিমেন্টস" ট্যাবের অধীনে গুগল ক্রোম ব্রাউজারে একটি উপাদানের HTML মার্কআপ দেখতে পারেন । সংশ্লিষ্ট CSS এবং বক্স মডেলটি নীচের ছবিতে দেখানো হিসাবে "স্টাইলস" ট্যাবের অধীনে দেখা যেতে পারে।

সিএসএস বক্স মডেল টিউটোরিয়াল

ক্রোম ব্রাউজারে একটি এলিমেন্টের CSS বক্স মডেল দেখা

CSS বক্স মডেলের একটি উপাদানের প্রস্থ এবং উচ্চতা গণনা করা

এখন যেহেতু আপনি CSS বক্স মডেলের ধারণাটি বুঝতে পেরেছেন। যখনই একটি উপাদানের উচ্চতা এবং প্রস্থ নির্ধারণ করা হয়, সেই উপাদানটির মোট প্রস্থ এবং মোট উচ্চতার মধ্যে মার্জিন, প্যাডিং এবং সীমানা প্রস্থ অন্তর্ভুক্ত করা উচিত। আসুন উপরের CSS কোড উদাহরণে উচ্চতা এবং প্রস্থ যোগ করি:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; width: 300px; height: 200px; } </style>

সম্পরকিত প্রবন্ধ:


এখন সিএসএস ক্লাসের শৈলীকে "বক্স-মডেল" বলা যে কোন উপাদানকে নিম্নলিখিত মোট প্রস্থ এবং মোট উচ্চতার সাথে স্থাপন করা উচিত।

  • মোট উচ্চতা = উচ্চতা + শীর্ষ মার্জিন + নীচের মার্জিন + শীর্ষ প্যাডিং + নীচের প্যাডিং + সীমানা প্রস্থ = 200 + 30 + 5 + 10 + 10 + 10 = 265px।
  • মোট প্রস্থ = প্রস্থ + বাম মার্জিন + ডান মার্জিন + বাম প্যাডিং + ডান প্যাডিং + সীমানা প্রস্থ = 300 + 15 + 5 + 0 + 5 + 10 = 335px।

প্রতিটি উপাদানের মোট প্রস্থ এবং মোট উচ্চতার মাত্রা বিবেচনা করে সম্পূর্ণ পৃষ্ঠার বিন্যাস ডিজাইন করা হবে।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত