What Is a Default Model?

Attribute names often heard in web design: content, padding, border, and margin. CSS box models all have these attributes. These attributes can be understood by using a box as a metaphor, a common thing in daily life, so we call it the box model. The CSS box model is a thinking model used in the CSS technology often used in web design.

Content area

The content area is the center of the box model. It presents the main information content of the box. These contents can be text, pictures, and other types. The content area has three properties, width, height, and overflow. The width and height properties can be used to specify the height and width of the box's content area. When the content information is too large and exceeds the area occupied by the content area, the overflow property can be used to specify the processing method. When the overflow property value is hidden, the overflow part will not be visible; when it is visible, the overflowed content information is visible, but it is rendered outside the box; when it is scroll, the scroll bar will be automatically added to the box, and users can pass Pull the scroll bar to display the content information; when it is auto, the browser will decide how to handle the overflow part.

Padding

Padding is the content area and

Web page default layout

Document flow refers to the specific position in the document that can be clearly displayed when objects are arranged. The document flow is not only the basis of the box mode positioning. It is also the default web page layout mode in HTML. Without special requirements, the block elements in the page present a dynamic distribution form from top to bottom, and the inline elements are It exists from left to right. If we want to change the specific position of a Chinese character or symbol on a webpage, there is only one way to choose, which is to achieve our own goals and ideas by manipulating the position and distribution of Chinese characters or symbols in the webpage structure.

float

The so-called floating is to make the set labels have a floating effect, away from the original space position on the page, and no longer occupy any document flow space. When an element is set to float, a block-level element is generated, regardless of the element itself. And specify a width, otherwise it will be as narrow as possible; in addition, when the space available for floating is smaller than the floating element, it will run to the next line until there is enough space to drop it.

Positioning

Page layouts use relative positioning and absolute positioning the most.

Relative positioning: In this positioning mode, the element does not leave the document flow, but still retains its original shape before positioning and retains the space it occupied. When offsetting, the upper left corner of its own position is used as the reference object, and the position of the offset is defined by the attributes of left, top, right, and bottom. The following analyzes the effect of relative positioning by comparing the two states before and after positioning.

Absolute positioning: In this positioning method, the element will be separated from the document flow and occupy no space. Subsequent elements in the document flow will fill the space left by it. The following analyzes the effect of absolute positioning by comparing the two states before and after positioning ^[2] .