[CSS] a comprehensive and systematic explanation study notes - Chapter IV CSS layout

A, CSS layout transition course

Second, the common layout method

2.1, table layout

2.1.1, using the table to achieve the table layout

2.1.2, another implementation form layout

2.2 Layout Properties

1. width, height setting only for content area content enters into force, the blue ones.
2. padding means that the distance between the border and the border content area.
3. margin refers to the distance between the element and the element.
   
   Precautions: inline element is not possible to specify the width and height, which specifies the width and height of no avail.
   The default layout is in accordance with the static elements, and can be understood as a static layout, or a press document flow layout.
   
   The relative offset is relative to the element itself, when the offset does not affect the original footprint.
   means fixed relative to the alignment of the visible area.
   It is absolute with respect to the nearest absolute or relative positioning.
   Hierarchy display may be determined by z-index. Is defined as a relative, fixed, absolute elements may be provided z-index.
   

2.3, flexbox layout

To set the width of a piece is fixed div PX; direct writing width: 30px;

2.4, float layout

Shown below, p1 is a left floating effect, looks like floating above the p2, p2 but the text is pushed to the right side of the start, this attribute is originally used for graphic shuffling of.

2.4.1, the impact on their own

In the FIG., Elements inline elements span, width and height is theoretically not provided, but it may be provided where the width and height. Because the float is automatically formatted as inline elements block elements.

2.4.2, the impact of brothers

If the width is increased, the right side of the float will be pushed to the next line up.

If the width little tune, turn pushed the same line.

2.4.3, the impact on the parent element

Can be seen from the figure, the height of the block of red, blue and height of the block, are identified by a red frame. Then, the green part is the float out of the red blocks. In fact, this is the height of the collapse of the performance.

This overflow can add the following to the parent element: property; let the parent element to focus on the internal load elements.

2.4.4, remove floating impact

The main impact of the elimination of floating height is used to eliminate the background of the problem. If not overflow property, a pseudo-element may be added to the expansion pseudo background elements.

2.4.5, the two-column layout using float

Mainly used to the left float: left; and right side, margin-left: 200px; height: 100%;

2.4.6, the three-column layout using float

As shown above, it was found blue div and right front is not aligned, but hung in the middle of the div below. Floating element will try up against, but not around, but some of the intermediate floating elements, since this may be div right portion moves up one layer.

2.5, inline-block layout

Can be seen from the figure above, provided inline-block but still displayed vertically, the width of the problem is obvious.

After the adjustment, the display on the same line. But there has been a void. inline-block can be imagined as a text, there is a gap between words.

When set to external font-size: 0; time will eliminate the gap, but there will be another problem is that the red and blue blocks of text no. This requires that we need to set the font size to the internal elements.

By observation, it can be seen that there is also a gap between the gap from the div. : (PS This is how to observe it is not clear)

after this treatment, the same effect can be achieved to eliminate the gap. Or the lower figure by way of annotations.

Or recommend the use of fonts way to deal with the issue of the gap. If the problem is fixed width, you can use this inline-block way to handle the layout.

2.6, responsive design and layout

2.6.1, a Case

The following diagram, if you want to fit different resolution is the first to add this viewport.
Then the following is added in a media query @media. And set up here, in the case if the width is less than 640px. The left part of the contents of the shadow possession.

2.6.2 Case II

2.6.2.1, using media queries adaptation

FIG effect, the following figure shows

the time to switch to the mobile terminal, the display was not very good.

Add a media query, do the adaptation. Disposed centrally and provided with display: block; arranged such that the vertical elements.

2.6.2.2, a viewport adapter (proportional effect of the change)

Manner width values ​​calculated dynamically.

2.6.2.3, using the adapter unit rem

html element has a default font-size attribute defaults to 16px; in order to facilitate the calculation, we can set the font-size value 20px (10px or will do); after setting, 1rem = 20px.

2.6.2.4, using the adapter unit rem

You can see from the figure above, but still we have another problem arises after using rem, is in different display sizes, borders wider, to solve this problem, we need to go with the screen size updated html size of the font-size.

Increase as shown above in the original style css media queries. It should be noted that the need to put a large system with media queries written on it, put a small range below.
There is also a problem because it is through rem is calculated, there is no precise px on accuracy.

2.7, layout mainstream sites use

2.8, CSS face questions