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

Posted baoyadong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在网站制作过程中发现的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不同。的主要内容,如果未能解决你的问题,请参考以下文章

连续 3 张图像以容器为中心

ios 中的block应用

NANDFLASH读写编程过程中提示Good blocks not enough

开发该选择Blocks还是Delegates

django-7.django模板继承(block和extends)

python测试开发django-7.django模板继承(block和extends)