# data[].attributes.body
This model describes the boxes that surround content in an HTML document,

# data[].attributes.body
Content – The area containing the actual content of an HTML element.

Padding – A transparent area that creates space around the content but within the border of the element.

Border – The boundary lines of the element that surround the content and its padding.

Margin – A transparent area that creates space outside of the border that separates an element from other elements around it.

# data[].attributes.body
A child nests within a parent box. Several child boxes can be in a parent box. The child can take on the styles of the parent.

# data[].attributes.headline
Here are some of the common properties used in a CSS3 user interface elements:

# data[].attributes.subject
Here are some of the common properties used in a CSS3 user interface elements:

# data[].attributes.body
1 | appearance: Used to allow the user to make elements as user interface elements.
2 | box-sizing: Allows to users to fix elements on area in clear way.
3 | icon: Used to provide the icon on area.
4 | resize: Used to resize elements which are on area.
5 | outline-offset: Used to draw the behind the outline.
6 | nav-down: Used to move down when you have pressed on down arrow button in keypad.
7 | nav-left: Used to move left when you have pressed on left arrow button in keypad.
8 | nav-right: Used to move right when you have pressed on right arrow button in keypad.
9 | nav-up: Used to move up when you have pressed on up arrow button in keypad.

# data[].attributes.body
flex-wrap: wrap;
- will allow your objects to carry on to the following line.

flex-direction: row-reverse;
- will reverse the order of items by row

align-content: stretch;
- will take up all remaining space. This is the default value.

# data[].attributes.body
#object {
display: flex;
justify-content: flex-end;
}
(this moves the object to the end of the browser)

Other values in 'justify-content' property include:
flex-start
flex-end
center
space-around (equal space left and right of each object)
space-between (equal space between objects, first and last stay at either end of the browser)

# data[].attributes.body
You define this by using the   display:grid or display:inline-grid CSS property. This creates the container for the layout.

Child elements of the grid are called grid items, which you position and size according to the following:
• Grid tracks: The columns and rows of the grid; you define grid tracks using the grid-rows and grid-columns properties
• Grid lines: The horizontal and vertical lines that divide columns or rows
• Grid cells: The logical space used to lay out grid items, similar to a cell in a spreadsheet

Grid Properties and Values

# data[].attributes.headline
So how do you get the UI to work on mobile and PC devices?

# data[].attributes.subject
So how do you get the UI to work on mobile and PC devices?

# data[].attributes.body
A combination of 'absolute positioning' and 'flexible boxes' (containers.) This is where the use of the CSS3 Flexbox Box and the CSS3 Grid Layout Model come in to play.

# data[].attributes.headline
Why is getting a UI that works well for websites and viewing via mobiles so challenging?

# data[].attributes.subject
Why is getting a UI that works well for websites and viewing via mobiles so challenging?

# data[].attributes.body
Positioning and autosizing of UI elements is central to good design, but relative positioning does not work for most mobile web applications because it results in overlapping of elements or elements appearing in the wrong places.

# data[].attributes.body
A grid template uses alphabetical characters to represent the position of items in a grid. You use the alpha characters with the grid-template, grid-rows, and grid-columns properties to create a grid into which data flows.

# data[].attributes.body
The CSS properties display:grid (or display:inline-grid), grid-columns, and grid-rows are used to create grid structures. The size of columns and rows can be fixed or flexible.
You can define columns and rows to have a fixed size, so this doesn't resize when the size of the screen changes. Or a fractional size relative to the grid. Fractional sizes are done using fr, so if a row is 2fr its twice the size of a row that is 1fr. 1fr stands for one fraction.
You can also use "auto" value, this makes columns and rows fit their content.

# data[].attributes.body
A grid layout is similar to a spreadsheet in that they use columns, rows, and cells, but it doesn't have to be set out like a spreadsheet you can create many different types of layouts.

Grid layout are best suited for layouts that are more complex than a flexbox. Game interfaces and newspaper layouts are best when using a grid layout.

A grid layout enables you to position rows and columns for control over the layout.

# data[].attributes.headline
Using CSS to arrange user interface (UI) - What is a User Interface?

# data[].attributes.subject
Using CSS to arrange user interface (UI) - What is a User Interface?

# data[].attributes.body
A User Interface (UI) is the portion of a website or application with which a user interacts.

It has a layout, which can either be simple and made with a couple of buttons or very complex with a multitude of parts with buttons, menus, toolbars and forms etc.

# data[].attributes.body
The CSS Flexbox and the Grid Layout model both reduce the amount of code needed for cross device compatibility. Flexboxes hold text, images and other content and the browser automatically adjusts to the size of the box depending on the screen size being used to view.

# data[].attributes.body
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

# data[].attributes.body
Size and position will adjust with the size of the viewpoint. Used for laying out items in a single dimension, column OR row.

# data[].attributes.body
Block elements are placed one below the other. e.g Sections, articles, paragraphs, lists, and images
Inline elements are placed side by side: for laying out text and don’t disrupt the flow of the document.

# data[].attributes.body
In the original W3C CSS box model, the ___________ is the space between border and the content of the box.

A ____________ is the portion of a Web site or application with which a user interacts.

Which position is the DEFAULT element?
Relative, static or fixed.