CSS Flashcards
Positioning
position property (absolute, fixed, relative)
along with top, left, right AND/OR bottom.
The element is removed from the flow of the page content.
position:absolute
Positioned relative to the browser window, if there is no ancestor that has a position property. If there is an ancestor with a position property, then it’s placed relative to the closest ancestor.
position:fixed
Doesn’t move when page is scrolled. It’s always relative to the browser window.
position:relative
The element is placed relative to where it would’ve been placed without positioning.
Media Queries
Used for responsive design. Makes it possible to apply certain styles under certain conditions.
Conditions include screen width, height, orientation,resolution.
Examples
`
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
`
`
when smaller or equal to 600px
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
`
Grid layouts
For grid layouts
`
<div>
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr); // same as 1fr 1fr 1fr
gap: 10px;
/* when new rows are added they should have these styles - because grid-template-rows is not there, this should be applied to first row too*/
grid-auto-rows: minmax(100px, auto); //height of rows
}
`
Box model
The box model contains margin, border, padding and actual content. The box model is applied to all elements.
width + padding + border = actual width of an element
height + padding + border = actual height of an element
The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.
Container queries
Apply styles based on the size of a container
`
.side-bar{
container-name:’sidebar’
}
@container sidebar(max-width:500px){
.card{
font-size:2em;
}
}
`
