آموزش درک جامع مدل جعبه‌ای CSS (CSS Box Model) - آخرین آپدیت

مقدمه Introduction

• درک مفهوم مدل جعبه‌ای CSS Making sense of the CSS Box Model

1. پیش‌غذا: وب از جعبه‌ها ساخته شده است 1. Appetizer: The Web Is Made of Boxes

• نمایش اطلاعات در وب Displaying information through the web

• طراحی با استفاده از جعبه‌ها Designing with boxes

• وب از جعبه‌ها ساخته شده است The web is made of boxes

2. غذای اصلی: ریشه جعبه در تایپوگرافی 2. Entrée: The Origin of the Box in Typography

• درک مبانی تایپوگرافی Understanding the basics of type

• جریان متن در جعبه Text flow in the box

• تغییر تایپ، تغییر جعبه Change the type, change the box

3. بخش اصلی: درک مدل جعبه‌ای (Box Model) 3. Main Course: Understanding the Box Model

• مدل جعبه‌ای CSS چیست؟ What is the CSS Box Model?

• شناور کردن و پاک‌سازی محتوا (Float & Clear) Floating and clearing content

• جای‌گذاری (Position) همه چیز است Position is everything

• عناصر مجازی (Pseudo elements): ایجاد توهم در مرورگر Pseudo elements: Making the browser hallucinate

• تغییر محتویات داخل جعبه Changing the contents within the box

• نکته جانبی: تصاویر عناصر inline هستند Sidebar: Images are inline elements

• درک ویژگی display Understanding the display porperty

• استفاده از clearfix Using the clearfix

4. دسر: دنیای جدید و شگفت‌انگیز چیدمان‌ها 4. Dessert: The Brave New World of Layouts

• گرید (Grid): چیدمان‌های مبتنی بر ساختار Grid: Layout-based layouts

• بررسی عمیق Flexbox Flex in depth

• ماژول‌های مدرن چیدمان Modern layout modules

• فلکس (Flex): چیدمان‌های مبتنی بر محتوا Flex: Content-based layouts

• بررسی عمیق CSS Grid Grid in depth

5. جمع‌بندی نهایی 5. Nightcap

• گام‌های فراتر با CSS و استانداردهای وب Going further with CSS and web standards

• اشکال (Shapes) Shapes