পূর্বে আমার ধারণাটি width: autoছিল যে প্রস্থটি সামগ্রীগুলির সাথে সেট করা আছে। এখন আমি দেখতে পাচ্ছি যে এটি পিতামাতার সম্পূর্ণ প্রস্থ নেয়।
কেউ দয়া করে এর মধ্যে পার্থক্য বর্ণনা করতে পারেন?
পূর্বে আমার ধারণাটি width: autoছিল যে প্রস্থটি সামগ্রীগুলির সাথে সেট করা আছে। এখন আমি দেখতে পাচ্ছি যে এটি পিতামাতার সম্পূর্ণ প্রস্থ নেয়।
কেউ দয়া করে এর মধ্যে পার্থক্য বর্ণনা করতে পারেন?
উত্তর:
প্রস্থ অটো
ডিভ বা পি এর মতো ব্লক স্তরের উপাদানের প্রাথমিক প্রস্থটি স্বয়ংক্রিয়। এটি এর উপস্থিত ব্লকের মধ্যে উপলব্ধ সমস্ত অনুভূমিক স্থান দখল করতে এটি প্রসারিত করে। যদি এর কোনও অনুভূমিক প্যাডিং বা সীমানা থাকে তবে সেগুলির প্রস্থগুলি উপাদানের মোট প্রস্থে যোগ করে না।
প্রস্থ 100%
অন্যদিকে, আপনি প্রস্থ নির্দিষ্ট করে: 100%, উপাদানটির মোট প্রস্থ এটির ব্লক সমেত যে কোনও অনুভূমিক মার্জিন, প্যাডিং এবং সীমান্তের 100% হবে (যদি না আপনি বক্স-সাইজিং: সীমান্ত-বাক্স ব্যবহার করেন, তবে ক্ষেত্রে এর সম্পূর্ণ প্রস্থ কীভাবে গণনা করা হয় তা পরিবর্তন করতে কেবল মার্জিনগুলি 100% এ যুক্ত করা হয়)। এটি আপনি যা চান তা হতে পারে তবে সম্ভবত এটি তা হয় না।
পার্থক্যটি দেখতে এই ছবিটি দেখুন:

width: autoআচরণ করবে যে ভাবে: stackoverflow.com/questions/28353625/...
autoহিসাবে একই নয়fill-available
width: auto; যখন মার্জিন, প্যাডিং বা সীমানা থেকে অতিরিক্ত স্থান যুক্ত করা হয় তখন কোনও মৌলটিকে তার পিতামাতার ধারকের সমান প্রস্থে রাখার জন্য যথাসম্ভব চেষ্টা করবে।
width: 100%;উপাদানটি পিতামাতার ধারক হিসাবে চওড়া করা হবে। পিতামাতার প্রতি শ্রদ্ধা না করে বাড়ির ব্যবধানটি মৌলের আকারে যুক্ত করা হবে। এটি সাধারণত সমস্যা তৈরি করে।

প্রস্থের মান যতক্ষণ অটো থাকে ততক্ষণ উপাদানটি তার ধারকের চেয়ে প্রশস্ত না হয়ে অনুভূমিক মার্জিন, প্যাডিং এবং সীমানা থাকতে পারে (অবশ্যই যদি মার্জিন-বাম + বর্ডার-বাম-প্রস্থ + প্যাডিং-বাম + প্যাডিং-রাইটের যোগফল না থাকে) + বর্ডার-ডান-প্রস্থ + মার্জিন-ডানটি ধারকটির চেয়ে বড়)। মার্জিন, প্যাডিং এবং সীমানারটি ধারকের প্রস্থ থেকে বিয়োগ করা হলে এর সামগ্রী বাক্সের প্রস্থটি যে পরিমাণ অবশিষ্ট থাকবে।
অন্যদিকে, আপনি প্রস্থ নির্দিষ্ট করে: 100%, উপাদানটির মোট প্রস্থ এটির ব্লক সমেত যে কোনও অনুভূমিক মার্জিন, প্যাডিং এবং সীমান্তের 100% হবে (যদি না আপনি বক্স-সাইজিং: সীমান্ত-বাক্স ব্যবহার করেন, তবে ক্ষেত্রে এর সম্পূর্ণ প্রস্থ কীভাবে গণনা করা হয় তা পরিবর্তন করতে কেবল মার্জিনগুলি 100% এ যুক্ত করা হয়)। এটি আপনি যা চান তা হতে পারে তবে সম্ভবত এটি তা হয় না।
সূত্র:
http://www.456bereastreet.com/archive/201112/the_differences_between_widthauto_and_width100/
প্রস্থ 100%: এটি 100% দিয়ে সামগ্রী তৈরি করবে। মার্জিন, সীমানা, প্যাডিংগুলি এই প্রস্থে যুক্ত করা হবে এবং এর মধ্যে কোনও যোগ করা থাকলে উপাদান উপচে পড়বে।
প্রস্থ অটো: এটি মার্জিন, সীমানা এবং প্যাডিং সহ উপলভ্য জায়গাতে উপাদানটি ফিট করবে। মার্জিন + প্যাডিং + বর্ডার সামঞ্জস্য করার পরে অবশিষ্ট স্থান প্রস্থ / উচ্চতা উপলভ্য হবে।
প্রস্থ 100% + বক্স-আকার: আকারের সীমানা বাক্স: এটি সীমানা, প্যাডিং সহ প্রাপ্য স্থানের উপাদানটিকেও ফিট করবে (মার্জিন এটি পাত্রে উপচে পড়বে)।
ডিভ বা পি এর মতো ব্লক স্তরের উপাদানের প্রাথমিক প্রস্থটি স্বয়ংক্রিয়।
প্রস্থ ব্যবহার করুন: স্পষ্টভাবে নির্দিষ্ট প্রস্থকে পূর্বাবস্থায় ফেলার জন্য অটো।
আপনি যদি প্রস্থ নির্দিষ্ট করেছেন: 100%, উপাদানটির মোট প্রস্থ এটির ব্লক প্লাসের সাথে কোনও অনুভূমিক মার্জিন, প্যাডিং এবং সীমানার 100% হবে।
সুতরাং, পরের বার আপনি যখন কোনও ব্লক স্তরের উপাদানটির প্রস্থকে সমস্ত উপলব্ধ প্রস্থকে দখল করে নেওয়ার জন্য নিজেকে নির্ধারণ করেন, আপনি কী চান তা এটি অটোতে সেট করে দিচ্ছে কিনা তা বিবেচনা করুন।
প্রস্থ ব্যবহার: অটো; + প্রদর্শন: ইনলাইন-ব্লক; সিএসএস ইন দুর্দান্ত প্রভাব প্রদান।
width : auto;
display: inline-block;
আমরা যখন বলি
width:auto;
প্রস্থের মৌলিক উপাদানের মোট প্রস্থের বেশি হবে না। সর্বাধিক প্রস্থটি এটির মূল প্রস্থ। এমনকি যদি আমরা সীমানা, প্যাডিং এবং মার্জিন যুক্ত করি তবে সীমানা, প্যাডিং এবং মার্জিনের জন্য স্থান দেওয়ার জন্য উপাদানগুলির উপাদানগুলি নিজেই ছোট হয়ে যাবে। যদি সীমানা + প্যাডিং + মার্জিনের জন্য প্রয়োজনীয় স্থানটি মূল উপাদানগুলির মোট প্রস্থের চেয়ে বেশি হয় তবে সামগ্রীর প্রস্থ শূন্য হয়ে যাবে become
আমরা যখন বলি
width:100%;
উপাদানের সামগ্রীর প্রস্থ পিতামণ্ডলের উপাদানগুলির 100% হয়ে যাবে এবং এখন থেকে যদি আমরা সীমানা, প্যাডিং বা মার্জিন যুক্ত করি তবে এটি সন্তানের উপাদানটিকে পিতামণ্ডলের উপাদানগুলির প্রস্থকে ছাড়িয়ে যাবে এবং এটি পিতামণ্ডলের উপাদান থেকে প্রবাহিত হতে শুরু করবে।