به طور پیش فرض، عناصر بلوک از عرض خودکار استفاده می کنند. این بدان معنی است که عنصر دقیقاً به همان اندازه که هست به صورت افقی کشیده می شود فضای خالی. ارتفاع پیش‌فرض عناصر بلوک به‌طور خودکار تنظیم می‌شود، یعنی. مرورگر ناحیه محتوا را به صورت عمودی گسترش می دهد تا همه محتوا نمایش داده شود. برای تنظیم ابعاد سفارشی برای ناحیه محتوای یک عنصر، می‌توانید از ویژگی‌های عرض و ارتفاع استفاده کنید.

ویژگی CSS width به شما امکان می دهد پهنای ناحیه محتوای عنصر را تنظیم کنید و ویژگی height به شما امکان می دهد ارتفاع ناحیه محتوا را تنظیم کنید:

توجه داشته باشید که ویژگی‌های عرض و ارتفاع فقط اندازه ناحیه محتوا را تعیین می‌کنند؛ برای محاسبه عرض کل یک عنصر بلوک، باید عرض ناحیه محتوا، لایه‌های سمت چپ و راست، و عرض سمت چپ را اضافه کنید. حاشیه سمت راست همین امر در مورد ارتفاع کلی عنصر نیز صدق می کند، فقط تمام مقادیر به صورت عمودی محاسبه می شوند:

برای این پاراگراف فقط عرض و ارتفاع را تنظیم می کنیم.

این پاراگراف علاوه بر عرض و ارتفاع، شامل یک لایه داخلی، یک حاشیه و یک لایه بیرونی است.

تلاش كردن "

مثال به وضوح نشان می دهد که عنصر دوم فضای بیشتری را نسبت به عنصر اول اشغال می کند. اگر با فرمول خود محاسبه کنیم، ابعاد پاراگراف اول 150x100 پیکسل و ابعاد پاراگراف دوم عبارتند از:

ارتفاع کلی:	5 پیکسل	+	10 پیکسل	+	100 پیکسل	+	10 پیکسل	+	5 پیکسل	= 130 پیکسل
	بالا قاب		بالا تورفتگی		ارتفاع		پایین تر تورفتگی		پایین تر قاب

یعنی 180x130 پیکسل.

سرریز عنصر

هنگامی که عرض و ارتفاع یک عنصر را تعیین کردید، باید به یک نکته مهم توجه کنید - محتوای موجود در داخل عنصر ممکن است از اندازه بلوک مشخص شده بیشتر شود. در این صورت مقداری از محتوا از مرزهای عنصر فراتر می رود.برای جلوگیری از این لحظه ناخوشایند می توانید از خاصیت سرریز CSS استفاده کنید. ویژگی overflow به مرورگر می گوید که اگر محتوای یک بلوک از اندازه آن بیشتر شد، چه کاری انجام دهد. این ویژگی می تواند یکی از چهار مقدار را داشته باشد:

• قابل مشاهده - مقدار پیش فرض استفاده شده توسط مرورگر. تنظیم این مقدار مانند عدم تنظیم خاصیت سرریز خواهد بود.
• اسکرول - نوارهای اسکرول عمودی و افقی را به یک عنصر اضافه می کند.
• خودکار - در صورت لزوم نوارهای اسکرول را اضافه می کند.
• پنهان - بخشی از محتوایی را که فراتر از مرزهای عنصر بلوک است، پنهان می کند.

ولاد مرژویچ

هر عنصر بلوکی شامل مجموعه ای از خواص است، مانند برگ های کلم که روی یکدیگر قرار گرفته اند. اساس بلوک محتوای آن است (این می تواند متن، تصویر و غیره باشد)، که عرض آن با ویژگی width و ارتفاع با ارتفاع مشخص می شود. در اطراف محتوا بالشتک وجود دارد، آنها فضای خالی از محتوا تا لبه داخلی مرزها ایجاد می کنند. سپس خود مرزها می آیند (حاشیه) و بلوک با حاشیه ها (حاشیه)، فضای خالی نامرئی از لبه بیرونی مرزها تکمیل می شود. عرض بلوک یک مقدار پیچیده است و از چندین مقدار ویژگی تشکیل شده است:

• عرض - عرض محتوا، یعنی. محتویات بلوک؛
• padding-left و padding-right - حاشیه سمت چپ و راست محتوا.
• مرز-چپ و مرز-راست - ضخامت مرز در سمت چپ و راست؛
• حاشیه-چپ و حاشیه-راست - حاشیه چپ و راست.

ممکن است برخی از ویژگی ها گم شده باشند، در این صورت عرض تحت تأثیر قرار نمی گیرد. عرض کلی در شکل نشان داده شده است. 1 به عنوان یک خط نقطه سیاه.

برنج. 1. عرض بلوک

اگر عرض مشخص نشده باشد، به طور پیش فرض روی خودکار قرار می گیرد. در این حالت، عرض بلوک با حفظ مقادیر حاشیه‌ها، حاشیه‌ها و padding، کل عرض موجود را اشغال می‌کند. در این حالت، عرض موجود به معنای عرض محتوای بلوک والد است و اگر والد وجود نداشته باشد، عرض محتوای مرورگر است.

فرض کنید استایل زیر برای یک لایه نوشته شده است.

عرض: 300 پیکسل؛ /* عرض لایه */ حاشیه: 7 پیکسل. /* مقدار padding */ border: 4px solid black; /* گزینه های حاشیه */ padding: 10px; /* حاشیه های اطراف متن */

عرض لایه طبق این ورودی برابر با 342 پیکسل خواهد بود، این مقدار با افزودن مقدار عرض محتوا به اضافه بالشتک چپ، حاشیه چپ و حاشیه چپ، به علاوه حاشیه راست، حاشیه راست و لایه سمت راست به دست می آید. بیایید همه اعداد را جمع کنیم.

عرض = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

لازم به ذکر است که مدل بلوک با شکل گیری عرض، ناراحتی های زیادی را به همراه دارد. زمانی که نیاز به تنظیم عرض بلوک خاصی دارید، دائماً باید محاسباتی را انجام دهید. مشکلات نیز هنگام ترکیب شروع می شود واحدهای مختلفاندازه گیری ها، به ویژه درصدها و پیکسل ها. بیایید فرض کنیم که عرض محتوا روی 90٪ تنظیم شده است، اگر ما حاشیه ها و حاشیه های مشخص شده در پیکسل را اضافه کنیم، محاسبه عرض کل بلوک غیرممکن است، زیرا درصدها مستقیماً به پیکسل ترجمه نمی شوند. این ممکن است باعث شود که عرض کل بلوک از عرض صفحه وب بیشتر شود و در نتیجه یک نوار اسکرول افقی ایجاد شود. دو راه برای خروج از این وضعیت وجود دارد - تغییر الگوریتم مدل بلوک و استفاده از لایه های تو در تو.

الگوریتم مدل بلوک

همانطور که گفته شد، عرض بلوک از عرض محتوا و مقادیر حاشیه‌ها، حاشیه‌ها و padding تشکیل می‌شود. در مرورگر اینترنت اکسپلوررالگوریتم به طور خودکار تغییر می کند و عرض کل بلوک برابر با عرض تنظیم می شود. سایر مرورگرها الگوریتم را به این راحتی تغییر نمی دهند و علاوه بر این، می دانید که حالت سازگاری بد است. CSS3 دارای یک ویژگی بزرگ اندازه جعبه است که برای ما مفید خواهد بود. وقتی روی جعبه مرزی تنظیم می‌شود، عرض شروع به شامل حاشیه‌ها و حاشیه‌ها می‌کند، اما نه بالشتک. بنابراین، با اتصال box-sizing با مقدار border-box به سبک خود، می‌توانیم عرض را به صورت درصد تنظیم کنیم و بدون ترس از تغییر عرض بلوک، با خیال راحت مرز و padding را مشخص کنیم. متأسفانه، مشکل کوچکی در مورد این ویژگی وجود دارد، همانطور که معمولاً در مورد مرورگرها وجود دارد - همه مرورگرها آن را درک نمی کنند. خوشحالم که مرورگرها حداقل از ویژگی های خاص مرورگر پشتیبانی می کنند. روی میز 1 پشتیبانی مرورگر را نشان می دهد.

جدول 1. پشتیبانی مرورگر از ویژگی box-sizing

مرورگر	اینترنت اکسپلورر	کروم	اپرا	سافاری	فایرفاکس
نسخه	8.0+	2.0+	7.0+	3.0+	1.0+
ویژگی	اندازه جعبه	-webkit-box-sizing	اندازه جعبه	-webkit-box-sizing	-moz-box-sizing

همانطور که از جدول می بینید، سردرگمی و نوسانی در خواص وجود دارد، بنابراین باید ترکیبی ایجاد کنید و هر سه ویژگی را نشان دهید (مثال 1).

مثال 1: عرض بلوک

HTML5 CSS3 IE Cr Op Sa Fx

این مثال در تمام مرورگرهای فهرست شده در جدول کار خواهد کرد. اما به دلیل استفاده از ویژگی‌های غیر استاندارد که با -moz و -webkit شروع می‌شوند، 1 در CSS3 معتبر نیست. عرض بلوک 100٪ شامل مقادیر padding است. بدون ویژگی box-sizing، یک نوار اسکرول افقی در مرورگر ظاهر می شود.

لایه های تو در تو

استفاده از ویژگی box-sizing برای همه خوب است، با این تفاوت که در نسخه های قدیمی IE کار نمی کند. اگر در حال طراحی وب سایتی بر اساس IE7 و IE6 هستید، روش اثبات شده قدیمی برای قرار دادن لایه ها برای شما مناسب است. ایده ساده است - برای عنصر بلوک بیرونی، فقط عرض مورد نیاز تنظیم شده است، و برای بلوک تودرتو، همه چیز تنظیم شده است - حاشیه ها، حاشیه ها و لایه ها. از آنجایی که عرض پیش‌فرض یک بلوک برابر با عرض موجود والد آن است، بلوک‌ها به نوعی با یکدیگر همپوشانی دارند، اما عرض واقعی عنصر ترکیبی به وضوح تعریف می‌شود. مثال 2 استفاده از لایه های تو در تو را نشان می دهد.

مثال 2: لایه های تو در تو

HTML5 CSS 2.1 IE Cr Op Sa Fx

نتیجه این مثالدر شکل نشان داده شده است. 2.

برنج. 2. عرض بلوک به درصد

مزیت لایه‌های تودرتو استفاده از تورفتگی‌ها (اندازه جعبه آن‌ها را در نظر نمی‌گیرد)، تطبیق پذیری روش، و این واقعیت است که در صورت تمایل می‌توان پس‌زمینه را به یک یا لایه دیگر اضافه کرد. این تا حدودی تغییر می کند ظاهرعناصر، این به ویژه در هنگام گنجاندن تصاویر پس زمینه صادق است. از جمله معایب روش، می توان به گنجاندن یک بلوک اضافی اشاره کرد که ساختار کد را پیچیده می کند، به خصوص اگر روش به طور مکرر استفاده شود. اما این را می توان در مقایسه با مزایا یک چیز کوچک در نظر گرفت.

شرح

عرض عناصر در سطح بلوک یا قابل تعویض (مثلاً تگ) را تنظیم می کند ). عرض شامل ضخامت حاشیه های اطراف عنصر، بالشتک یا مقادیر حاشیه نمی شود.

مرورگرها عرض ها را یکسان مدیریت نمی کنند؛ نتیجه نمایش به مرورگر مورد استفاده بستگی دارد.. روی میز 1 داده شده است گزینه های ممکن و عرض حاصله

جدول 1. عمل عرض در مرورگرها

	اینترنت اکسپلورر	Opera 10+، Firefox، Chrome، Safari	اپرا 9
مشخص نشده (حالت سازگاری)	اگر محتوا از عرض مشخص شده بیشتر شود، اندازه بلوک متناسب با محتوا تغییر می کند. در غیر این صورت، عرض بلوک برابر با مقدار عرض است.	در همه موارد، مرورگر مطابق با مشخصات CSS عمل می کند. یعنی عرض بلوک با افزودن مقادیر عرض، padding، حاشیه و حاشیه به دست می آید. محتویات بلوک در صورت عدم تناسب با ابعاد مشخص شده در بالای بلوک نمایش داده می شود.	عرض برابر با مقدار عرض است.
HTML انتقالی
HTML سختگیرانه	عرض با افزودن مقادیر عرض، بالشتک، حاشیه و حاشیه تشکیل می شود. اگر محتویات بلوک با ابعاد مشخص شده مطابقت نداشته باشد، در بالای صفحه نمایش داده می شود.		عرض برابر است با مقدار عرض به اضافه padding , margin و border . اگر محتویات بلوک با ابعاد مشخص شده مطابقت نداشته باشد، در بالای صفحه نمایش داده می شود.
HTML 5
XHTML

نحو

عرض: مقدار | علاقه | خودکار | به ارث می برند

ارزش های

هر واحد طول پذیرفته شده در CSS به عنوان مقدار پذیرفته می شود - به عنوان مثال، پیکسل (px)، اینچ (in)، نقاط (pt)، و غیره. هنگام استفاده از نماد درصد، عرض عنصر بسته به عرض محاسبه می شود. عنصر والد اگر والد به صراحت مشخص نشده باشد، پنجره مرورگر مانند آن عمل می کند.

خودکار عرض را بر اساس نوع عنصر و محتوا تنظیم می کند. inherit ارزش والد را به ارث می برد.

HTML5 CSS2.1 IE Cr Op Sa Fx

نتیجه این مثال، همانطور که در مرورگر سافاری نشان داده شده است، در شکل نشان داده شده است. 1.

برنج. 1. عرض بلوک

مدل شی

document.getElementById("elementID").style.width

مرورگرها

اینترنت اکسپلورر 6 به اشتباه عرض را به صورت حداقل عرض تعریف می کند. در حالت عجیب و غریب، نسخه های اینترنت اکسپلورر تا 8.0 به اشتباه عرض یک عنصر را بدون افزودن مقادیر padding، margin یا حاشیه به آن محاسبه می کنند.

نسخه های اینترنت اکسپلورر تا 7.0 از مقدار ارثی پشتیبانی نمی کنند.

احتمالاً نیازی نیست به کسی در مورد مزایای طرح div نسبت به طرح بندی جدولی بگویید. همه مدتهاست که این را درک کرده اند و از جداول به آنها تغییر داده اند. خوب، کسانی که تغییر نداده اند به زودی اشتباهات خود را خواهند فهمید و این کار را انجام می دهند. هر درسی - در اینجا مشکلاتی نیز وجود دارد: دیواها آنطور که باید رفتار نمی کنند یا نمی توان ساختار خاصی را ترسیم کرد ، موانع زیادی وجود دارد ، اما همیشه فقط یک طراح چیدمان وجود دارد ...

این پست بیشتر برای مبتدیان در نظر گرفته شده است، اما شاید حتی حرفه ای ها چیز جالبی در اینجا پیدا کنند. پس بیایید دست به کار شویم!

این همیشه ارزش یادآوری را دارد

یک رویکرد برای چیدمان وجود دارد که باید تا حد امکان به دفعات و دقیق دنبال شود. این کانی سازی درخت DOM است. این چندین مزیت مستدل دارد: فرآیند طرح بندی را ساده می کند، تعداد خطاهای احتمالی را به حداقل می رساند و شفافیت کد را بهبود می بخشد. ما باید همیشه این را به خاطر بسپاریم و هنگام برنامه ریزی ساختار به آن توجه ویژه ای داشته باشیم.

اصول اولیه به شرح زیر است: برای تورفتگی فقط از بالشتک و حاشیه استفاده می کنیم (بسته به نیاز) - اصلاً لازم نیست یک div 20 پیکسلی جداگانه ایجاد کنید، ما تودرتو را به حداقل محدود می کنیم، در موقعیت زیاده روی نمی کنیم. : افست های نسبی و بعدی بلوک (در صورت استفاده نادرست می تواند منجر به ویرایش نیم ساعته کل کد شود)، ما به طور فعال از z-index برای رسیدن به اثر مورد نظر استفاده می کنیم.

سوالات متداول

- چگونه div ها را یکی پس از دیگری قرار دهیم؟و برای این کار از ویژگی - float: چپ (یا راست، بسته به نیاز) استفاده می کنیم، به طوری که div بعدی بعد از چنین موارد متناوب زیر آنها قرار می گیرد، آن را مشخصه clear (مثلا clear: left) قرار می دهیم.

- چگونه یک div را در مرکز قرار دهیم؟یک راه حل به نظر می رسد به روش زیر- حاشیه-چپ و حاشیه-راست را به صورت خودکار تنظیم کنید (یا حتی ساده تر - حاشیه: 0 خودکار؛)

- چگونه عناصر را در یک div به صورت عمودی قرار دهیم؟بستگی به عنصر دارد، مثلاً برای متن، فقط تعیین vertical-align:middle کافی است، اما برای یک تصویر باید line-height:Npx را مشخص کنید.

- تورفتگی با استفاده از حاشیه یا بالشتک؟اساساً، حاشیه برای تورفتگی بین بلوک ها استفاده می شود؛ این یک تورفتگی «بیرونی» است، زیرا padding یک فرورفتگی «داخلی» است و اغلب برای سازماندهی فرورفتگی در اطراف متن استفاده می شود. این یک چیز ساده به نظر می رسد، اما گاهی اوقات می توانید با جواهراتی مانند فایرباگ روبرو شوید که من نمی توانم در اینجا به آن اشاره نکنم.

- بلوک را با استفاده از حاشیه یا موقعیت: نسبی در ارتباط با افست های افقی و عمودی تغییر دهید؟البته در این موارد باید از حاشیه استفاده کنید. درست است، مانند جاهای دیگر، همه چیز به مورد خاص بستگی دارد، اما به طور کلی هنوز باید از حاشیه استفاده کنید.

- چگونه یک div را به تناسب محتویات بلوک بکشیم؟برای انجام این کار، باید ارتفاع را مشخص کنید: auto;

چگونه یک div را به ارتفاع والد خود بکشیم، که به نوبه خود به ارتفاع محتوای div واقع در داخل آن، در کنار اولین div کشیده می شود؟ محتوای div را روی ارتفاع تنظیم کنید: خودکار، دو div دیگر را روی ارتفاع: 100% و نمایش: جدول.

- چگونه یک div را نامرئی کنیم؟با دستکاری ویژگی display. برای نامرئی، آن را روی هیچ تنظیم کنید.

- چگونه محتوا را در یک div با ارتفاع ثابت اسکرول کنیم؟ما overflow:scroll را در ویژگی ها تنظیم می کنیم.

- چگونه (به عنوان مثال) تگ "a" را به عنوان یک div (بلاک) نمایش دهیم؟در ویژگی ها ارتفاع و عرض را تنظیم کنید و display:block;

این تمام چیزی است که برای تایپ بدون دردسر div ها باید بدانید. در واقع. خوب، اگر سؤال دیگری مطرح شد، بلافاصله پاسخ ها در اینجا ظاهر می شوند! اما به طور کلی، چیزی برای ترس وجود ندارد - نیم ساعت آموزش و شما در حال حاضر یک حرفه ای هستید پس این جداول قدیمی را کنار بگذارید - و به مرحله جدیدی از تکامل بروید!

برچسب ها: faq, div, layout, آموزش

هنگام طرح ریزی پروژه بعدی (یا فقط طراحی یک شبکه طرح بندی)، بسیاری با یک معضل مواجه شدند - استفاده از یک پهنای طرح بندی ثابت یا یک شبکه "لاستیکی" که با اندازه پنجره مرورگر سازگار است.

هر کدام از این راه حل ها مزایا و معایب خاص خود را دارند؛ من می خواهم روی معایب تمرکز کنم، زیرا معمولاً دقیقاً در بازتاب معایب این تصمیمات است که باید بین دو بد یکی را انتخاب کرد.

عرض شبکه طرح بندی ثابت

طرح بندی به ابعاد افقی 960-980 پیکسل (به طوری که همه چیز در اکثر دستگاه ها در اکثر وضوح ها گنجانده شده است) قرار می گیرد، که با اندازه های بزرگ پنجره افقی به نوعی سرد به نظر می رسد - یک نوار عمودی نازک از محتوای صفحه مفید و زمینه های بی فایده عظیم فضای استفاده نشده در طرفین

شبکه طرح "لاستیک" در عرض پنجره

باز هم، با اندازه پنجره های افقی بزرگ، مشکل دیگری وجود دارد: خطوط متن بسیار طولانی می شوند و خواندن آنها به هیچ وجه آنطور که می خواهیم راحت نیست.
یکی دیگر از مشکلات رایج این راه حل این است که حاشیه های جانبی با اندازه های بزرگ پنجره افقی دیگر از نظر بصری با ابعاد افقی عناصر سازگار نیستند، که همچنین هنگام نگاه کردن به چیدمان، راحتی را اضافه نمی کند.

من می خواهم یک راه حل ساده پیشنهاد کنم - حداقل اندازه افقی را به یک مقدار ثابت در پیکسل محدود کنید و حداکثر را به عنوان درصد عرض پنجره نسبی کنید. این یک راه حل بسیار پیش پا افتاده است با وسایل ساده 2 نسخه دیگر از مشخصات CSS.

به روز رسانی:من می‌خواهم این نکته را متذکر شوم که ما در مورد اثر لاستیکی کلاسیک و انطباق با تمام وضوح‌ها صحبت نمی‌کنیم، بلکه فقط در مورد طیف معقولی از وضوح‌ها صحبت می‌کنیم که چیدمان برای آن طراحی شده است. در مثال‌های زیر، این محدوده وضوح کلاسیک دسکتاپ با اندازه وضوح افقی 1024 پیکسل است.

باز هم تاکید کنم:این پست در مورد راه حلی برای انواع دستگاه ها و همه محدوده های وضوح صحبت نمی کند. این مشکل اصولاً در چارچوب یک چیدمان قابل حل نیست.، برای حل آن به هر طریقی به چندین طرح نیاز است. مگس جداگانه، کتلت جداگانه.

یک کانتینر طرح بندی ایجاد کنید:
...
ما آن را با کد سبک ساده تزئین می کنیم:
div.page-container ( حداقل عرض: 960 پیکسل؛ حداکثر عرض: 75 درصد؛ حاشیه: 0 خودکار؛ بالشتک: 0؛ )
با این حال، این راه حل ممکن است برای برخی ناکافی به نظر برسد، زیرا با اندازه پنجره های افقی بسیار بزرگ، مشکلاتی در طول خطوط دوباره ظاهر می شود. این را می توان با یک تکنیک اضافی به همان اندازه ساده حل کرد: ایجاد یک محفظه خارجی اضافی در داخل ظرفی که قبلاً توضیح داده شده است و حداکثر عرض آن را به یک مقدار ثابت محدود می کند (از لحاظ ذهنی، به نظر من مقادیر در محدوده 1400-1600 پیکسل هستند. بهترین گزینه). باز هم ما فقط استفاده می کنیم ابزارهای CSS 2.0. این راه‌حل، به‌جای افزودن عرض به‌صورت درصدی برای ظرف اصلی همانطور که در نظر اول پیشنهاد شد، در IE نیز کار خواهد کرد، که تا نسخه 9، نشان‌دهنده همزمان مقادیر را درک نمی‌کند.

اضافه کردن HTML:
...

و CSS را کمی تغییر دهید:
div.page-container ( حداکثر عرض: 75٪؛ حداقل عرض: 960 پیکسل؛ حاشیه: 0 خودکار؛ بالشتک: 0؛ ) div.page-container-inner ( حداقل عرض: 960 پیکسل؛ حداکثر عرض: 1600 پیکسل؛ حاشیه : 0 خودکار؛ بالشتک: 0؛ )
همانطور که می بینید، راه حل بسیار ساده و کاملاً جهانی است؛ می توان از آن برای هر عنصر بلوکی استفاده کرد.