1000 * 0.75 = 750 پیکسل است. اگر کاربر پنجره مرورگر را تغییر اندازه دهد، عرض عنصر بدنه و بر این اساس، عرض بلوک div تودرتو نیز تغییر می کند.

مقادیر درصد برای ویژگی height به طور مشابه با ویژگی width عمل می کند، فقط اکنون ارتفاع از ارتفاع عنصر ظرف محاسبه می شود.

مثلا:

در عین حال، ابعاد واقعی عنصر ممکن است با ابعاد تعیین شده در ویژگی های عرض و ارتفاع متفاوت باشد. مثلا:

همانطور که در اسکرین شات می بینید، در واقعیت، مقدار ویژگی width - 200px - فقط عرض محتوای داخلی عنصر را تعیین می کند و در زیر بلوک خود عنصر، فضایی اختصاص می یابد که عرض آن است. برابر است با عرض محتوای داخلی (ویژگی عرض) + padding (ویژگی padding) + عرض حاشیه (ویژگی حاشیه-width) + حاشیه ها (ویژگی margin). یعنی عرض عنصر 230 پیکسل و عرض بلوک المان با احتساب حاشیه ها 250 پیکسل خواهد بود.

چنین محاسباتی باید هنگام تعیین ابعاد عناصر در نظر گرفته شود.

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

حداقل عرض: حداقل عرض

حداکثر عرض: حداکثر عرض

حداقل ارتفاع: حداقل ارتفاع

حداکثر ارتفاع: حداکثر ارتفاع

حداقل عرض: 200 پیکسل عرض: 50%; حداکثر عرض: 300 پیکسل

در این حالت عرض المان برابر با 50 درصد عرض المنت ظرف است، البته نمی تواند کمتر از 200 پیکسل و بیشتر از 300 پیکسل باشد.

بازتعریف عرض بلوک

ویژگی box-sizing به شما این امکان را می دهد که اندازه های تنظیم شده عناصر را نادیده بگیرید. می تواند یکی از مقادیر زیر را بگیرد:

content-box: مقدار پیش‌فرض ویژگی، که در آن مرورگر پهنای حاشیه و بالشتک را به مقادیر ویژگی‌های عرض و ارتفاع اضافه می‌کند تا عرض و ارتفاع واقعی عناصر را تعیین کند.

padding-box: به مرورگر وب می گوید که عرض و ارتفاع عنصر باید شامل padding به عنوان بخشی از مقدار آن باشد. برای مثال، فرض کنید سبک زیر را داریم:

عرض: 200 پیکسل ارتفاع: 100 پیکسل؛ حاشیه: 10 پیکسل بالشتک: 10 پیکسل حاشیه: 5px جامد #ccc; background-color: #eee; box-sizing: padding-box;

در اینجا عرض واقعی محتوای داخلی بلوک 200px (عرض) - 10px (padding-left) - 10px (padding-right) = 180px خواهد بود.

شایان ذکر است که اکثر مرورگرهای مدرناین ویژگی را پشتیبانی نمی کند.

border-box: به مرورگر وب می گوید که عرض و ارتفاع عنصر باید شامل padding و حاشیه به عنوان بخشی از مقدار آن باشد. برای مثال، فرض کنید سبک زیر را داریم:

عرض: 200 پیکسل ارتفاع: 100 پیکسل؛ حاشیه: 10 پیکسل بالشتک: 10 پیکسل حاشیه: 5px جامد #ccc; background-color: #eee; box-sizing: border-box;

در اینجا عرض واقعی محتوای داخلی بلوک 200 پیکسل (عرض) - 10 پیکسل (بالشتک-چپ) - 10 پیکسل (بالا کردن-راست) - 5 پیکسل (حاشیه-چپ-عرض) - 5 پیکسل (حاشیه-راست-عرض) = 170 پیکسل.

به عنوان مثال، اجازه دهید دو کادر را تعریف کنیم که فقط در مقدار ویژگی box-sizing با هم تفاوت دارند:

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

شرح

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

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

نحو

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

ارزش های

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

برنج. 1. اعمال ویژگی ارتفاع

مدل شی

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

مرورگرها

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

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

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

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

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

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

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

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

تلاش كردن "

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

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

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

سرریز عنصر

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

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

در این مقاله به بررسی این موضوع می پردازیم که چگونه در CSS می توانید ارتفاع یک بلوک را به صورت درصدی از عرض آن تنظیم کنید. ما کاربرد این فناوری را با استفاده از مثال ایجاد چرخ فلک بوت استرپ (اسلایدر) از تصاویر با اندازه های مختلف در نظر خواهیم گرفت.

ایجاد یک بلوک با ارتفاعی که درصد مشخصی از عرض آن را داشته باشد

1. یک ساختار HTML از 2 بلوک ایجاد کنید:
   بلوک اول دارای 2 کلاس است. با استفاده از کلاس item-responsive، اجازه دهید بلوک را روی موقعیت نسبی قرار دهیم. این باید برای بلوک 2 انجام شود (که خواهد داشت موقعیت یابی مطلق) نسبت به آن واقع شده است. علاوه بر این، از این کلاس برای اضافه کردن شبه عنصر: قبل از محتوای عناصر مربوطه (item-responsive) نیز استفاده می شود. این عنصر با استفاده از ویژگی padding-top CSS، ارتفاع بلوک مورد نظر را نسبت به عرض آن تنظیم می کند. فوت و فن این روشاین است که اگر ویژگی padding روی مقدار تنظیم شود نه در پیکسل، بلکه به صورت درصد، سپس توسط مرورگر نسبت به عرض آن محاسبه می شود. بنابراین، می توانید یک بلوک با ارتفاع مورد نیاز دریافت کنید. مرحله بعدی این است که به بلوک 2 موقعیت مطلق داده و آن را با بلوک اول تراز کنید.
2. کد CSS زیر را به صفحه اضافه کنید: .item-responsive ( موقعیت: نسبی؛ /* موقعیت نسبی */ ) .item-responsive:before ( display: block; /* نمایش عنصر به عنوان یک بلوک */ محتوا: "" . >.content ( موقعیت: مطلق؛ /* موقعیت مطلق عنصر */ /* موقعیت عنصر */ بالا: 0؛ چپ: 0؛ راست: 0؛ پایین: 0؛ ) /* اختیاری (برای بلوک هایی که دارای این کلاس ها) */ .item -4by3 ( padding-top: 75%; /* (3:4)*100% */ .item-2by1 (padding-top: 50%; /* (1:2)* 100% */ ) .item -1by1 ( padding-top: 100%; /* (1:1)*100% */ )

استفاده از فناوری فوق در هنگام ایجاد چرخ فلک بوت استرپ

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

بیایید مثالی را در نظر بگیریم که در آن از ساختار HTML و کد CSS بالا برای نمایش اسلایدهای چرخ فلک بوت استرپ استفاده می کنیم.

ما از فایل های زیر به عنوان تصویر استفاده خواهیم کرد:

• carousel_1.jpg (عرض = 736 پیکسل، ارتفاع = 552 پیکسل، نسبت تصویر (ارتفاع به عرض) = 1.33)؛
• carousel_2.jpg (عرض = 1155 پیکسل، ارتفاع = 1280 پیکسل، نسبت تصویر (ارتفاع به عرض) = 0.9)؛
• carousel_3.jpg (عرض = 1846 پیکسل، ارتفاع = 1028 پیکسل، نسبت تصویر (ارتفاع به عرض) = 1.8)؛
• carousel_4.jpg (عرض = 1140 پیکسل، ارتفاع = 550 پیکسل، نسبت تصویر (ارتفاع به عرض) = 2.07)؛
• carousel_5.jpg (عرض = 800 پیکسل، ارتفاع = 600 پیکسل، نسبت تصویر (ارتفاع به عرض) = 1.33)؛

تصاویر به عنوان پس زمینه تنظیم می شوند. این به چرخ فلک Bootstrap 3 اجازه می دهد تا از تصاویر با نسبت های مختلف استفاده کند.

نشانه گذاری HTML چرخ فلک:

کد CSS چرخ فلک:

مورد پاسخگو ( موقعیت: نسبی؛ /* موقعیت نسبی */ ) .item-responsive:before (نمایش: بلوک؛ /* عنصر نمایش به عنوان بلوک */ محتوا: ""؛ /* محتوای شبه عنصر */ عرض: 100 %; /* عرض عنصر */ ) .item-16by9 ( padding-top: 56.25%; /* (9:16)*100% */ ) .item-responsive>.content ( موقعیت: مطلق؛ /* عنصر مطلق موقعیت * / /* موقعیت عنصر */ بالا: 0؛ چپ: 0؛ راست: 0؛ پایین: 0؛ اندازه پس زمینه: جلد !مهم؛ )

بیشتر عناصر در HTML معمولاً ارتفاع و عرض خاصی دارند. تنظیم این پارامترها در CSS بسیار آسان و در نتیجه عملی است. ویژگی های ارتفاع و عرض که قبلاً برای شما شناخته شده است برای این مورد استفاده می شود. با این حال، در این درس در مورد عرض و ارتفاع غیر ثابت یا لاستیک، یعنی بسته به عرض خود پنجره صحبت خواهیم کرد. بیا شروع کنیم)

عرض

این ویژگی یک خاصیت را تعیین می کند عرض HTMLعنصر مقدار را می توان در پیکسل، درصد مشخص کرد (مقادیر دیگر کمتر استفاده می شوند).

بلوک من (
عرض: 400 پیکسل /* عرض 400 پیکسل */

}
یا به صورت درصد:

MyBlockPercent50 (
عرض: 50% /* عرض 50٪ از عرض جعبه یا پنجره (اگر داخل جعبه با عرض ثابت نباشد) */
رنگ: #f1f1f1; /* بلوک خاکستری روشن */
}
بر این اساس، بلوکی دریافت می کنیم که همیشه نصف عرض والد خواهد بود.

حالا در مورد جالب ترین. عرض دارای پارامترهایی است که حداکثر یا حداقل عرض را مشخص می کند. اینها به ترتیب ویژگی های حداقل عرض و حداکثر عرض هستند. همچنین می توانید مقادیر آنها را به صورت پیکسل، درصد و مقادیر دیگر مشخص کنید. این ویژگی ها اساس ایجاد طرح های لاستیکی و تطبیقی ​​().

مثال طراحی تطبیقی . نگاه کنید، اندازه پنجره مرورگر را تغییر دهید:

من البته از خودم جلوتر می پرم. اما باید درک کنید که به چه چیزی و چرا نیاز دارید. بله، و یک نتیجه دلپذیر را لمس کنید)

همانطور که قبلاً فهمیدید، با کمک این ویژگی‌ها، می‌توانید با انعطاف‌پذیری بیشتری عناصر صفحه را بدون تحریف محتوا مدیریت کنید. چگونه کار می کند؟ بیایید کد را در نظر بگیریم.

مسدود کردن (
حداکثر عرض: 800 پیکسل
رنگ پس زمینه: #f1f1f1; /* بلوک خاکستری روشن */
بالشتک: 20 پیکسل
}
بلوکی با این خصوصیات با عرض والد 200 پیکسل مقدار مربوطه را به خود می گیرد، اما اگر بلوک والد بزرگتر باشد، مثلاً 1000 پیکسل، آنگاه از قبل حداکثر عرض خود را به خود می گیرد، یعنی 800 پیکسل. یعنی تا زمانی که عرض بلوک والد 801 پیکسل یا بیشتر شود افزایش می یابد. علاوه بر این، بلوک بلوک همیشه حداکثر عرض مجاز خود را 800 پیکسل خواهد داشت.

ارتفاع

این ویژگی مسئول ارتفاع عنصر است. به عنوان یک مقدار، همه همان موارد مناسب برای CSS استفاده می شود. اکثراً درصدها و پیکسل های یکسانی هستند.

اطلاعات(
ارتفاع: 200 پیکسل؛ /* ارتفاع بلوک 200 پیکسل خواهد بود */
بالشتک: 10 پیکسل /* در مورد padding داخل بلوک تکرار کنید =) */
}
که منطقی است، برای ارتفاع، می توانید مقادیر حداقل و حداکثر ارتفاع را برای عنصر با ویژگی min-height و max-height به ترتیب مشخص کنید.

اطلاعات(
حداکثر ارتفاع: 360 پیکسل /* حداکثر ارتفاع بلوک */
حداقل ارتفاع: 120 پیکسل؛ /* حداقل ارتفاع بلوک */
}
همانطور که می بینید، ویژگی ها می توانند و اغلب باید به صورت جفت استفاده شوند.
یا مقادیر را ترکیب کنید:

محتوا(
ارتفاع: 100%; /* ارتفاع همیشه 100% خواهد بود */
عرض: 760 پیکسل /* اما عرض در 760px ثابت است */
}
اگر سوالی دارید، در نظرات بنویسید!

با تشکر از توجه شما! در چیدمان موفق باشید!)