Box model making problems and solutions

The content of this note is mainly about the problems and solutions encountered in the production of the box model.

1. Display multiple div elements in a row

Parsing

First distinguish the difference between block-level elements and inline elements

Because the block-level element occupies a whole line, we can solve it in two ways: float or display: inline-block

Features of block-level elements:

• It is always expressed in the form of a block, occupying a whole line. Several sibling block elements will be arranged in order from top to bottom (except for the float attribute).
• You can set the height, width, inner and outer margins in all directions.
• When the width (width) defaults, its width is 100% of its container, unless we set a fixed width for it.
• Block-level elements can contain other block-level elements or inline elements.
• Common block-level elements are <p><div><h1><li>and so on.
• The display attribute value of the block-level element defaults to block.

Characteristics of elements in the industry:

• It will not occupy a whole row alone, but only occupy the space where its own width and height are located. Several in-line elements at the same level will be arranged from left to right (that is, an in-line element can be on the same line as other in-line elements), from top to bottom.
• The height and width of inline elements cannot be set. The height is generally determined by the size of the font, and the width is controlled by the length of the content.
• Inline elements can only set the left and right inner and outer margins, but not the upper and lower inner and outer margins. So we can change the width of the elements in the row by setting the left and right padding values.
• Common inline elements are caused by <a><em><img>etc.
• In-line elements generally cannot contain block-level elements.
• The display attribute value of the block-level element defaults to inline.

float tag

Floating can be understood as making a div element separate from the standard flow and float on the standard flow, which is not a level with the standard flow.

After setting the float, if a div element A is floating, if the previous element of the A element is also floating, then the A element will follow the previous element (if the two elements cannot fit in a row, then the A element will be Squeeze to the next line); if the previous element of the A element is an element in the standard stream, then the relative vertical position of A will not change, that is, the top of A is always aligned with the bottom of the previous element. (The end near the edge of the page is the front, and the end away from the edge of the page is the back.)

For example:

Set div2 to float right

Set div2, div3 left floating

Set div2, div3, div4 left floating

Set div2, div3, div4 right floating

display tag

Attribute value

• none: indicates that this element is not displayed. It is set to none in the production of the secondary drop-down menu. When the mouse moves over the primary menu, it will be displayed.
• block: (default) set the in-line element as a block-level element, and then set its width, height, and inner and outer margins, which can be wrapped.
• inline: Block-level elements are converted to inline elements without line breaks.
• inline-block: You can set the height and width properties while maintaining the non-wrap feature.
• inherit: Inheritance means inheriting the value of the display attribute of the parent element.

In order to prevent the div element from occupying a single line, you need to use the display: inline tag to make it have non-wrap characteristics, but display: inline cannot set the height and width, so use display: inline-block to keep the non-wrap characteristics, and you can set the height and width properties .

2. Display: Inline-block level is not aligned

vertical—align tags

Attribute value: top top line, middle middle line, baseline baseline, bottom bottom line (only works when the element belongs to inline or inline-block)

1. The default alignment of inline text elements is baseline

2. The alignment of inline-block empty elements is bottom

As shown in the figure, the inline-block alignment is the bottom edge of the border

Set vertical-align: after top

Three, the difference between float and inline-block

Similarities: achieve the same effect to some extent

the difference:

Limitations of float

It can be seen from the figure that the limitation of floating is that if the elements are to be arranged in a row and arranged neatly after the line break, the height of the sub-elements must be the same, otherwise the effect of figure 1 will appear, but the inline-block will not meeting.

Inline-block gap problem

a. The reason for the gap

The gap is caused by line feed. When we write a label, we usually type a carriage return after the end of the tag. The carriage return will produce a carriage return. The carriage return is equivalent to a blank character. Normally, there are multiple consecutive blanks. The characters will merge into one white space, and the real reason for the "white space" is this white space that we don't pay much attention to.

b. Method of removing voids

Add {font-size:0} to the parent element, that is, set the font size to 0, then the blank character will also become 0px, thereby eliminating the gap

Fourth, remove the underline of the hyperlink

Set the text-decoration text decoration label in css.
Attribute value:
none: no decoration (default value for normal text)
underline: underline
overline: overline
line-through: strikethrough
If you want to remove the underline, set the attribute value to none.