7 display properties

Block-level elements (block-level)

Each block element alone usually occupy an entire row or entire rows may be provided on its width, height, alignment and other attributes, commonly used in the building structure of pages and page layout. overbearing

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。

Block-level elements features:

(1) always starts a new row

(2) height, line height, from the outer and the inner margins can be controlled.

(3) The default is the width of the container 100%

(4) can be accommodated inline elements and other block elements.

Inline element (inline-level)

Inline elements (inline elements) not occupy separate areas, only by their size and font size of the image to the support structure, generally can not set the width, height, alignment and other attributes, used to control page of this Chinese style.

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。

Features inline elements:

(1) and the adjacent inner row of elements on one line.

(2) high, invalid wide, but the padding and margin may be provided in the horizontal direction, the vertical direction valid.

(3) the default width is the width of its own content.

(4) the line element can only receive the text or other inline elements. (A special which can put a block-level element)

note:

  1. Only text can be grouped together into paragraphs so p can not put block level elements inside the same token there are these tags h1, h2, h3, h4, h5, h6, dt, they are writing class block-level tag, which can not put other block-level elements .
  2. Link which can not recapture link.
  3. which can put a block-level element

Block-level elements and inline elements difference

块级元素的特点:
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素。
行内元素的特点:
(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。

Inline block elements (inline-block)

在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。

Label display mode switching display

The switch block: display: inline;

Row 转块: display: block;

Block, the row lines within the block elements convert to: display: inline-block;

Guess you like

Origin www.cnblogs.com/shibojie/p/11688423.html