درود مهمان گرامی! ثبت نام

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش مبحث box model در CSS
#1
مبحث box model در CSS
 
تمامی عناصر HTML به شکل یک باکس مطرح شده و در css زمانی از box model استفاده می شود که سخنی از دیزاین و ساختار مطرح شود.
تمامی عناصر HTML در css به صورت یک باکس تصور میشود. که این مبحث در طراحی و طرح بندی صفحات استفاده میشود.
box model یا مدل کاری که در باکس قرار می گیرند به شکل زیر هستند :
Margin
border
padding
content
تصویر زیر box model را به صورت واضح تشریح میکند.


margin : این قسمت از box model فضای اطراف border را پوشش می دهد.در ضمن نمی توان به این قسمت دیزاین از قبل پس زمینه تعیین نماییم.
border : این قسمت از box model فضای اطراف content و padding را پوشش می دهد.در ضمن می توانید رنگ ، سبک، و ضخامت border را تعیین نماییم.
padding : این قسمت از box model فضای اطراف content را پوشش می دهد.در ضمن می توانید رنگ پس زمینه را تعیین نماییید.
content : این قسمت از box model محتوای عنصر را برمی گیرد . یعنی این همان جایی است که متن و عکس ها قرار می گیرد.

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

margin :
با استفاده از این خاصیت می توانیم محتوای سایت را از اصل صفحه فاصله دهیم که به زبان ساده margin فاصله بیرونی است.
<div class=”content”>
آموزش کامل CSS
</div>
در اینجا عنصر متن آموزش کامل CSS محتوای صفحه می باشد و اگر بخواهیم ای متن را از body به اندازه ۵۰px حاشیه بدهیم از دستور زیر استفاده می کنیم.
.content {margin:50px ;}
در این صورت محتوا از طرف راست، چپ، بالا، پایین به اندازه ۵۰px فاصله میگیرند.

چگونه از margin استفاده نماییم؟

قاعده دستوری margin به شکل زیر می باشد:
margin : margin-top margin-right margin-botom margin-left ;
یعنی :
margin: 10px 15px 20px 40px ;
در مثال بالا ما به اندازه ۱۰px از طرف بالا، به اندازه ۲۰px از سمت راست ، به اندازه ۱۵px از طرف پایین ، به اندازه ۴۰px از چپ فاصله ایجاد کردیم.

انواع نوشتن margin در css :

;margin:10px 5px 15px 20px
سمت بالا ۱۰px، سمت راست ۵px ، سمت پایین ۱۵px سمت چپ ۲۰px
; margin:10px 5px 20px
سمت بالا ۱۰px،سمت راست و چپ ۵px، سمت چپ ۲۰px
; margin:10px 5px
سمت بالا، پایین ۱۰px، سمت چپ و راست ۵px
;margin:10px
سمت بالا، پایین،چپ، راست ۱۰px
در بالا شما نوعی خلاصه نویسی را مشاهده میکنید، اما میتوان هر کدام را به شکل مجزا نیز بنویسید.
margin-top: فاصله از بالا
margin-right: فاصله از سمت راست
margin-bottom: فاصله از پایین
margin-left: فاصله از چپ
مثال:
margin-top :20px ;
margin-right :30px ;
margin-lift :10px ;
margin-bottom :15px ;
padding:
این خاصیت در کل برای ایجاد نمودن فاصله داخلی به کار می رود .
<div class=”content”>
آموزش کامل CSS
</div>
در اینجا ما فاصله را از تگ فرزند تطبیق می کنیم. اگر ساده تر بگویم! متن ما (آموزش کامل CSS) را در بین یک باکس در نظر بگیرید فاصله باکس از اصل صفحه را margin و فاصله متن از باکس را padding می گوییم .

.content { margin:50px ; }
padding فاصله محتوای درون تگ را با لبه ی تگ تعیین میکند.به طوری که padding را فاصله داخلی می نامیم.

چگونه از padding استفاده نماییم؟

قاعده دستوری padding به شکل زیر میباشد:
padding: padding-top padding-raight padding-bottom padding-left ;
یعنی
padding:10px 20px 15px 40px ;
در مثال بالا ما به اندازه ۱۰px از طرف بالا، به اندازه ۲۰px از سمت راست، به اندازه ۱۵px از طرف پایین، به اندازه ۴۰px از چپ از لبه تگ تا محتوای داخل تگ فاصله ایجاد کردیم.

انواع نوشتن padding در css :

padding:10px 5px 15px 20px;
سمت بالا ۱۰px، سمت راست ۵px ، سمت پایین ۱۵px سمت چپ ۲۰px
padding:10px 5px 15px;
سمت بالا ۱۰px،سمت راست و چپ ۵px، سمت پایین ۱۵px
padding: 10px 5px;
سمت بالا، پایین ۱۰px، سمت چپ و راست ۵px
padding: 10px;
سمت بالا، پایین ،چپ ، راست ۱۰px
در بالا شما نوعی خلاصه نویسی را مشاهده می کنید، اما می توان هر کدام را به شکل مجزا نیز بنویسید .
padding-top : فاصله از بالا
padding-right : فاصله از سمت راست
padding-bottom : فاصله از پایین
padding-left : فاصله از چپ
مثال :
padding-top:20px ;
padding-right:30px ;
padding-left:10px ;
padding-bottom:15px ;

-----------------------------------------------------------------

 آموزش مبحث box model در CSS

آموزش کامل HTML

آموزش کامل CSS

 طراحی سایت با کمترین قیمت و بهترین کیفیت
پاسخ




کاربرانِ درحال بازدید از این موضوع: 1 مهمان