小白前端开发笔记-（行内元素、块级元素、行内块元素、之间的区别与特点）
- 作者: 内涵的文字讲不出笑点丶
- 来源: 51数据库
- 2021-08-21
行内元素(inline-level)
行内元素又称内联元素，不能独占一块区域，根据自身内容（文字/图片）大小来确定自身区域大小。所以通常不能设置宽高、对齐等属性，通常用于
控制页面文本内容。
**特点**
1.总是和相邻的行内元素从左到右排成一排。
2.设置宽高无效。水平方向的padding、margin可以设置但垂直方向的设置无效。*（想要垂直方向居中：内容大小=所在区域大小即可）*
3.默认宽度是其自身内容的宽度。
4.行内元素仅能容纳其他行内元素或文本。*（特殊：<a>内可以放块级元素但<a>内不可再放链接）*
常见的行内元素如:<span> <a> <strong> <em> <b> <s> <i> <font>......
块级元素(block-level)
块级元素会独占一行或多行，其宽高可以任意设置，通常用于搭建网页布局部分，使网页结构更加紧凑合理。
**特点：**
1.每个块级元素均独占一行。
2.宽度高度可以自定义设置。
3.默认宽度为所在容器宽度的100%。
4.可容纳行内元素等其他元素。*(文字类的块级元素不能再放块级元素)*
常见的块级元素如: <div> <p> <ul> <li> <h1-h6>......
行内块元素（inline-block）
可以理解为特殊的行内元素，像<img>可以设置宽高、对齐等属性的同时又不会独占一行，把这样一类既具有行内元素特点又具有块级元素特点的标签
称为行内块元素。
**特点：**
1.和相邻的行内元素在同一行，但之间会有空白缝隙。
2.默认的宽高是其本身内容的宽高。
3.宽度、高度、行高、内外边距都可自定义设置。
常见的行内块元素如：<img> <input> <select> <textarea> <button> <label>......
标签显示模式转换（display）
当给一个元素设置宽高时无效时，或想让元素显示在一行时，可用display方法来改变标签的显示模式。
块级元素 ----> 行内元素：display:inline;
行内元素 ----> 块级元素：display:inline;
块级元素、行内元素 ----> 行内块元素：display:inline-block;
推荐阅读
