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

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

  • 相关阅读:
    express如何使用cors插件、body-parser插件
    如何让xshell关闭后依然运行node项目
    nuxt命令和部署
    Python—函数的名称空间
    Python—生成器
    Python—闭包
    Python入门-字符串常用方法
    Python入门-函数
    Python入门-文件操作
    Python入门-三级菜单
  • 原文地址:https://www.cnblogs.com/xuzhudong/p/6442102.html
Copyright © 2011-2022 走看看