CSS গণিত ফাংশন

CSS গণিত ফাংশনটি গণিত এক্সপ্রেশনকে প্রতিশব্দ হিসাবে ব্যবহার করতে অনুমদন দেয়। এই চাপটি বর্ণনা করা হবে: calc()、max() এবং min() ফাংশন

calc() ফাংশন

calc() ফাংশন গণনা করে, এবং ফলাফলকে প্রতিশব্দ হিসাবে ব্যবহার করে।

CSS সিন্ট্যাক্স

calc(expression)
, ...) বর্ণনা
expression অপরিহার্য। গণিত এক্সপ্রেশন। ফলাফল মান হিসাবে ব্যবহার করা হবে। যেসব অপারেটর ব্যবহার করা যায়: +, -, *, /

আমরা একটি উদাহরণ দেখতে চাই:

ইনস্ট্যান্স

ব্যবহার করা calc() ডিভ <div> এলিমেন্টের প্রস্থতা গণনা করুন:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

স্বয়ং প্রয়াস করুন

max() ফাংশন

max() ফাংশন কমা দিয়ে বিভক্ত মানের তালিকার বড় মান হিসাবে প্রতিশব্দ ব্যবহার করে।

CSS সিন্ট্যাক্স

max(value1, value2, ...)
, ...) বর্ণনা
value1, value2, ... অপরিহার্য। কমা দিয়ে বিভক্ত মানের তালিকা - বড় মান নির্ধারণ করুন。

আমরা একটি উদাহরণ দেখতে চাই:

ইনস্ট্যান্স

ব্যবহার করা max() ডিভ এক্সডি এর প্রস্থতা 50% বা 300px-এর মধ্যে বড় মান নির্ধারণ করুন:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

স্বয়ং প্রয়াস করুন

min() ফাংশন

min() ফাংশন min() কমা দ্বারা সংযুক্ত মানের তালিকার ক্ষুদ্রতম মানকে অ্যাট্রিবিউট মান হিসাবে ব্যবহার করে

CSS সিন্ট্যাক্স

min(value1, value2, ...)
, ...) বর্ণনা
value1, value2, ... অত্যাবশ্যক

আমরা একটি উদাহরণ দেখতে চাই:

ইনস্ট্যান্স

ব্যবহার করা min() ডিভাইডি #div1-এর প্রস্থতা 50% বা 300px-এর ক্ষুদ্রতম মান নির্ধারণ করুন:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

স্বয়ং প্রয়াস করুন

CSS ফাংশন রেফারেন্স

সকল CSS ফাংশনের পূর্ণ তালিকা দেখতে, আমাদের CSS ফাংশন রেফারেন্স ম্যানুয়েল。