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不同。的更多相关文章

  1. 调试过程中发现按f5无法走进jdk源码

    debug 模式 ,在fis=new FileInputStream(file); 行打断点 调试过程中发现按f5无法走进jdk源码 package com.lzl.spring.test; impo ...

  2. 为Secure Store Service生成新密钥,解决“生成密钥过程中发现错误”的问题

    我们集成TFS和SharePoint Server以后,一个最常见的需求是通过SharePoint Server的Excel Service读取TFS报表中的信息,利用Excel Service的强大 ...

  3. 常见Code Review过程中发现的问题-续

    上一篇列举了一些比较常见的Code Review问题列表,文末有链接,可追溯查看.本篇为上篇的姊妹篇,继续列举一些上篇遗漏的或不易发现的问题清单,希望能整体性把一些常见的问题表述出来. 测试数据不具有 ...

  4. 网页制作过程中div定位的三个问题

    这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...

  5. 在window server 2008 64位系统上 发布网站的过程中遇到的问题

    发布网站的过程如下: 1.安装数据库系统2.建立数据库,执行sql3.安装iis4.在本地机子上发布网站5.把发布好的东西拷贝到IIS上 1.安装数据库系统: 出现错误:必须使用角色管理工具 安装或配 ...

  6. 在window server 2008 64位系统上 发布网站的过程中遇到的问题(转)

    发布网站的过程如下: 1.安装数据库系统2.建立数据库,执行sql3.安装iis4.在本地机子上发布网站5.把发布好的东西拷贝到IIS上 1.安装数据库系统: 出现错误:必须使用角色管理工具 安装或配 ...

  7. kolla制作过程中:neutron-sfc-agent 报错的问题

    在使用二进制方式编译镜像的时候,neutron的sfc-agent提示如下错误ERROR:kolla.image.build:neutron-sfc-agent Failed with status: ...

  8. Hive通过查询语句向表中插入数据过程中发现的坑

    前言 近期在学习使用Hive(版本号0.13.1)的过程中,发现了一些坑,它们也许是Hive提倡的比关系数据库更加自由的体现(同一时候引来一些问题).也许是一些bug.总而言之,这些都须要使用Hive ...

  9. 常见Code Review过程中发现的问题

    软件环境:Spring MVC + MyBatis 主要体现在两个方面,一个是编码习惯问题,另一个是编码质量的问题.编码习惯主要有日志编写.代码注释以及编码风格的问题,而编码质量则与很多方面相关,比如 ...

随机推荐

  1. PyTorch中的C++扩展

    今天要聊聊用 PyTorch 进行 C++ 扩展. 在正式开始前,我们需要了解 PyTorch 如何自定义module.这其中,最常见的就是在 python 中继承torch.nn.Module,用 ...

  2. html--垂直居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. linux 系统优化初始化配置

    一.系统优化配置 1.修改yum源  配置国内yum源 阿里云yum源地址 #CentOS 5.x wget -O /etc/yum.repos.d/CentOS-Base.repo http://m ...

  4. Oracle Database 18c数据库安装步骤

    1.Oracle官网登录下载https://login.oracle.com/mysso/signon.jsp WINDOWS.X64_180000_db_home.zip 2.D盘根目录新建文件夹: ...

  5. server端并发聊天

    mul_server和mul_client实现了客户端发什么消息,服务器端回复什么消息 server_dialog和mul_client实现了客户端与服务器并发通信

  6. thinkphp 动态查询

    借助PHP5语言的特性,ThinkPHP实现了动态查询,核心模型的动态查询方法包括下面几种: 方法名 说明 举例 getBy 根据字段的值查询数据 例如,getByName,getByEmail ge ...

  7. Ubuntu GitHub操作——使用仓库

    若你想更新github代码 在正式更新github仓库时,可以先 git status 查看一下分支master的状态 1.因为是更新代码,所以不用前面那么多步骤,直接添加所更新的文件到 分支mast ...

  8. Jdk8 Hashmap ConcurrentHashMap

    JDK1.8 Hashmap JDK1.8 ConcurrentHashMap 不采用segment而采用 synchronized (f)  f = table[i]; 减小锁的力度 设计了MOVE ...

  9. matlab调用keras深度学习模型(环境搭建)

    matlab没有直接调用tensorflow模型的接口,但是有调用keras模型的接口,而keras又是tensorflow的高级封装版本,所以就研究一下这个……可以将model-based方法和le ...

  10. <jsp:forward page=""></jsp:forward>标签失效异常

    解决方案:在web.xml <filter-mapping>          <filter-name>struts2</filter-name>         ...