The most common debugging method

border{ solid 1px red; }

highly

Block level element height

The height of a div is determined by the sum of the height of its internal document flow elements (not necessarily equal)

Inline element height

The height of an inline element is determined by line-height;

Why is line-height different from font size? Different fonts have different line height ratios, right? Because different fonts have different recommended line heights, that is, beyond the quadrangle. So if you want the line to be fixed, you use line-height;

  1. Hello and A are aligned baseline (bottom), not midline
  2. Each font has a recommended line height, with some space left beyond the four lines
  3. font-size:100px; The height of the font from top to bottom, not the line height (excluding any extra space)
  4. Font size X Recommended line height of the font itself

The solution

Mandatory line-height:100px;

The document flow

Document flow is the flow direction of elements within a document.

Inline element

The inline element flows from left to right, and if it encounters an obstruction (insufficient width) it continues flowing on a new line

Inline element content is not newline

Example:

Method: a word – break: break – all;

Block-level elements

Each block occupies a row and flows from top to bottom

highly

The height of a div is determined by the sum of the height of its internal document flow elements (not necessarily equal)

Block-level element rows (alternative to float)

Display: inline – block;

Background image processing skills

Background image too large: background-position: Center Center; Adaptive background image :background-size:cover;

Easy to bug a few ways to write

Height: 100 px

Put height: 100px in div; Specify block height (because block height is supported, specifying it will cause a bug)

Width: 100%

Because if this element has padding, then if width is 100% it’s going to be wider than the parent element

Solution: Coat a div and transfer the padding of the div to the outside div.

Implementation of small code blocks

Effect:

 display: inline-block;
 padding:5px 5px;
 line-height:22px;
Copy the code

Since inline elements cannot be set to height, use display: inline-block first; Turn it into a block-level element, then use the padding to push out the width and height and center it.

Wrong solution:

width:70px;
height:30px;
line-height:30px;
text-algin:center;
Copy the code

This way to write dead height will lead to cannot add words, it is easy to bug.