Section 1

Preview this deck

Static

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

0

All-time users

0

Favorites

0

Last updated

6 years ago

Date created

Mar 14, 2020

Cards (21)

Section 1

(21 cards)

Static

Front

is the default position. _______ position does not alter the position of an element in the x nor y position. The element renders in order of the document flow.

Back

align-items

Front

define the vertical alignment of items

Back

flex

Front

to create flexible boxes that can stretch and shrink

Back

Media queries

Front

set of external stylesheets that query the device for its width. If the condition in each media query is satisfied, then the respective CSS file will be called and included to style the page. must add these media queries to all web pages that need to respond to the different devices' width.

Back

flex-direction

Front

need columns instead of rows

Back

CSS Layout: Positioning

Front

<body> static relative absolute fixed

Back

Relative

Front

can be used with top, and left attributes. The element that is in relative position will move in relation to its parent and sibling elements. Relative position takes place in the document flow. top left par and sibling relations

Back

justify-content

Front

define the horizontal alignment of items ON CONTAINER center flex-start flex-end space-around space-between affects the whole container ON ITEMS space-around space-in-between (anout spacing)

Back

Prevention of Scaling

Front

<!-- Prevent smartphones from scaling pages down --> <meta name="viewport" content="initial-scale=1"> To ensure proper rendering and touch zooming

Back

Absolute

Front

can be used with top, left, right and bottom, as well as z-index. ________ position breaks away from the document flow and listens only to the the coordinates in relation to the document area. Absolute positioning also support z-index attribute, which allows to layer element on top of each other.

Back

display: flex;

Front

create a flex container (parent affects the child)

Back

order

Front

customize the order of individual elements (ie. -1, 1)

Back

flex-wrap

Front

no-wrap (out the box) wrap

Back

CSS: Viewport

Front

#myDiv{ height:100vh; } This code snippet above, make an element be as tall as the browser window. #myDiv{ width:100vw; } This code snippet above, make an element be as wide as the browser window.

Back

Fixed vs Absolute

Front

can be used with top, left, right and bottom, as well as z-index, the difference between Absolute and Fixed is that Fixed stays in the location even after scrolling the document up or down.

Back

align-self

Front

vertically align individual items

Back

CSS Layout: Flexbox

Front

flexible box allows you to manipulate alignment, direction, order, size

Back

Tablet Query

Front

<!-- Media query for medium browser width --> <link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 960px)" href="tablet.css">

Back

Mobile Query

Front

<!-- Media query for narrow browser width --> <link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">

Back

Web Query

Front

<!-- Media query for full browser width --> <link rel="stylesheet" media="only screen and (min-width: 961px)" href="desktop.css">

Back

row-reverse or column-reverse

Front

values to flip item order default top to bottom left to right

Back