CSS包含块级元素、行内元素和行内块元素。HTML页面是由元素,也叫标签构成的。每个元素在HTML页面中生成一个包含内容的框,就是大家知道的”盒子“。不同的元素显示的方式不同,有的独自占据整个一行,除非使用float属性,否则其他元素不能与其共一行,这就是块级元素,比如div,h(1,2,3,4,5,6),p元素等。有的元素水平挨着连续排放,直到一行放不下了,才换行,这就是行内元素,比如span,em,strong,i元素等。下面说一说CSS中块级元素、行内元素和行内块级元素的区别。
1.块级元素(block)
块级元素独自占据整行,它有自己的宽度和高度,还可以自定义元素的width和height。一般作为容器,可容纳块级元素和行内元素。块级元素特点如下:
*每个块级元素独占一行,其后的元素只能另起一行。如果使用了float属性,则可以多个块级元素共处一行。
*块级元素的高度、宽度、行高和边距都可以设置。
*块级元素的宽度如果不设置的话,默认是其父元素的宽度。
*块级元素对应的属性是display:block。
2.行内元素(inline)
行内元素可以水平挨着存放,多个行内元素共处一行,行内元素内一般不包含块级元素。行内元素特点如下:
*多个行内元素可以共享一行,水平挨着连续存放,直到一行放不下,才会换行。
*行内元素的高度、宽度、行高及边距不可设置。
*行内元素的宽度是其包含的文字或图片的宽度,不可改变。
3.行内块级元素(inline-block)
行内块级元素既有块级元素的特点,又有行内元素的特点。它可以自由设置元素的高度和宽度,也可以在一行中存放多个行内块级元素。其特点如下:
*行内块级元素可以和其他行内元素或行内块级元素存放在同一行。
*行内块级元素的高度、宽度、行高和边距可以设置。
4.类型转换
display:block ,定义元素为块级元素
display:inline ,定义元素为行内元素
display:inline-block,定义元素为行内块级元素。
想了解学习CSS选择器相关知识的,请查看深入学习CSS选择器这篇文章。