Box-sizing در CSS
- مبحث شانزدهم آموزش CSS : کار با Box-sizing در CSS
ویژگی box-sizing در CSS به ما اجازه می دهد تا عرض و ارتفاع کل یک عنصر را به راحتی درج کنیم.
در این مبحث از آموزش CSS در مورد box-sizing صحبت میکنیم
حتماً وقتی کد نویسی میکنید به این مشکل مواجه شده اید که زمانی یک عنصر را Padding یا Border میدهید در عرض و ارتفاع آن نیز تاثیر میگذارد و شما را دچار مشکل میسازد، چون باید عرض و ارتفاع را نسبت به Padding یا Border که قبلاً دادید تغییر بدهید.
خوشبختانه در CSS3 با استفاده از Border-sizing می توانیم این مشکل را حل کرده .
برای درک بهتر موضوع به مثال زیر دقت کنید:
کد HTML :
<div class="main"> <div class="box"></div> </div>
کد CSS :
.main{width:600px; height:150px; background-color:yellow;}
.box{width:50%; height:150px; background-color:red;}
توسط کد بالا ما دو باکس (یک باکس اصلی با رنگ زرد) و (یک باکس فرزند سرخ) ایجاد کردیم و نتیجه به شکل زیر میباشد:
در کد بالا گفتیم که عرض باکس فرزند یا داخلی ۵۳ درصد باکس اصلی باشد، این دستور به درستی انجام شد و هیچ مشکلی ندارد.
خوب حالا ما به باکس داخلی (فرزند) border میدهیم.
.box{width:50%; height:150px;
Background-color:red; Border:20px solid black;
}
حالا وقتی border دادیم به عرض و ارتفاع باکس داخلی (فرزند) اضافه میشود:
قبلاً برای درست کردن این مشکل باید شما اندازه باکس فرزند را کوچک نموده و با اضافه نمودن Border اندازه آن درست میگردید اما خوشبختانه حالا شما میتوانید با قابلیت جدید Box-sizing در CSS3 میتوانید به راحتی این کار را انجام دهید.
به کد CSS زیر دقت کنید:
.box{width:50%; height:150px;
Background-color:red; Border:20px solid black;
Box-sizing:border-box; -webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
حالا از دستور بالا چنین نتیجه بدست می آید:
خوب شاید برای تان استفاده این دستور در هر خاصیت (Border و Padding) مشکل باشد و وقت تان را ضایع کند. برای حل این مشکل کافیست که در ابتدای فایل CSS تان کد زیر را اضافه نمایید تا بالای تمام عناصر اعمال گردد.
*{
Box-sizing:border-box; -webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
شما با استفاده از Box-sizing میتوانید بالای Padding نیز تطبیق کنید.
یادداشت : توجه داشته باشید که Box-sizing تنها بالای عناصر Border و Padding کار می دهد، چون تنها در این عناصر مشکل ایجاد میشود.
خوب ، در پایان امیدوارم از مقاله آموزشی امروز ما در مورد Box-sizing در CSS خوشتان آمده باشد و برای شما مفید واقع شده باشد. توصیه می کنم از مجموعه مقالات آموزش css ما دیدن کنید.
دیدگاه ها