块级元素与行内元素的区别
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必须霸占一行了,别人无法和他并排
如果不设置宽度,将撑满父亲