# CSS Layout # --- ## This presentation answers three main questions ## 1. What is the **_box model_**? 2. How does the **_display property_** affect layout? 3. How does the **_position property_** affect layout? --- ## I. What is the **_box model_**? ## ---- When HTML elements (text, images, links etc) render in the browser, they each have their own box. ---- Box Model  ---- Content  Anything in the HTML tag (the pictures in frames) ---- Padding  The space around the content (the white space in between the pictures and the frame) Note: Specifying background colour to an element will also be applied to the padding area ---- Border  Can have different styles and thickness (the frames) ---- Margin  The space around the element (The spacing of the framed pictures) ---- Content size Vs Actual size   Content size is affected by any heights/widths stated or pre existing. Actual size is content size plus padding and border size. ---- Box Sizing  Using `box-sizing: border-box;` means the border and padding is included in the content size (yay!) makes life slightly easier :) ----  --- ## II. How does the **_display property_** affect layout? ## ---- - The value of the display property affects other how the element uses space. - Two basic values are _inline_ and _block_. ---- ### display: block; - Most elements are _block_ level elements by default: ```<p>```, ```<h1>```, ```<article>``` and ```<section>``` for example. - Block level elements take up the entire width of their parent container and always start on a new line. - _width_ and _height_ properties can be used to change to size of the element. ---- ### display: inline; - Some elements, such as ```<a>``` and ```<span>``` are _inline_ by default. - _inline_ elements will appear from left to right, and will only wrap onto a new line when there is no more space. - They will only take up as much space as their content. _height_ and _width_ properties will have **no effect!** - So what if we want to specify the size of our inline elements? ----  ---- ### display: inline-block; - Makes elements appear inline. They will appear from left-to-right and wrap below when no more space. - **BUT** we can use _height_ and _width_ properties to change the size! ----  ---- ### How we can use this to write good HTML - We are not beholden to an HTML's default properties. - We do not have to choose elements based on these default properties. - We can use the most semantic element for the situation and change properties to suit us! ---- ### display: flex; - Flexbox opens up many new properties for both the parent element (the flex container) and the child elements (the flex items). - _flex_ elements, by default appear as _block_ level elements, however you can use _inline-flex_ to change this. - I usually think of _flex_ as creating a very distinct environment within the container. - You can change the flow-direction, wrapping, aligning and spacing of child elements, and much more. ---- ### display: grid; - Much like flex, opens up a whole lot of new tools for layout within the grid container. - Appears as a _block_ level element, however _inline-grid_ can be used to change this. ----  --- ## III. How does the **_position property_** affect layout? ## ---- The position property can be used to change the flow of the document. There are 5 different values: 1. static: the initial value, which means elements are not positioned. 2. relative 3. absolute 4. fixed 5. sticky ---- * Apart from static, the others values are positioned by arranging elements relative to its current position, its containing element, or the browser viewport. * For these values, we need to specify the **top**, **right**, **bottom** or **left** properties which indicate the placement of the positioned elements. ---- ## position: relative ## * What it really means is "relative to itself". * If you set an element's **position** to **relative** without specifying other positioning attributes (top, left, bottom or right), it will have no effect on its positioning (i.e. be the same as if you left it on **static** positioning). ---- ## position: absolute ## * Places any page element exactly where you want it by specifying the offset properties. ❗❗❗ using absolute positioning removes elements from the flow of the page ❗❗❗ <div style="width:100%;height:0;padding-bottom:75%;position:relative;"><iframe src="https://giphy.com/embed/S9XaGr8wQ9Jwk" width="50%" height="50%" style="position:absolute" style='margin:auto' frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/austin-stuck-powers-S9XaGr8wQ9Jwk">via GIPHY</a></p> ---- ## position: fixed ## Fixed positioning is always positioned relative to the *viewport* and stays in the same spot even on page scroll. 💡💡💡 use this for a navigation bar or buttons which you want to remain visible at all times regardless of the pages scroll position 💡💡💡 ---- ## position: sticky ## * Using sticky positioning the element stays in the initial spot until you scroll the page. Then it becomes fixed when the value in the offset property has been met. Once you scroll past its containg element it will no longer be fixed. ❗❗❗ Still in draft phase: you can check on its status at https://caniuse.com/#feat=css-sticky ❗❗❗ <div style="width:100%;height:0;padding-bottom:73%;position:relative;"><iframe src="https://giphy.com/embed/10fFT7qzHrN0D6" width="50%" height="50%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/vintage-comics-spider-man-10fFT7qzHrN0D6"></a></p> --- ## Get familiar with flexbox and grid ## ---- - [flexbox froggy](https://flexboxfroggy.com/) (a game for learning css flexbox)  ---- - [grid garden](https://cssgridgarden.com/) (a game for learning css grid)