FRONT-END EXERCISES

Description

I am developing myself on HTML CSS and Javascript. My lecture notes are below.

Notes

Margins are used to create space around elements, outside of any defined borders.

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Padding is used to create space around an element's content, inside of any defined borders.

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

The Background-Attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

body {
  background-image: url("img_tree.gif");
  background-repeat: no-repeat;
  background-attachment: scroll|fixed|local|initial|inherit;
}

The Display property specifies the display behavior (the type of rendering box) of an element.

.a {
  display: contents;
}

The Align-Items property specifies the default alignment for items inside the flexible container.

div {
  display: flex;
  align-items: center;
}

The Justify-Content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).

div {
  display: flex;
  justify-content: space-between;
}