-
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. -
absolute- the element is positioned absolutely to its first positioned parent. -
sticky- the element is positioned based on the user's scroll position.
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;
}