行内元素和块级元素

一、行内元素与块级元素的区别

1.块级元素的特点：

• 总是从新行开始
• 高度，行高、外边距以及内边距都可以控制。
• 宽度默认是容器的100%
• 可以容纳内联元素和其他块元素

2.内联元素的特点：

• 和相邻行内元素在一行上。
• 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
• 默认宽度就是它本身内容的宽度。
• 内联元素只能容纳文本或则其他内联元素。

常见的块级元素有：div、p、form、ul、ol、li，h1,table等。
常见的内联元素有：a,span,em,strong,input,img等。

【问题】:
那么问题来了，竟然input,img属于行内元素，那为什么我给img，input设置高宽确有效呢？

二、替换元素与非替换元素
由此我去查了下，发现就元素本身而言也可以分为替换元素和非替换元素

• 非替换元素如p,div等。他们将内容直接告诉给浏览器然后显示出来。
• 而替换元素如img，input等。浏览器会根据元素的标签类型和属性来显示这些元素。
• 一般替换元素都属于行内元素，对于这些特殊的替换元素，浏览器解释他们时有点类似于inline-block元素，所以他们遵循标准的盒子模型。

三、行内元素与块级元素间的相互转换
行内元素和块级元素都不是绝对的，可以相互转换,，通常有这些方式可以转换。

• display:inline-block,将行内非替换元素设置为行内块元素
• float:left/right,float就是隐形的把内联元素转换为块级元素。但是他不会占据一行，相当于display：inline-block;
• position,当对行内元素进行定位时，都会将行内元素转换为块级元素。
  注意：只有通过display:block设置的行内元素才能继承父元素的宽度。

【区别】：

• 块级元素会独占一行，其宽度自动填满其父元素宽度
  行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
• 块级元素可以设置 width, height属性，行内元素设置width, height无效
  【注意：块级元素即使设置了宽度，仍然是独占一行的】
• 块级元素可以设置margin 和 padding
  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，
  但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）