css:块元素、行内元素、行内块元素以及三种元素之间的转换

一、三种元素的介绍

1.块元素

块元素的特点

1. 独占一行，也就是会自动换行
2. 可以设置高度、宽度、外边距、内边距
3. 宽度默认是父元素的宽度
   常见块元素
<h1></h1>---<h6></h6> <div> <p> <ul> <li> <ol>

2.行内元素

行内元素的特点

1. 不会自动换行
2. 设置宽、高无效
3. 设置margin对左右有效、上下无效；padding均无效
4. 默认高度为内容高度
   常见行内元素
<span> <a> <i> <em> <strong>

3.行内块元素

行内元素的特点

1. 不自动换行
2. 默认高度就是内容的高度
3. 可以设置宽、高、外边距、内边距
   常见行内块元素
<img> <td> <input>

二、三种元素之间的转换

dispaly：block;转换为块元素
dispaly：inline;转换为行内元素
dispaly：inline-block;转换为行内块元素