ارتفاع، عرض و سرریز قوانین CSS برای توصیف ناحیه محتوا در طرح بندی بلوک هستند. سرریز عناصر بلوک را کنترل کنید

شرح

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

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

نحو

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

ارزش های

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

مدل شی

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

مرورگرها

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

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

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

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

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

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

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

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

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

سرریز عنصر

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

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

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

متن پاراگراف اول

متن دوم

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

حالا بیایید اولین تغییر را انجام دهیم و عرض پاراگراف اول را کد سخت کنیم (عرض: 50 پیکسل):

متن اولی

متن دوم

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

اما بیایید اکنون ارتفاع ظرف را با ارتفاع: 15 پیکسل نیز محدود کنیم.

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

سرریز به معنای سرریز یا به عبارتی سرریز محتوا است. این نشان می دهد که اگر محتوا در محدوده (کانتینری) که به آن اختصاص داده شده است قرار نگیرد، چه اتفاقی باید بیفتد.

Overflow چندین مقدار معتبر دارد، اما پیش فرض این است قابل مشاهده (نمایش):

به همین دلیل است که در آخرین مثال ما، متن پاراگراف بالا به پاراگراف پایین می رود (به طور پیش فرض از overflow:visible استفاده می شود - برای نشان دادن محتوایی که در ظرف قرار نمی گیرد). ما می توانیم از افراط دیگر استفاده کنیم - سرریز: پنهان. سپس هر چیزی که داخل ظرف قرار نمی گیرد در صفحه وب نشان داده نمی شود:

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

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

به عنوان مثال، در مورد استفاده از overflow:auto، ما می‌توانیم فقط در امتداد محوری پیمایش کنیم که محتوا در محدوده‌های کانتینر قرار نگیرد:

متن اولی

متن دوم

به طور خلاصه، می توان گفت که Overflow کاملاً اجازه می دهد به طور انعطاف پذیر گزینه های نمایش محتوا را سفارشی کنیددر صورتی که از ظرف خود خارج شود. شما این فرصت را خواهید داشت که محتوایی را که باقی مانده است (قابل مشاهده) نشان دهید، نه نشان دادن (برش - پنهان)، یا یک پیمایش اجباری (پیمایش) یا پیمایش در صورت نیاز (خودکار) انجام دهید.

گزینه های دیگری برای نوشتن این قانون مربوط به CSS3 وجود دارد، اما همه مرورگرها از آنها پشتیبانی می کنند، به این معنی که می توان با خیال راحت از آنها استفاده کرد. من در مورد گزینه های overflow-x و overflow-y صحبت می کنم که به شما امکان می دهد پیمایش را در محورهای جداگانه تنظیم کنید یا تنظیم نکنید (x افقی است، y عمودی است).

به عنوان مثال، اگر باید مطمئن شوید که پیمایش افقی هرگز ظاهر نمی شود، و پیمایش عمودی فقط در صورت لزوم ظاهر می شود (اگر محتوا مناسب نباشد)، برای عنصر Html باید overflow-x: hidden و overflow- را بنویسید. y: خودکار همه چیز، کار حل خواهد شد، زیرا این تظاهر توسط همه مرورگرها پشتیبانی می شود.

ارتفاع و عرض به صورت درصد - چرا به یک doctype نیاز داریم

حالا بیایید در مورد اینکه درصد عرض از چه چیزی محاسبه می شود صحبت کنیم. به یاد داشته باشید، در ابتدای مقاله، من قول دادم که توجه خود را بر این موضوع متمرکز کنم. خوب، در واقع، عرض قانون CSS در اینجا مستثنی نیست و درست مانند padding و margin، به عنوان درصدی از اندازه افقی محفظه محتوا محاسبه می شود.

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

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

به منظور جدا کردن اسناد جدید (که تمام استانداردهای در حال ظهور را در نظر می گرفت) و اسناد قدیمی (اغلب با در نظر گرفتن چیزی جز Html خالص)، Melkosoft پیشنهاد کرد از یک ویژگی کوچک از زبان XML استفاده شود که به تازگی در آن زمان ظاهر شده بود. این ویژگی سرویس بود و اکنون به آن Doctype Declaration گفته می شود.

ممکن است متفاوت به نظر برسد (در مقاله ای که در بالا ذکر شد بیشتر بخوانید)، اما این گزینه همیشه کار خواهد کرد:

بنابراین، مرورگر نشانگری از استانداردهایی که باید برای تجزیه سند استفاده کند دریافت کرد. اگر یک اعلامیه doctype داده شود، سپس به حالت استاندارد می رود. اگر مرورگر doctype را در کد سند در خط اول خود پیدا نکند (یا به اشتباه نوشته شود، که مشابه عدم وجود آن است)، سپس به اصطلاح وارد می شود. حالت ترفند(حالت عجیب و غریب).

سندی که doctype نداشته باشد در مرورگر به گونه ای نمایش داده می شود که گویی بسیار قدیمی (عتیقه) است. اگر یک اعلامیه را به همان سند اضافه کنید، مرورگر از قبل قدمت خود را رها می کند و با کد سند مطابق با تمام استانداردهای پذیرفته شده فعلی کار می کند.

اما مفهوم باستانی بسیار متفاوت است. به عنوان مثال، یک مرورگر محبوب اکنون چه نوع قدمتی می تواند داشته باشد؟ گوگل کروم، که فقط در سال 2008 ظاهر شد؟ IE، البته، تاریخ نسبتاً غنی دارد. بنابراین، تمام مرورگرهای هر نسخه، سند را بدون اعلان (در حالت quirks یا ترفندها) به همان روشی که نسخه قدیمی انجام می‌داد نمایش می‌دهند، زیرا این نسخه نسخه پایه در نظر گرفته می‌شود.

چرا من برای مدت طولانی در مورد حالت های نمایش مرورگر صحبت کردم؟ اما چون برای این دو حالت، تعیین ارتفاع (ارتفاع) منطقه محتوا به صورت درصدی نسبت به محاسبه همین ارتفاع بسیار متفاوت است.

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

اگر اعلان doctype از کد سند حذف شود، تصویر زیر را مشاهده خواهیم کرد:

برای حالت پیروی از استانداردها (اعلامیه در ابتدای سند نوشته شده است)، ابتدا باید ارتفاع ظرف را تنظیم کنید (در مورد ما، تگ Body به عنوان ظرف برای Div عمل می کند) و تنها پس از آن مرورگر ارتفاع را به درستی تعیین می کند: 100٪:

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

اگر ارتفاع و عرض هر عنصر Html را برای ناحیه محتوا تنظیم کنید، و همچنین padding و عرض فریم (حاشیه) را برای این تگ مشخص کنید، در حالت quirks (بدون اعلان نوشته شده) در مرورگرهای مختلفاین همه را می توان به روش های مختلف تفسیر کرد.

در مرورگر قدیمی IE 5.5، بالشتک و عرض حاشیه از اندازه های مشخص شده از طریق ارتفاع و عرض به سمت داخل محاسبه می شود. آن ها اندازه کل عنصر با آنچه در آنها مشخص شده است مطابقت دارد ویژگی های CSS(این یک طرح منسوخ است که دیگر مورد استفاده قرار نمی گیرد).

در بقیه مرورگرهای مدرنبالشتک و عرض حاشیه به ابعاد داده شده در ارتفاع و عرض اضافه می شود. آن ها در این حالت (حالت gimmick بدون doctype) ابعاد اولیه منطقه محتوا با مقدار padding و حاشیه گسترش می یابد.

خوب، اگر دستورالعملی در سند نوشته شده باشد، در تمام مرورگرهای مدرن و قدیمی می توان به راحتی از این مشکلات با دوگانگی رویکرد جلوگیری کرد. در این حالت و در IE 5.5، طبق استانداردهای مدرن CSS، مقدار padding و عرض حاشیه به اندازه ناحیه محتوا اضافه می شود. بنابراین، به منظور اجتناب از همیشه doctype بنویسید.

موفق باشی! به زودی شما را در سایت صفحات وبلاگ می بینیم

ممکن است علاقه مند باشید

موقعیت (مطلق، نسبی و ثابت) - روش های موقعیت یابی عناصر HTMLدر CSS (قوانین چپ، راست، بالا و پایین)
شناور و پاک کردن در CSS - ابزارهای طرح بندی بلوک
Padding، Margin و Border - لایه‌های داخلی و خارجی CSS و همچنین حاشیه‌ها را برای همه طرف‌ها (بالا، پایین، چپ، راست) تنظیم می‌کنیم.
تعیین موقعیت با شاخص Z و قانون مکان‌نما CSS برای تغییر مکان‌نمای ماوس
CSS برای چیست، چگونه استایل شیت های آبشاری را به آن متصل کنیم سند htmlو نحو اصلی این زبان
انتخابگرهای برچسب، کلاس، شناسه و جهانی، و همچنین انتخابگرهای ویژگی در CSS مدرن طراحی متفاوت برای داخلی و لینک های خارجیاز طریق CSS
اولویت ها در Css و افزایش آنها به دلیل مهم، ترکیب و گروه بندی انتخابگرها، سبک های کاربر و نویسنده
نمایش (بلاک، هیچ، درون خطی) در CSS - تنظیم نوع نمایش عناصر Html در یک صفحه وب
واحدهای اندازه (پیکسل، Em و Ex) و وراثت قانون در CSS

شرح

برای تغییر اندازه یک تصویر با استفاده از HTML، ویژگی های ارتفاع و عرض ارائه می شود. می توانید از مقادیر به صورت پیکسل یا درصد استفاده کنید. اگر نماد درصد تنظیم شده باشد، ابعاد تصویر نسبت به عنصر والد - ظرفی که برچسب در آن قرار دارد، محاسبه می شود. . اگر کانتینر والد وجود نداشته باشد، پنجره مرورگر به عنوان محفظه والد آن عمل می کند. به عبارت دیگر، عرض = "100٪" به این معنی است که تصویر به عرض کامل صفحه وب کشیده می شود. افزودن تنها یک ویژگی عرض یا ارتفاع، نسبت تصویر و نسبت تصویر را حفظ می کند. سپس مرورگر منتظر می ماند تا تصویر به طور کامل بارگذاری شود تا ارتفاع و عرض اولیه آن را تعیین کند.

مطمئن شوید که تمام تصاویر موجود در صفحه وب را اندازه بگیرید. این باعث می شود صفحه کمی سریعتر بارگذاری شود زیرا مرورگر مجبور نیست اندازه هر تصویر را پس از دریافت آن محاسبه کند. این عبارت مخصوصاً برای تصاویری که در داخل جدول قرار داده شده اند مهم است.

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

نحو

HTML
XHTML

ارزش های

هر عدد صحیح مثبت بر حسب پیکسل یا درصد.

مقدار پیش فرض

عرض اصلی تصویر.

HTML5 IE Cr Op Sa Fx

سلام، خواننده عزیز

این یازدهمین درس CSS است. در این درس تنها دو ویژگی ساده اما مهم را در نظر خواهیم گرفت. این ویژگی ها مسئول ارتفاع و عرض بلوک هستند.

قبل از مطالعه این درس، درس های قبلی را مرور کنید:

تئوری و عمل

در درس آخر به بررسی مدل جعبه، تورفتگی های داخلی و خارجی پرداختیم. در این مورد ما فقط دو ویژگی را در نظر خواهیم گرفت: ارتفاع و عرض بلوک. ارتفاع در CSS توسط ویژگی تنظیم می شود ارتفاع و ویژگی width عرض . بیایید نگاهی به کد یک مثال واقعی بیندازیم (نمونه ای از درس گذشته می گیریم):

و در CSS برای هر بلوک