HTML/CSS

Absolute vs Relative lengths

Absolute length values are fixed, while Relative length values are relative to another measurement, usually the parent container. The unit of measurement is percentage.

CSS Cascade

All styles cascade from the top of a stylesheet to the bottom allowing styles to be added or overwritten as the stylesheet progresses.

What is the difference between the width of a block-level element, inline-block level element and an inline element?

Block level elements have a default width of 100%, which takes up any space available, inline-block level elements take up space to accommodate its content and inline-level elements cannot have a fixed size.

Inline vs Block Elements

Block-level elements begin on a new line, stacking one on top of the other and occupy any available width. Inline-level elements do not begin on a new line. They line up one after the other and only maintain the width of their content. Block-level elements may wrap inline-level elements, but inline-level elements cannot wrap block-level elements

Difference between border-box, padding-box and content-box

Content-box is the default-value, which leaves the box-model as an additive design. Padding-box value alters the box model by including any padding property values within the width and height of an element. The content size of the element will decrease proportionately. If we add a border or margin, those values will be added to the width or height properties to calculate the full box size. Border-box elements include any border or padding property values in the width and height of an element.

The box model is additive. What does this mean?

Each element's width and height include padding, border, and margins.

When should a developer use a div element

If it is used for stylistic purposes

Differences between inline-block and inline elements.

Inline-block level elements can accommodate width and height and have top and bottom margins.

What is the box model?

The concept that every element is a rectangle, which has a margin, border, padding, width and height.

Float property

The float property removes an element from the normal flow of a page and positions it left or right of its parent element.

Why is the specificity weight of a selector important?

The higher the specificity weight of a selector, the more superiority the weight of a selector is given regardless of where the ID selector appears in the Cascade.

CSS specificity What is the specificity weight of each selector? Type Class ID

Type - 0-0-1 Class - 0-1-0 ID - 1-0-0