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

2017-03-31  本文已影响0人  vf郑志雄

块级元素

  • 独自占一行,不能与其他任何元素并列
  • 可以设置宽高
  • 如果不设置宽度,那么宽度将默认变为父亲的100%。

行内元素

  • 与其他行内元素并排
  • 不能设置宽、高。默认的宽度,就是文字的宽度。

文本级、容器级。

  • 文本级:p、span、a、b、i、u、em
  • 容器级:div、h系列、li、dt、dd

CSS的分类和上面的很像,就p不一样:
所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素。
所有的容器级标签都是块级元素。

块级元素和行内元素的相互转换

  • display: inline;
    那么,这个标签将立即变为行内元素。此时它和一个span无异:
    此时这个div不能设置宽度、高度;
    此时这个div可以和别人并排了;
  • display: block;
    让标签变为块级元素。此时这个标签,和一个div无异:
    此时这个span能够设置宽度、高度
    此时这个span必须霸占一行了,别人无法和他并排
    如果不设置宽度,将撑满父亲
上一篇下一篇

猜你喜欢

热点阅读