更多内容，欢迎关注微信公众号“让知识成为资产”
HTML中元素大多数都是块级元素或行内元素。
理解块级元素和行内元素是理解CSS浮动定位的基础。
含义及特点
行内元素(inline element)——也叫做内联元素，只占据它对应标签的边框所包含的空间。
特点——
- 和其他元素都在同一行；
- 高、行高及外边距和内边距不可改变；
- 宽度就是它的文字和图片的宽度，不可改变；
- 内联元素只能容纳文本或者其他内联元素。
块级元素(block element)——块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
特点——
- 总是在新行上开始；
- 高度、行高以及外边距和内边距都可控制；
- 宽度默认是它容器的100%，除非设定一个宽度；
- 块级元素可以容纳内联元素和其他块级元素。
行内块状元素(inline-block element)——综合了行内元素和块状元素的特性，但是各有取舍。
特点——
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右
区别
- 行内元素与其他元素在同一行；块级元素独占一行。
- 行内元素，只能容纳文本或其他内联元素；块级元素，能容纳其他块级元素或者内联元素。
- 行内元素中宽度(width)、高度(height)、内边距(padding)、外边距(margin)不可改变； 块级元素中宽度、高度、内边距、外边距可以设置。
常见的行内元素和块级元素
常见的行内元素——
- a
- span
- img
- input
- select
- strong
常见的块级元素——
- div
- p
- ul
- ol
- li
- h1~h6
- form
- table
行内元素和块级元素之间的转换
diplay
- 块级元素默认display:block; 行内元素默认为display:inline; 行内块元素默认为display:inline-block;
- display:none; 不显示该元素，也不会保留该元素原先占有的文档流位置；
- display:block; 转换为块级元素；
- display:inline; 转换为行内元素；
- display:inline-block; 转换为行内块级元素。
float
当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。
position
当为行内元素进行定位时，position:absolute 与 position:fixed 都会使得原先的行内元素变为块级元素。
更多内容，欢迎关注微信公众号“让知识成为资产”