Block and inline, inline and inline-block, block-level and intra-row elements, intra-row replacement and intra-row non-replacement elements, inlineinline-block

Block and inline, inline and inline-block, block-level and intra-row elements, intra-row replacement and intra-row non-replacement elements, inlineinline-block

Block: the default display attribute of block-level elements is block. No matter how much content is in the block, the display attribute is always full;

Inline: by default, the display attribute of the row element is inline. It only occupies the size of the content in the block and does not occupy the whole line;

Inline-block: Change the display attribute of the element in the row to inline-block to control the length and width of the element in the row;

Common block-level elements: div ul ol li dl dt p; common intra-row elements: a B span img input;

The difference between inline-block and block: In simple terms, block-level elements are used to add block-level elements to a row-level element when line breaks are required, do not wrap is to use inline-block.input and img as the replacement element, you can directly control the width and height of the replacement element.