Box Model Flashcards
How the web uses boxes
All HTML elements (i.e., paragraphs, div blocks, sections) are expressed in boxes on the web. You can imagine an invisible boundary around each element, which contains that element within a box. You can style elements and website layouts using these invisible boxes (e.g., you can add space around an element’s box, or add a border to an element’s box). These boxes sit next to each other or stack on top of each other, depending on their properties.
How to use boxes for responsive design
Web layouts behave more like a text document, where content flows naturally from the top-left of the page, then moves to the next line (i.e., wraps) when it hits the right-side boundary of the document. The content is responsive because the content conforms to different resolutions. For instance, if you resize a text document window, the content layout will adjust accordingly, without decreasing the size of the content.
What are Nest Boxes?
When you can put boxes inside other boxes.
Like other elements on the web, Webflow elements are boxes that you can nest inside each other. For example, you can place a heading and a paragraph element inside a container element. The container groups these elements together, and if you move the container all the boxes inside it move too
What do you use to style boxes?
You can use CSS (Cascading Style Sheets) to style boxes (i.e., elements). Boxes aren’t fixed - you have control over all their styling.
How to change box layouts?
You can create a website by just adding content to a page and adjusting padding and margin. But you’ll often want to change the layout of elements, so they distribute horizontally or in a specific place on the screen. That’s when you can use different layout techniques — specifically, display settings and position properties — to control an element’s layout behavior.
