-
Notifications
You must be signed in to change notification settings - Fork 0
CSS
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}The display property specifies if/how an element is displayed. It is the most important CSS property for controlling layout.
display: value;-
block,inline,inline-block,contents,flex,grid,none, etc...
-
visibility:hiddenhides the element, but it still takes up space in the layout. -
display:noneremoves the element from the document. It does not take up any space. - Example from w3schools.com
The position property specifies the type of positioning method used for an element.
There are five different position values:
-
static- this is the default value, all elements are in order as they appear in the document. -
relative- the element is positioned relative to its normal position. -
fixed- the element is positioned related to the browser window. It always stays in the same place even if the page is scrolled. -
absolute- the element is positioned absolutely to its first positioned parent. -
sticky- the element is positioned based on the user's scroll position. It basically acts likeposition: relativeuntil an element is scrolled beyond a specific offset, in which case it turns intoposition: fixed, causing the element to "stick" to its position instead of being scrolled out of view.
Elements are then positioned using the following properties:
-
top,bottom,left,right
However, these properties will not work unless the position property is set first. The position property can be used (depending on the position value) to arrange elements relative to its current position, its containing element, or the browser viewport.
Cascading Style Sheets at the most basic level it indicates that the order of CSS rules matter.
.class#id*elementelement, elementelement elementelement > elementelement + element:hover:last-child:first-child-
!important(not recommended)
What selectors win out in the cascade depends on:
- Specificity
- Importance
- Source Order
.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* general usage */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* more responsive approach */
grid-template-rows: 1fr;
grid-gap: 10px;
}- Thoughtbot: Animation for beginners
- Animate.css
- React Particles
- Animation Tools
- 20 Useful react animation libraries