常见的块级元素、行内元素、行内块元素

一、块级元素 block

1. 特点：

• 自动换行
• 独占一行
• 可设置宽高
• 默认宽度为父元素的宽度

2.常见块级元素

div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

  <center>...center>  地址文字

  <h1>...h1>  标题一级

  <h2>...h2>  标题二级

  <h3>...h3>  标题三级

  <h4>...h4>  标题四级

  <h5>...h5>  标题五级

  <h6>...h6>  标题六级

  <hr>  水平分割线

  <p>...p>  段落

  <pre>...pre>  预格式化

  <blockquote>...blockquote>  段落缩进   前后5个字符

  <marquee>...marquee>  滚动文本

  <ul>...ul>  无序列表

  <ol>...ol>  有序列表

  <dl>...dl>  定义列表

  <table>...table>  表格

  <form>...form>  表单

  <div>...div>

3.注意

• 块级元素可以嵌套任意元素
• 块级文字元素中不能放入其他块级元素，比如： p中不要嵌套div、p、h

二、行内元素 inline

1.特点

• 无法自动换行
• 一行可放多个
• 不可设置宽高
• 默认宽度是本身内容宽度
• 行内元素的paddding可以设置
• margin只能够设置水平方向的边距，即：margin-left和margin-right，设置margin-top和margin-bottom无效

2.常见行内元素

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

  <b>...b>  加粗

  <strong>...strong>  加粗
  
  <sup>...sup>  上标

  <sub>...sub>  下标

  <i>...i>  斜体

  <em>...em>  斜体

  <del>...del>  删除线

  <u>...u>  下划线

3.注意

行内元素尽量只放行内元素与行内块元素，链接里边不能再放链接，特殊情况a可以嵌套任意元素。

三、行内块元素 inline-block

1.特点

综合块级元素与行内元素的特性，可设宽高（默认是内容宽高），也可以设置内外边距

2.常见行内块元素

img 、input 、td

四、标签之间的转换

display：inline（转为行内元素）/inline-block（转为行内块元素）/block（转为块元素）/none（隐藏 不显示）

注意：当元素浮动（float）时会转化成行内块元素特点。