zoukankan      html  css  js  c++  java
  • 在网站制作过程中发现的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标签的一行,自动填充其父元素的宽度。

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

  • 相关阅读:
    第一周软件测试
    第八周
    第七
    安卓第六周作业
    安卓第五周
    第四周作业
    Jsp第十次作业
    Jsp第九次作业(带验证码的email)
    Jsp第八次作业
    Jsp第七次作业email
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/6442102.html
Copyright © 2011-2022 走看看