آموزش ساخت حس CSS Box Model (2015)

مقدمه Introduction

• خوش آمدی Welcome

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 and change the box

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

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

• مدل جعبه CSS چیست؟ What is the CSS box model?

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

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

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

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

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

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

• شبه عناصر: ایجاد توهم مرورگر Pseudo-elements: Making the browser hallucinate

4. دسر: دنیای شجاع جدید جعبه های CSS 4. Dessert: The Brave New World of CSS Boxes

• ایجاد جعبه های انعطاف پذیر با صفحه نمایش: Flex Creating flexible boxes with display: Flex

• تغییر شکل در خارج Changing the shape outside

مراحل بعدی Next Steps

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