块级元素和行内元素的误区

今天无意中看到一篇关于前端布局的各种总结,说到块级元素和行内元素,想补充一点,以备将来忘记了吧。

1. 块级元素特点

  • 总是在新行上开始;
  • 高度、行高以及外边距和内边距都可控制;
  • 宽度默认是它容器的100%,除非设定一个宽度;
  • 可以容纳内联元素和其他块级元素。

2. 行内元素特点

  • 和其他元素都在同一行;
  • 高,行高及外边距和内边距不可改变;
  • 宽度就是它的文字和图片的宽度,不可改变;
  • 内联元素只能容纳文本或者其他内联元素。

3. 二者之间的转换

1.display
块元素默认display:block;
行内非替换元素(a,span)默认为display:inline;
行内替换元素(input)默认为display:inline-block;

display:none;不显示该元素,也不会保留该元素原先占有的文档流位置。
display:block;转换为块级元素。
display:inline;转换为行内元素。
display:inline-block;转换为行内块级元素。

2.float

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

3.position

当为行内元素进行定位时,position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

4. 注意

行内元素又分为替换元素和非替换元素,替换元素可以设置宽高,非替换元素不可以 。
1. 替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。html中的