آموزش ایجاد حس مدل CSS جعبه

مقدمه Introduction

• حس کردن مدل CSS Box Making sense of the CSS Box Model

1. اشتها آور: وب از جعبه ساخته شده است 1. Appetizer: The Web Is Made of Boxes

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

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

• طراحی با جعبه Designing with boxes

2. Entrée: منشأ جعبه در تایپوگرافی 2. Entrée: The Origin of the Box in Typography

• درک اصول نوع Understanding the basics of type

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

• جریان متن در کادر Text flow in the box

3. دوره اصلی: درک مدل جعبه 3. Main Course: Understanding the Box Model

• مدل CSS Box چیست؟ What is the CSS Box Model?

• تغییر محتویات درون کادر Changing the contents within the box

• درک ویژگی صفحه نمایش Understanding the display porperty

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

• موقعیت همه چیز است Position is everything

• شناور و پاک کردن محتوا Floating and clearing content

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

• Pseudo عناصر: ساخت توهم مرورگر Pseudo elements: Making the browser hallucinate

4. دسر: دنیای شجاع جدید چیدمان 4. Dessert: The Brave New World of Layouts

• ماژول های طرح مدرن Modern layout modules

• Flex: طرح بندی های مبتنی بر محتوا Flex: Content-based layouts

• انعطاف پذیری در عمق Flex in depth

• شبکه: طرح بندی های مبتنی بر چیدمان Grid: Layout-based layouts

• شبکه در عمق Grid in depth

5. کابوس شبانه 5. Nightcap

• شکل ها Shapes

• با استانداردهای CSS و وب بیشتر پیش بروید Going further with CSS and web standards