前端基础(行元素、块元素、替换元素以及非替换元素)

行级元素

内联元素也叫内嵌元素或行内元素，一般是基于语义级的基本元素。
特点： 内联元素只能容纳文本或者其他内联元素；一般情况下，很多属性是不可变的（比如宽高、边距等）。
示例：
a（锚点） b（粗体） span img input select strong br big small em sub sup i textarea

块级元素

一般是其他元素的容器元素，能容纳其他元素块元素或内联元素
示例：div ul ol li dl（定义列表） dt dd h1~h6 p form hr address table

可变元素

可变元素为根据上下文语境决定该元素为块级元素或者内联元素；依然属于上述两种元素类别，一旦上下文关系确定了它的类别，它就需要遵循块级元素或者内联元素的规则限制
示例：
applet - java applet del - 删除文本
iframe - inline frame button - 按钮
ins - 插入的文本 map - 图片区域
object - object对象 script - 客户端脚本

空元素

一般指的是那些换行元素。
br 、hr、 img、 input、 link、 meta
area：形成矩形，圆形，多边形可点击区域，属于图像映射，被包含在map标签中，与img元素对应

替换元素

替换元素就是浏览器根据标签的元素、属性来决定如何显示，比如img、video、input等标签。如img标签，浏览器是根据src的属性来读取这个元素包含的内容
它们有一个特点：浏览器并不直接显示其内容，而是通过其某个属性的值来显示具体的内容

非替换元素

比如div、span、p、h1~h6，浏览器直接显示元素包含的内容。
行内非替换元素：无法设置元素的尺寸、无法设置元素的上下内外边距
行内替换元素：与行内替换元素相反，可以设置元素的尺寸，和元素的上下内外边距
比如：input、img

块元素与行元素的区别：

1、块元素，总是在新行上开始；内联元素，和其他元素在一行
2、块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素
3、块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高以及顶和底边距不可以改变
（以上 指的是默认情况下，人为可以改变以上情形）

块级元素与内联元素之间的转换：

1、display
块元素默认 display:block
行内非替换元素（a,span），默认为 display:inline;
行内替换元素(input,img),默认为display：inline-block
a.display:none （不显示该元素，也不会保留该元素原先占有的文档流位置 ）
b.display:block （转换为块级元素）
c.display:inline （转换为行内元素）
d.dispaly:inline-block （转换为行内块级元素，其实仍为行内元素，但是可以设置宽、高等属性）

2、float
当把行内元素设置完float：left/right后，该行内元素的display属性会被赋予block值，且拥有浮动属性。行内元素除去了之间的莫名空白

3、position
当为行内元素进行定位时，position：absolute与 position：fixed都会使得原先的行内元素变为块级元素