块元素和内联元素

2016-06-20  本文已影响0人  cyokin0324

块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念。

块元素和内联元素的基本差异:

是块元素一般都从新行开始,相邻的块级元素将会在不同行显示。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性,即成为块元素同样我们可以把块元素加上display:inline这样的属性,让它也在一行上排列。

块级元素:

 1,独占一行   2,高度宽度可控  3,高度由内容撑开   4,可以容纳其他内联元素和块级元素

内联元素

1,宽度,高度不可控  2, 都在一行显示  3,由内容撑开宽高

inline-block

既有inline的属性也有block的属性,高度可控

在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。

我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

上一篇下一篇

猜你喜欢

热点阅读