块元素和行内元素

设置

/* 块级元素 */
display: block;
/* 行内元素 */
display: inline;
/* 行内块元素 */
display: inline-block;

特点

• 块级元素：div、h1~6、p、form、ul、li、ol、dl、address、fieldset、hr、menu、table
  • 独占一行（其宽度默认填满其父元素）
  • 可以设置width、height和margin、padding
行内元素：span、a、b、i
• 不会独占一行（其宽高由内容决定）
• 设置width和height无效，垂直方向的margin设置无效
• 行内块元素：
  • 不独占一行
  • 可以设置width、height和margin、padding
• 空元素：br、hr
• 替换元素：img、input、iframe、textarea
• 浏览器可以根据元素的标签和属性改变元素的具体显示内容。
• <input/ > 标签：type属性不同，页面上所加载的内容也不相同。
• <img/ > 标签：不添加属性时，页面上没有显示；添加 src 属性，才会显示图片，src 不同，页面上显示出来的内容也就不同。
• 不可替换元素（非替换元素）
  • 不通过标签和属性决定元素的具体显示内容，而是将标签所包围的具体内容告诉浏览器，并在页面上直接显示出来。
  •  <p></p> 标签：浏览器直接会将 <p></p> 标签里面的东西显示出来，而不是通过属性。

嵌套

• 块级元素中可以包含块级元素和行内元素。
  • p标签不能嵌套块级元素。（h1-6、dt同理）
• 行内元素只能包含行内元素，不能包含块级元素。
  • a标签不能包含a标签。