From 3dd673cd195b23449e3162b66405738d029ebfa1 Mon Sep 17 00:00:00 2001 From: Fabian Marino Date: Wed, 6 May 2020 14:24:19 -0500 Subject: [PATCH 1/6] Includes basic texts for positioning and box model --- 2-positioning/index.md | 24 ++++++++++++++++++++++++ 3-box-model/index.md | 12 ++++++++++++ 2 files changed, 36 insertions(+) diff --git a/2-positioning/index.md b/2-positioning/index.md index b21812e..083fdea 100644 --- a/2-positioning/index.md +++ b/2-positioning/index.md @@ -1 +1,25 @@ # Positioning + +## Relative: + +Relatively positioned elements are offset a given amount from their normal position within the document + +### Absolute: + +An element that is absolutely positioned is taken out of the flow; + +### Fixed: + +Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. + +## Sticky: + +Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. + +## Normal Flow + +Elements on a webpage lay out in the normal flow, if you have not applied any CSS to change the way they behave. And, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether. + +First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier. + +By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with display: block; (or even,display: inline-block; which mixes characteristics from both.) diff --git a/3-box-model/index.md b/3-box-model/index.md index e703850..e1dd714 100644 --- a/3-box-model/index.md +++ b/3-box-model/index.md @@ -1 +1,13 @@ # Box model + +CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model. +Box-Model has multiple properties in CSS. Some of them are given below: + +* borders +* margins +* padding +* Content + +Image of Box Model + +![Box Model](https://www.csssolid.com/images/CSSBoxModel.png) From eb63876f517f2ddd8a48f978c876cbb93700b30f Mon Sep 17 00:00:00 2001 From: Fabian Marino Date: Wed, 6 May 2020 16:55:33 -0500 Subject: [PATCH 2/6] Includes positioning and box model exercised --- 2-positioning/index.md | 85 ++++++++++++++++++++++++++++++++++++++++-- 3-box-model/index.md | 62 ++++++++++++++++++++++++++++++ 2 files changed, 144 insertions(+), 3 deletions(-) diff --git a/2-positioning/index.md b/2-positioning/index.md index 083fdea..4ab2998 100644 --- a/2-positioning/index.md +++ b/2-positioning/index.md @@ -1,21 +1,76 @@ # Positioning +With positioning you can change the location of HTML elements within the visual viewport of the document. + +Positioned elements are important to create complex layouts. + +## Static + +```css + .css-selector { + position: static; + } +``` + +This is the default value for `position` property, it basically means it's not positioned. + ## Relative: -Relatively positioned elements are offset a given amount from their normal position within the document +```css +.css-selector { + left: 20px; + position: relative; + top: -20px; + width: 500px; +} +``` + +Relatively positioned elements are offset a given amount from their normal position within the document. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset. ### Absolute: -An element that is absolutely positioned is taken out of the flow; +An element that is absolutely positioned is taken out of the flow. It behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. + +```css +.css-selector-relative { + height: 400px; + position: relative; + width: 600px; +} +.css-selector-absolute { + height: 200px; + position: absolute; + right: 0; + top: 120px; + width: 300px; +} +``` ### Fixed: -Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. +Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. The top, right, bottom, and left properties specify offsets from the edges of the viewport's block. + +```css +.css-selector-fixed { + bottom: 0; + position: fixed; + right: 0; + width: 200px; +} +``` ## Sticky: Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. +```css +.css-selector-sticky { + position: sticky; + top: 60px; + width: 200px; +} +``` + ## Normal Flow Elements on a webpage lay out in the normal flow, if you have not applied any CSS to change the way they behave. And, as we began to discover, you can change how elements behave either by adjusting their position in that normal flow, or removing them from it altogether. @@ -23,3 +78,27 @@ Elements on a webpage lay out in the normal flow, if you have not applied any CS First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier. By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with display: block; (or even,display: inline-block; which mixes characteristics from both.) + +### Exercise + +1. create a new branch from master called `feature/positioning`. +2. Go to `2-positioning` folder and create a file named `positioning.html`. +3. Create a file named `styles.css`. +4. Inside the CSS file, create this layout using CSS positioning: + +![Positioning exercise](https://user-images.githubusercontent.com/668906/81229480-7dc2ea80-8fb5-11ea-9ada-220a61240b7d.png) + +* `
` sticky, green borders and black background. +* `