首页 > 代码库 > 在网站制作过程中发现的block和inline-block不同。

在网站制作过程中发现的block和inline-block不同。

       inline-block,简单来说就是在CSS中通过display:inline-block对一个对象指定inline-block属性,可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。有时既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。而block的的特性有以下特征:

  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下(即不设置宽度的情况下),block元素宽度自动填满其父元素宽度
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性。

再实际过程中,我们看到碰到这样的情况:

技术分享

在这里我们的HTML代码如下图所示:

技术分享

CSS样式如下:

技术分享

在这里。我们的a 标签的display使用的是inline-block,对象是呈递为内联元素,宽度自适应它的内容。不会独占整个一行。改为display:block后,效果如下图所示:

 技术分享

此处的标签a的宽度就独占真个p标签的一行,自动填充其父元素的宽度。

这是本文所写,请大家关注下他的区别。

 

在网站制作过程中发现的block和inline-block不同。