You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
مبحث شانزدهم: Box-sizing<br />
در این مبحث از کتاب در مورد box-sizing صحبت میکنیم.<br />
حتماً وقتی کد نویسی میکنید به این مشکل مواجه شده اید که زمانی یک عنصر را<br />
Padding<br />
Border<br />
یا<br />
میدهید در عرض و ارتفاع آن نیز تاثیر میگذارد و شما را دچار مشکل میسازد، چون باید<br />
عرض و ارتفاع را نسبت به<br />
خوشبختانه در<br />
Padding یا Border<br />
<strong>CSS</strong>3<br />
با استفاده از<br />
Border-sizing<br />
برای درک بهتر موضوع به مثال زیر دقت کنید:<br />
:HTML کد<br />
که قبالً دادید تغییر بدهید.<br />
این مشکل را حل کرده میتوانیم.<br />
<br />
<br />
<br />
کد<br />
آموزش کاربردی <strong>CSS</strong>3<br />
:<strong>CSS</strong><br />
توسط کد باال ما دو باکس )یک باکس اصلی با رنگ زرد( و) یک باکس فرزند سرخ( ایجاد کردیم<br />
و نتیجه به شکل زیر میباشد:<br />
آموزش کاربردی <strong>CSS</strong>3<br />
.main{width:600px; height:150px; background-color:yellow;}<br />
.box{width:50%; height:150px; background-color:red;}<br />
در کد باال گفتیم که عرض باکس فرزند یا داخلی 53 درصد باکس اصلی باشد، این دستور به<br />
درستی انجام شد و هیچ مشکلی ندارد.<br />
112<br />
”رسولی” نویسنده: فردوس
Change language