সিএসএস৩ বক্স সাইজ - Css3 Box Sizeing



box-sizing প্রপার্টি

কোন এলিমেন্টের মোট উচ্চতা এবং প্রস্থের সাথে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের আকার বা size নির্ধারণ করতে সিএসএস ৩ এর box-sizing প্রোপার্টি ব্যবহার করা হয়।


box-sizing প্রপার্টির ব্যবহার না করা

সয়ক্রিও ভাবেই কোন এলিমেন্ট এর প্রস্থ এবং উচ্চতা নিছের মত করে হিসেব করা হয় -

প্রস্থ + প্যাডিং + বর্ডার = এলিমেন্টের সম্পূর্ণ প্রস্থ
উচ্চতা + প্যাডিং + বর্ডার = এলিমেন্টের সম্পূর্ণ উচ্চতা

অর্থাৎ যদি box-sizing প্রোপার্টি ব্যবহার না করা হয় তবে, কোন এলিমেন্টের সাথে ডিফল্টভাবেই বর্ডার ও প্যাডিং যুক্ত হবে, ফলে প্রয়োজনীয় মানের এলিমেন্টটি পাওয়া যাবে না।

নিচের উদাহরণে একই উচ্চতা এবং প্রস্থের সাথে প্যাডিং যুক্ত এবং প্যাডিং ব্যতীত দুইটি <div> এলিমেন্ট দেখানো হলো।

এই <div> ছোট দেখাচ্ছে, কারণ এর প্রশস্ততা 300px এবং উচ্চতা 80px

এই <div> বড় দেখাচ্ছে, কারণ এর প্রশস্ততা 300px এবং উচ্চতা 80px এর সাথে চতুর্দিকে 20px প্যাডিং যুক্ত হয়েছে।

এখানে <div> এলিমেন্টটি বড় দেখাছে কারন প্রস্থ 300px এবং উচ্চতা 80px এর সাথেই চতুর্দিকে 20px এর প্যাডিং যুক্ত হয়েছে।

উদাহরণ

.div1 {
width: 300px;
height: 80px;
border: 2px solid red;
}

.div2 {
width: 300px;
height: 80px;
padding: 20px;
border: 2px solid blue;
}




box-sizing প্রপার্টি ব্যবহার করা

কোন এলিমেন্টের মোট প্রস্থ এবং উচ্চতার সাথে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস ৩ এর box-sizing প্রোপার্টি ব্যবহার করা হয়।

যদি কোন এলিমেন্টে box-sizing প্রপার্টির মান border-box নির্ধারণ করা হয় তবে, ঐ এলিমেন্টের নির্ধারণকৃত আকার (width এবং height) এর সাথে প্যাডিং এবং বর্ডারও যুক্ত হবে।

box-sizing: border-box; ব্যবহার করায় দুটি ডিভের সাইজ একই রকম দেখাচ্ছে !!!

দুটি ডিভের সাইজ একই রকম দেখাচ্ছে!!!

এখানে একই রকম উদাহরণ দেখান হয়েছে, ২ টি দিভ এলিমেন্টেই box-sizing প্রপার্টির মান border-box নির্ধারণ করে দেয়া হয়েছে।

উদাহরণ

.div1 {
width: 300px;
height: 80px;
border: 2px solid red;
box-sizing: border-box;
}

.div2 {
width: 300px;
height: 80px;
padding: 20px;
border: 2px solid blue;
box-sizing: border-box;
}


box-sizing: border-box; এর ব্যবহার অনেক বেশি সুবিধাজনক হওয়ায় অধিকাংশ ডেভেলপারই তাদের ওয়েব-পেইজের সকল এলিমেন্টেই এটা ব্যবহার করে থাকে।

নীচের কোডটিগুলো নিশ্চিত করে যে সমস্ত এলিমেন্ট গুলো আরও সুবিধাজনক ভাবে প্রদর্শিত হবে। অনেক ব্রাউজারই ইতমধহে box-sizing: border-box প্রপার্টি ব্যবহার করছে, অনেক ফর্ম এলিমেন্টের জন্য। এতে করে ইনপুট টেক্সট এরিয়া ১০০% প্রস্থে প্রদর্শিত হয়।

সব এলিমেন্টেই এই box-sizing প্রপার্টির মান border-box নির্ধারণ করে দেয়াই নিরাপদ।

উদাহরণ

* {
box-sizing: border-box;
}




box-sizing প্রপার্টি

প্রপার্টি বর্ণনা
box-sizing কোন এলিমেন্টের মোট প্রস্থ এবং উচ্চতার সাথে প্যাডিং এবং বর্ডার যুক্ত করে।






এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.