Talk about the basic cognition of web layout

1. What is a box model? II. Not floating layout three. Floating layout directory

May will use at least one day in the past weekend in the training course. Review the basic awareness of the teacher’s WEB layout. The Web layout is roughly divided into floating layout and non-floating layout. Before talking about these two layouts, we must understand a concept-box model.

1. What is a box model?

We can understand some of the functional sectors of the web as a box model. When we review a particular element, you can see a box model.

The lower right corner is a box model:

Content area Content: 1122x88px

Inner margin padding

Border Border

Outside margin

The total width of a box is: left outer margins + left border + left internal margins + content area width + right internal margins + right box + right outer margin

The total height of a box is: upper outer margins + upper frame + upper margins + content area width + lower margins + lower frame + lower outer margin

Two. Not floating layout

Width

1.1. Box defaults to width, the width is determined by the parent;

1.2. Once the box is specified, it will not be restricted;

1.3. The box is specified to be a relatively percentage of width, and “relative” here refers to the direct parent of its phase.

2. Height

2. The box is not high, generally by the sub-plane;

2.2. Do not give the box to set the height.

Three. Floating layout

Syntax

Floating direction floating direction floatleftfloat: left; float rightfloat: Right; float to right Nonefloat: none; not floating

2. Width

2.1. The box is by default;

2.2. If the parent width is limited, it will automatically wrap;

2.3. After the box is specified, it will not be restricted after a fixed width;

2.4. The box is specified to a relatively percentage of width, which is relative to the width of its direct parent.

3. Height

The box is not high, do not give the box to set the height.

4. Parental height collapse

Once the child is floating, the height of the parent will collapse, how to solve it?

Method 1. Add overflow: hidden to the parent;

Method 2. Add a label to the last child

Then add CSS to this tag:

.clearfix {clean: Both;}

Do you understand?