কম্পিউটার

বক্স-সাইজিং সহ CSS3 বক্স প্রস্থ


শুধুমাত্র উপাদানের প্রস্থ নয়, উচ্চতা পরিবর্তন করতে বক্স-আকারের বৈশিষ্ট্য ব্যবহার করুন।

CSS3 −

ব্যবহার করে বক্স-সাইজিং সহ বক্সের প্রস্থের কোড নিচে দেওয়া হল

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 200px;
   height: 200px;
   display: inline-block;
}
.contentBox {
   padding: 50px;
   border: 1px solid rgb(255, 0, 128);
}
.borderBox {
   box-sizing: border-box;
   padding: 50px;
   border: 1px solid rgb(194, 0, 194);
}
</style>
</head>
<body>
<h1>Box sizing example using CSS</h1>
<div class="contentBox">
This div doesn't have box sizing property that's why it looks bigger
</div>
<div class="borderBox">
This div has box sizing property
</div>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

বক্স-সাইজিং সহ CSS3 বক্স প্রস্থ


  1. CSS3 এ ফ্লেক্স লেআউট মডেল বোঝা

  2. CSS3 ব্যবহার করে একাধিক ট্রানজিশন সম্পাদন করা

  3. CSS3 নমনীয় বক্স লেআউট

  4. বিশুদ্ধ CSS সহ মসৃণ স্ক্রলিং