Several concepts of CSS core

box model, position, float. They are the basis of CSS, seemingly independent but complementary.

element Type

Block-level elements, inline elements

There are the following differences between them:

1. Block-level elements are exclusive to one line unless the Display property is modified. Inline elements are displayed in one line.

2, block-level elements can be set width, height property, and inline elements do not.

3. The width of block-level elements defaults to 100%, while inline elements determine their widths based on their own content or child elements.

Inline elements cannot be set to height, but can be achieved by setting Display:block. The elements are then rendered in block-level form.

When Display:inline, the element is rendered inline.

To let elements in line display, but also can set the height, you can set: Display:inline-block;

Box Model

Each element displayed on the page can be viewed as a box, or box model.

The box model consists of four parts: Content->padding->border->margin

Calculation of the width of the element ...

Two other special cases

Absolute positioning, floating (position, float)

1, Position

This property determines how the element will be positioned. There are roughly five types of the following:

static: The default value, the element is equivalent to no positioning, in the page occupy position, cannot use top, right, botton, left to move the element.

Relative: relative positioning, no positioning, in the page occupy position, you can use top, right, botton, left move element.

Absolute: absolute positioning, relative to the most recent level of positioning is not static parent element to locate, element in the page does not occupy the position, you can use top, right, botton, left move element.

fixed: Absolute positioning, relative to the browser window to locate, the rest and absolute the same.

Inhenit: Inherits the value of position from the parent element.

2, float

As the name implies, is to float the elements, the value of a total of four: left, right, none, inherit.

The original float was used for text wrapping, and it is now widely used.

Several concepts of CSS core