css-layout.Rmd

# CSS Layouts

The previous chapters have discussed how to use CSS to specify the appearance of individual html elements (e.g., text size, color, backgrounds, etc). This chapter details how to use CSS to declare where HTML elements should _appear_ on a web page! Placing elements exactly how you want them can be surprisingly difficult. Elements are arranged from the **top left corner** of the page, and are arranged based on three related (but distinct) concepts:

- **Display**: determines how elements share horizontal space
- **Position**: allows you to adjust the location of the natural flow of elements
- **Box-model**: describes the amount of 2D space taken up by an element, and how much space is between elements

## Display




## Position


## Resources {-}
<div class="list-condensed">
- [The Box Model (MDN)](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model)
- [The CSS Box Model (CSS-Tricks)](https://css-tricks.com/the-css-box-model/)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) The best explanation of Flexbox properties you'll find.
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) A similar explanation, but for the Grid framework (not discussed here).
</div>