প্রস্থ অটো এবং প্রস্থের 100 শতাংশের মধ্যে পার্থক্য


104

পূর্বে আমার ধারণাটি width: autoছিল যে প্রস্থটি সামগ্রীগুলির সাথে সেট করা আছে। এখন আমি দেখতে পাচ্ছি যে এটি পিতামাতার সম্পূর্ণ প্রস্থ নেয়।

কেউ দয়া করে এর মধ্যে পার্থক্য বর্ণনা করতে পারেন?



সংক্ষেপে: 1) অটোতে, পিতামাতার দ্বি প্রস্থ / উচ্চতা এর বাচ্চাদের যোগফল হবে। 2) 100 শতাংশ, এর প্রস্থ / উচ্চতা তার পিতামাতার 'হবে। এখানে
অ্যালান ডং

উত্তর:


147

প্রস্থ অটো

ডিভ বা পি এর মতো ব্লক স্তরের উপাদানের প্রাথমিক প্রস্থটি স্বয়ংক্রিয়। এটি এর উপস্থিত ব্লকের মধ্যে উপলব্ধ সমস্ত অনুভূমিক স্থান দখল করতে এটি প্রসারিত করে। যদি এর কোনও অনুভূমিক প্যাডিং বা সীমানা থাকে তবে সেগুলির প্রস্থগুলি উপাদানের মোট প্রস্থে যোগ করে না।

প্রস্থ 100%

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

পার্থক্যটি দেখতে এই ছবিটি দেখুন:

এখানে চিত্র বর্ণনা লিখুন

সূত্র


4
যারা সম্পর্কে জানতে আগ্রহী কেন width: autoআচরণ করবে যে ভাবে: stackoverflow.com/questions/28353625/...
হাশেম Qolami

4
তাই autoহিসাবে একই নয়fill-available
jiggunjer

4
সুতরাং মূলত এটির উপাদানগুলির আকারের সাথে কোনও সম্পর্ক নেই, তবে সম্পূর্ণভাবে পিতামাতার প্রস্থকে বোঝায়?
হামেস

87
  • width: auto; যখন মার্জিন, প্যাডিং বা সীমানা থেকে অতিরিক্ত স্থান যুক্ত করা হয় তখন কোনও মৌলটিকে তার পিতামাতার ধারকের সমান প্রস্থে রাখার জন্য যথাসম্ভব চেষ্টা করবে।

  • width: 100%;উপাদানটি পিতামাতার ধারক হিসাবে চওড়া করা হবে। পিতামাতার প্রতি শ্রদ্ধা না করে বাড়ির ব্যবধানটি মৌলের আকারে যুক্ত করা হবে। এটি সাধারণত সমস্যা তৈরি করে।

এখানে চিত্র বর্ণনা লিখুন এখানে চিত্র বর্ণনা লিখুন


4
@ সি-লিংকের মতো একই জিনিসটি দেওয়া হয়েছে তবে অতিরিক্ত গ্রাফিকাল ইন্টারফেস। সুতরাং +1
নবীন রাউনিয়ার

8

এটি মার্জিন এবং সীমান্ত সম্পর্কে। আপনি যদি ব্যবহার করেন width: autoতবে সীমানা যুক্ত করুন, আপনার ডিভটি তার ধারকটির চেয়ে বড় হবে না। অন্যদিকে, আপনি যদি ব্যবহার করেন width: 100%এবং কিছু সীমানা, উপাদানটির প্রস্থ 100% + সীমানা বা মার্জিন হবে। আরো তথ্যের জন্য দেখুন এই


4

প্রস্থের মান যতক্ষণ অটো থাকে ততক্ষণ উপাদানটি তার ধারকের চেয়ে প্রশস্ত না হয়ে অনুভূমিক মার্জিন, প্যাডিং এবং সীমানা থাকতে পারে (অবশ্যই যদি মার্জিন-বাম + বর্ডার-বাম-প্রস্থ + প্যাডিং-বাম + প্যাডিং-রাইটের যোগফল না থাকে) + বর্ডার-ডান-প্রস্থ + মার্জিন-ডানটি ধারকটির চেয়ে বড়)। মার্জিন, প্যাডিং এবং সীমানারটি ধারকের প্রস্থ থেকে বিয়োগ করা হলে এর সামগ্রী বাক্সের প্রস্থটি যে পরিমাণ অবশিষ্ট থাকবে।

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

সূত্র:

http://www.456bereastreet.com/archive/201112/the_differences_between_widthauto_and_width100/


4

প্রস্থ 100%: এটি 100% দিয়ে সামগ্রী তৈরি করবে। মার্জিন, সীমানা, প্যাডিংগুলি এই প্রস্থে যুক্ত করা হবে এবং এর মধ্যে কোনও যোগ করা থাকলে উপাদান উপচে পড়বে।

প্রস্থ অটো: এটি মার্জিন, সীমানা এবং প্যাডিং সহ উপলভ্য জায়গাতে উপাদানটি ফিট করবে। মার্জিন + প্যাডিং + বর্ডার সামঞ্জস্য করার পরে অবশিষ্ট স্থান প্রস্থ / উচ্চতা উপলভ্য হবে।

প্রস্থ 100% + বক্স-আকার: আকারের সীমানা বাক্স: এটি সীমানা, প্যাডিং সহ প্রাপ্য স্থানের উপাদানটিকেও ফিট করবে (মার্জিন এটি পাত্রে উপচে পড়বে)।


3

ডিভ বা পি এর মতো ব্লক স্তরের উপাদানের প্রাথমিক প্রস্থটি স্বয়ংক্রিয়।

প্রস্থ ব্যবহার করুন: স্পষ্টভাবে নির্দিষ্ট প্রস্থকে পূর্বাবস্থায় ফেলার জন্য অটো।

আপনি যদি প্রস্থ নির্দিষ্ট করেছেন: 100%, উপাদানটির মোট প্রস্থ এটির ব্লক প্লাসের সাথে কোনও অনুভূমিক মার্জিন, প্যাডিং এবং সীমানার 100% হবে।

সুতরাং, পরের বার আপনি যখন কোনও ব্লক স্তরের উপাদানটির প্রস্থকে সমস্ত উপলব্ধ প্রস্থকে দখল করে নেওয়ার জন্য নিজেকে নির্ধারণ করেন, আপনি কী চান তা এটি অটোতে সেট করে দিচ্ছে কিনা তা বিবেচনা করুন।


1

প্রস্থ ব্যবহার: অটো; + প্রদর্শন: ইনলাইন-ব্লক; সিএসএস ইন দুর্দান্ত প্রভাব প্রদান।

width : auto;
display: inline-block;

4
এটি 100 এবং অটো এর মধ্যে পার্থক্যের প্রশ্নের উত্তর দেয় না।
জোটিডি

4
হ্যাঁ, আমি জানি তবে আমি প্রস্থ: অটো এবং প্রদর্শন: ইনলাইন-ব্লক সম্পর্কে এখানে দেখানোর চেষ্টা করছি । আমরা যখন কোনও ব্লক স্তরের উপাদানের প্রস্থকে স্বয়ংক্রিয়ভাবে বাড়িয়ে তুলতে চাই তখন আমরা এটি ব্যবহার করতে পারি। এবং 100% এবং অটো
মোহাম্মদ জাভেদ

0

আমরা যখন বলি

width:auto;

প্রস্থের মৌলিক উপাদানের মোট প্রস্থের বেশি হবে না। সর্বাধিক প্রস্থটি এটির মূল প্রস্থ। এমনকি যদি আমরা সীমানা, প্যাডিং এবং মার্জিন যুক্ত করি তবে সীমানা, প্যাডিং এবং মার্জিনের জন্য স্থান দেওয়ার জন্য উপাদানগুলির উপাদানগুলি নিজেই ছোট হয়ে যাবে। যদি সীমানা + প্যাডিং + মার্জিনের জন্য প্রয়োজনীয় স্থানটি মূল উপাদানগুলির মোট প্রস্থের চেয়ে বেশি হয় তবে সামগ্রীর প্রস্থ শূন্য হয়ে যাবে become

আমরা যখন বলি

width:100%;

উপাদানের সামগ্রীর প্রস্থ পিতামণ্ডলের উপাদানগুলির 100% হয়ে যাবে এবং এখন থেকে যদি আমরা সীমানা, প্যাডিং বা মার্জিন যুক্ত করি তবে এটি সন্তানের উপাদানটিকে পিতামণ্ডলের উপাদানগুলির প্রস্থকে ছাড়িয়ে যাবে এবং এটি পিতামণ্ডলের উপাদান থেকে প্রবাহিত হতে শুরু করবে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.