Basic knowledge of css web page layout (summary)

This chapter brings you the basic knowledge (summary) of css web page layout, so that you can understand some knowledge points about css web page layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The first to fifth layers of the box model:

border, padding content, background-image, background-color, margin

2. Clear float. Perform the following operations on labels affected by floating:

1. clear: both;

2. clear: right; clear: left;

3. Set width width: 100% (or fixed width) overflow: hidden;

3. Usage scenarios of two clear floating methods:

1. When the child element is set to float, the parent element is not set to float, resulting in The height of the parent element cannot automatically expand and shrink to a line. When the child element overflows from the parent element, it is suitable to use the method of setting width: 100% (or fixed width value) and overflow: hidden to clear the float at the same time; this method can remove the float at the same time. The immediately adjacent block-level elements are affected by floats, and there is no need to remove floats from the adjacent block-level elements affected by floats.​

2. If an adjacent block-level element is affected by floating, it is more appropriate to set clear: both or clear: left, clear: right for the affected block level.

Note: Setting width to 100% inherits the width of the parent container. Fill the entire container left and right to create conditions for yourself to clear the float. By adding overflow hiding, the floating part of the package can be removed.

4. Absolute positioning features:

1) Establish positioning based on block bits;

2) Completely separate from the standard document flow;

3) Then it has the offset attribute and z-index attribute:

When the offset is not set (left, top):
Regardless of whether or not you have the ancestral element that has been positioned, keep it out of the standard document flow at the initial position of the element

Set off: the benchmark for offset reference:
No positioned ancestor elements: use as the offset reference;
There are positioned ancestor elements: the nearest positioned ancestor element is used as the offset reference.

Note: When an element is set to absolute positioning and no width is set, the width of the element is adjusted according to the content.

Exercise question: It is known that an element b with absolute positioning is located in its parent element a. If the a element is a static element, the b element will be offset based on (html).
Answer: Because a is a static position, it must be offset based on the root element, which is the html element (static positioning is position:static, which is the default positioning attribute of the element. Only absolute, relative, or fixed can be set Calculate the positioned parent element.

5. Tips for hiding button text:

Set text-indent: -999px; and overflow: hidden;

Principle: First use the text-indent:-999px; statement to "squeeze out" the set element, and then hide the elements that overflow, that is, the squeezed-out elements are hidden.

6. Media Query:

Can be used for @media and @import rules in CSS, and can also be used in HTML and XML.

1) @media screen and (width: 800px) {...}

2) @import url(example.css) screen and (width: 800px);

3)0

The above is the detailed content of Basic knowledge of css web page layout (summary). For more information, please follow other related articles on the PHP Chinese website!