Shulou(Shulou.com)06/01 Report--

Inline elements and block-level elements of CSS

Block-level elements -, p, dt cannot be inlined with block-level elements

1. The concepts of block and inline are abbreviated, which should be block-level elements (block-level element) and inline elements (inline element). The block element is usually realised as a separate piece and wraps on a separate line; the inline element does not break before and after the line, and a series of inline elements are displayed on one line until the line is full.

2. Generally speaking, each HTML element has its own layout level (block element or inline element):

3. Common block-level elements are DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL and so on.

4. The common inline elements are SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR and so on.

Block elements can contain block elements and inline elements; however, inline elements can only contain inline elements. It is important to note that this is a general statement, and the elements that each particular element can contain are also specific, so this rule does not apply to individual elements. The P element, for example, can only contain inline elements, not block elements.

In general, the layout level of an element can be changed through the settings of display:inline and display:block.

Several common attribute values in Display attribute

Display:none is an element that is hidden and not displayed

Display:block

1. The block element will occupy a single line, and multiple block elements will have a new line. By default, the block element width automatically fills the width of its parent element.

2. The block element can set the width,height attribute. Even if the width of the block-level element is set, it still has an exclusive row.

The block element can set the margin and padding attributes.

Display:inline

1. Inline elements will not occupy a single line, and multiple adjacent intra-line elements will be arranged in the same line, and the width of the new line will not change according to the content of the element.

2. The nline element sets the width,height attribute is invalid. / 3. Margin and padding attributes of inline element, horizontal padding-left, padding-right, margin-left and margin-right all produce margin effect, but vertical padding-top, padding-bottom, margin-top and margin-bottom do not produce margin effect.

Display:inline-block

1. To put it simply, the object is rendered as an inline object, but the content of the object is rendered as a block object. Subsequent inline objects are arranged on the same line. For example, we can give a value of the inline-block attribute of link (an element) so that it has both the width and height characteristics of block and the peer characteristics of inline.

2. When there is a line break between the tags of two elements, if the elements are displayed side by side in the way of inline-blockde, if the width of the parent container is exactly the sum of the widths of the children shown side by side, it may not be displayed side by side, because inline-block will render the line breaks as spaces, so you can set font-size:0 on the parent container in order to display the child elements side by side. In this way, spaces do not take up space, and if there is another text content to be displayed in the child elements, then set the font-size on the child container.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.