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

Posted 2020-09-01 baoyadong

       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标签的一行，自动填充其父元素的宽度。

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