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. Expression表达式 实现and、or搜索

    用法: [HttpPost] public ActionResult GetBannerList(int pageIndex, int pageSize, string search) { Resul ...

  2. 内核下枚举进程 (二)ZwQuerySystemInformation

    说明: SYSTEM_INFORMATION_CLASS 的5号功能枚举进程信息.其是这个函数对应着ring3下的 NtQuerySystemInformation,但msdn上说win8以后ZwQu ...

  3. 类欧几里德算法(洛谷 P5170

    #include <iostream> #include <cstdio> #include <queue> #include <algorithm> ...

  4. 前端CSS样式操作

    目录 字体和文字 设置标签的宽高 字体属性 文字的属性 文字对齐 text-align 文字装饰 text-decoration 首行缩进 text-indent 背景属性 背景图片 边框 画圆 di ...

  5. python的meshgrid用法和3D库 mpl_toolkits.mplot3d 与PolynomialFeatures多项式库学习

    meshgrid import numpy as np from matplotlib import pyplot as plt from mpl_toolkits.mplot3d import Ax ...

  6. intrinsicContentSize和Content Hugging Priority

    Mgen | 首页 | | 发新文章 | 联系 | 订阅  | 管理 iOS: 在代码中使用Autolayout (2) - intrinsicContentSize和Content Hugging ...

  7. vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)

    在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: ...

  8. Python网络爬虫之三种数据解析方式 (xpath, 正则, bs4)

    引入 回顾requests实现数据爬取的流程 指定url 基于requests模块发起请求 获取响应对象中的数据 进行持久化存储 其实,在上述流程中还需要较为重要的一步,就是在持久化存储之前需要进行指 ...

  9. Vue中的better-scroll插件

    Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...

  10. 04_springmvc注解开发

    一.注解开发 需求:1.进入商品查询列表页面. 2.点击修改,进入商品修改页面,页面中显示了要修改的商品(从数据库查询),要修改的商品从数据库查询,根据商品id(主键)查询商品信息. 3.在商品修改页 ...