Detailed CSS box type and Display properties

The box type affects rendering and layout, and there are two basic box types: block-level (block-level) and inline-level (inline-level). In fact there are other types of boxes (such as table, List-item, etc.), but will eventually be treated as block-level box or inline-level box.

The Block box feature is the start of the new line and can contain other block-level box and inline-level box.

Inline-level boxes are elements that cannot form new chunks of content. It does not start with a new line, but it can contain other inline-level boxes and data.

HTML elements and corresponding default box types

Use the Display property of CSS to define the box type, or to change the default box type of an element.

When defining the style attribute Display:none, the box and the other boxes it contains disappear on the browser, instead of creating an invisible box, rather than generating a box at all (that is, the element has no effect on the layout), the derived element does not generate any box, The behavior cannot be overridden by the Diplay property set by the derived element.
For example:

<div style= "Display:none" >     content does not show     <p style= "Display:block" > This content does not display </p> </div>

Property value of Display property and its function description