مدل CSS Box با مثال توضیح داده شده است

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

مدل CSS Box چیست؟

مدل جعبه CSS استانداردی است که توسط کنسرسیوم شبکه جهانی وب ایجاد شده است. تمام عناصر یک سند HTML را به عنوان جعبه های مستطیلی با ابعاد خاص خود توصیف می کند. این جعبه ها شامل یک محتوا و حاشیه اختیاری ، نواحی حاشیه ای و پد می شوند. بنابراین ، اجازه دهید قسمت های یک جعبه CSS را بررسی کنیم.

بیایید چهار لایه مدل جعبه CSS را کشف کنیم.

لایه اول: محتوا

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

لایه دوم: پدینگ

Padding فاصله بین جعبه محتوا و جعبه حاشیه آن است. اگرچه در محتوای شما به عنوان فضای سفید نشسته است ، اما می توانید از رنگ پس زمینه برای تجسم تفاوت استفاده کنید. برای تغییر فضا می توانید از ویژگی های padding-top ، padding-right ، padding-bottom و padding-left استفاده کنید.

لایه سوم: مرز

حاشیه محتوا و ناحیه بالشتک را می پوشاند. می توانید با استفاده از ویژگی های عرض-عرض ، سبک حاشیه و رنگ حاشیه ، اندازه و تغییر اندازه را ایجاد کنید.

لایه چهارم: حاشیه

آخرین لایه مدل جعبه به طور گسترده ای برای ایجاد فضای بین عناصر استفاده می شود. حاشیه محتوا ، پد و محدوده را می پوشاند. می توانید از خصوصیات margin-top ، margin-right ، margin-bottom و margin-left استفاده کنید. همچنین می توانید به ویژگی حاشیه یک مقدار منفی یا خودکار بدهید تا به برخی از تکنیک های عالی قرارگیری دست یابید.

راه اندازی پروژه برای مدل جعبه CSS

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

ساختار با HTML

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet" />
 <link rel="stylesheet" href="style.css" />
 <title>CSS Box Model</title>
 </head>
 <body>
 <img class="content-box display" src="img/second-content-image.jpg" alt="smartphone">
 <img class="content-box" src="img/content-image.jpg" alt="clock">
 </body>
 </html>

خروجی:

می توانید از ویژگی های داخلی مرورگر خود مانند Chrome Developer Tools استفاده کنید تا ببینید چه خبر است. ما از دو تصویر از Unsplash استفاده می کنیم. برای سادگی ، ما تصویر تلفن هوشمند را با استفاده از صفحه نمایش پنهان می کنیم : هیچ؛ تا بعداً به آن نیاز داشته باشیم

سبک سازی با استفاده از CSS

 /*************************
 BASIC STYLING
 *************************/
 * {
 margin: 0px;
 padding: 0px;
 }
 body {
 display: flex;
 flex-direction: row;
 }
 .display {
 display: none !important;
 }

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

 /*************************
 CONTENT BOX
 *************************/
 .content-box {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 /* Styling the content box using height and width properties */
 background-color: #fdf;
 height: 20em;
 width: 30em;
 }

با محفظه تنفس کنید

شما می توانید ویژگی های padding-top ، padding-right ، padding-bottom و padding-left را به صورت جداگانه تنظیم کنید یا از مختصر نویسی استفاده کنید. سعی کنید در صورت امکان از مختصر نویسی استفاده کنید ، زیرا می تواند در وقت شما صرفه جویی کند. بیایید ببینیم نحوه عملکرد پدینگ چگونه است.

 /*************************
 PADDING
 *************************/
 /* Applying padding */
 padding-top: 5em;
 padding-right: 2em;
 padding-bottom: 8em;
 padding-left: 2em;

 /* Padding shorthand */

 /* top/right/bottom/left */
 padding: 5em 2em 8em 2em;

 /* top/horizontal/bottom */
 padding: 5em 2em 8em;

خروجی:

با استفاده از Border خطوط اطراف Padding را ترسیم کنید

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

همچنین می توانید شعاع حاشیه را طوری تنظیم کنید که کادر گوشه های گرد با شعاع px ، rem ، em یا درصد داشته باشد.

 /*************************
 BORDER
 *************************/
 /* Applying border properties */
 /* Set the border color */
 border-color: rgb(148, 234, 255);
 /* Select border style */
 border-top-style: solid;
 border-right-style: dashed;
 border-bottom-style: groove;
 border-left-style: ridge;

 /* border-style shorthand */
 /* top/right/bottom/left */
 border-style: solid dashed groove ridge;

 /* Set border width */
 border-top-width: 4em;
 border-right-width: 2em;
 border-bottom-width: 2em;
 border-left-width: 2em;

 /* border-width shorthand*/
 /* top/right/bottom/left */
 border-width: 4em 2em 2em 2em;

 /* top/horizontal/bottom */
 border-width: 4em 2em 2em;

 /* border property shorthand */
 /* border: 4em solid rgb(148, 234, 255); */

 /* Set border-radius */
 border-radius: 5em;
 border-radius: 20%;

خروجی:

فاصله بین جعبه ها را با حاشیه اضافه کنید

می توانید با استفاده از margin: 0 auto یک جعبه را به صورت افقی در مرکز قرار دهید ، به شرطی که عرض آن مشخص باشد.

 /*************************
 MARGIN
 *************************/
 /* Applying margin properties */
 margin-top: 4em;
 margin-right: 5em;
 margin-bottom: 3em;
 margin-left: 5em;

 /* Margin shorthand */
 /* top/right/bottom/left */
 margin: 4em 5em 3em 5em;
 /* top/horizontal/bottom */
 margin: 4em 5em 3em;

 /* Using auto margin */
 margin: 3em auto;

خروجی:

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

  • هنگامی که فقط یک مقدار را تعیین می کنید ، به این معنی است که هر چهار طرف حاشیه یکسانی خواهند داشت.
  • وقتی دو مقدار را مشخص می کنید ، مقدار اول نشان دهنده حاشیه بالا و حاشیه پایین است در حالی که مقدار دوم حاشیه راست و حاشیه چپ را مشخص می کند .
  • وقتی سه مقدار را تعیین می کنید ، اولین و آخرین به ترتیب برای margin-top و margin-bottom اعمال می شود. مقدار میانی مربوط به ناحیه افقی است ، یعنی حاشیه-راست و حاشیه-چپ .
  • وقتی هر چهار مقدار را مشخص می کنید ، آنها به ترتیب در بالا ، راست ، پایین و چپ (به ترتیب جهت عقربه های ساعت) اعمال می شوند.

توجه داشته باشید که می توانید از این میانبرها برای ویژگی های padding و border نیز استفاده کنید.

همچنین بخوانید: برگه تقلب ویژگی های ضروری CSS3

آیا تا به حال از حاشیه منفی استفاده کرده اید؟ برای تجسم آن بیایید صفحه نمایش را پاک کنیم : هیچ کدام تصویر دوم ما را نشان نمی دهد ، سپس یک حاشیه منفی تعیین می کنیم.

 /* .display {
 display: none !important;
 } */
 .content-box {
 display: flex;
 flex-direction: row;
 align-items: center;
 background-color: #fdf;
 height: 20em;
 width: 30em;
 padding: 5em 2em 8em;
 border-style: solid dashed groove ridge;
 border-width: 4em 2em 2em;
 border-radius: 20%;

 /* Using negative margin */
 margin: 3em -20em 3em 5em;
 }

خروجی:

مدل جعبه: ساخت وب سایت Pixel Perfect

مدل جعبه به شما امکان می دهد فضای بین عناصر را تعریف کنید ، حاشیه ها را اضافه کنید و به راحتی یک طرح پیچیده را ایجاد کنید. می توانید بلافاصله برای ایجاد یک وب سایت عالی شروع کنید. در همین حال ، می توانید ویژگی border-box را با جزئیات کاوش کرده و با کد بالا بازی کنید.

باید درک کنید که روش های دیگری برای ارائه محتوا در CSS وجود دارد. اینها شامل CSS Grid و CSS Flexbox است. هنگامی که با مدل جعبه راحت شدید ، باید یادگیری این گزینه ها را ادامه دهید.

Related News