最近开始复习css一直在踩坑,今天分享一个inline-block

关于inline-block可能很多人都不熟悉,布局这方面很多人用的都是flex或者浮动,flex很强大毋庸置疑的可是关于兼容性就不是很让人满意,而浮动虽然很兼容可是觉得清除浮动就很麻烦,于此我在一些大型网站,例如我们的segmentfault的首页导航展示用的布局就是inline-block,觉得inline-block可以撸一波,可是突然发现这里面也存在一些小问题,首先先po出代码

<div style="background-color:green">
<div style="width:40px;height:30px;background-color:red;"> </div>
<div style="width:40px;height:30px;background-color:red;"> </div>
<div style="width:40px;height:30px;background-color:red;"> </div>
</div>


这时候我们采取inline-block进行布局,神奇的事情就发生了

<div style="background-color:green;">
<div style="width:40px;height:30px;background-color:red;display:inline-block;"> </div>
<div style="width:40px;height:30px;background-color:red;display:inline-block;"> </div>
<div style="width:40px;height:30px;background-color:red;display:inline-block;"> </div>
</div>

原本的3个div并排在一起,因为3个div变成了行内元素,所以也应该并排在一起,但是....
这里出现了两个问题:

  1. div之间出现间隔
  2. 子div与父div之间有一个4px的间距

这里会出现这种问题的原因是因为 inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距

div之间的间距解决的方法

在这里我尝试过一个方法就是设置margin-right为负值,

<div style="background-color:green">
<div style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px"> </div>
<div style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px"> </div>
<div style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px"> </div>
</div>

在这里我们能看到第一个div与第二个div仍然有一个1px的间距,而第二个和第三个没有间距,子div和父div没有间距,说明我们的问题不是在这里

我在参考张旭鑫大神的博客深感佩服觉得采用这种方法最好:

给父div加这样的css属性

font-size:0
-webkit-text-size-adjust:none;

po出代码

<div style="background-color:green;font-size:0;-webkit-text-size-adjust:none;">

        <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>

        <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>

        <div style="width:40px;height:30px;background-color:red;display:inline-block;">

        </div>

那么又有一个问题了,-webkit-text-size-adjust是什么????

webkit内核的浏览器(chrome)中,当在css中定义的中文font-size小于12px的时候,浏览器仍然使用12px,这时就可以用-webkit-text-size-adjust:none;

哈哈,这样我们的问题就解决了


最后说下inline-block的兼容性:参考这篇文章
-->
IE6、IE7不识别inline-block但可以触发块元素。其它主流浏览器均支持inline-block。这就够了,ie6,7就不考虑了,原因嘛,你懂的...

C3的坑之inline-block的更多相关文章

  1. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  2. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  3. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  4. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  5. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  6. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  7. Hadoop EC 踩坑 :data block 缺失导致的 HDFS 传输速率下降

    环境:hadoop-3.0.2 + 11 机集群 + RS-6-3-1024K 的EC策略 状况:某天,往 HDFS 上日常 put 业务数据时,发现传输速率严重下降 分析: 检查集群发现,在之前的传 ...

  8. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  9. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

随机推荐

  1. MemCache服务安装配置及windows下修改端口号

    简述:memcached 开源的分布式缓存数据系统.高性能的NOSQL Linux 一.环境配置与安装 01.编译准备环境 yum install -y gcc make cmake autoconf ...

  2. js模板(template.js)实现页面动态渲染

    template.js是由纯JavaScript编写的第三方模板引擎.点击https://github.com/yanhaijing/template.js可进行下载. 在页头导入模板文件 <s ...

  3. 在springMVC框架中集成quartz作业调度器

    1.首先需要导入这几个jar包,如下图: 其中log4j,quartz,slf4j-api,slf4j-log4j12我是在项目中都引用了 2.引用完jar包后,新建一个作业调度类,执行作业调度逻辑, ...

  4. 认识函数(python)

    一般的函数都是有参数的,函数的参数都是放在函数定义的括号里的,函数参数的命名规则和我们说的变量的命名规则基本一样,一定要清晰明了.(能概括出它的意义,让人阅读你的代码,就知道这个参数是干嘛的就行).当 ...

  5. 15.Ansible安装与配置简单版

    Ansible是一个简单高效的自动化运维管理工具,用Python开发,能大批量管理N多台机器,可以并发的在多台机器上部署应用.安装软件.执行命令.配置和编排任务. 一.Ansible工作机制 从图中可 ...

  6. mysql批量修改数据库表引擎

    数据库表之前的引擎是MyISAM,影响事务操作,要改成Innodb引擎 查询表引擎 SELECT CONCAT(table_name,' ', engine) FROM information_sch ...

  7. C#应用笔记

    1.ref关键字.out关键字——引用传递参数 2.什么时候用DateReader,什么时候用DateSet呢? 3.is操作符.as操作符的使用 4.Eval方法和Bind方法的区别 5.Serve ...

  8. sonarqube执行命令遇上的小问题

    在安装好sonarqube,本地或是服务器上都是可疑正常运行的情况下. 这一次我重新上传,修改配置SonarQube.Analysis.xml,sonar.host.url的值已经改为服务器上的,执行 ...

  9. 【Caffe学习笔记】一 、环境安装 Caffe + cuda + windows10 + VS2015 安装笔记, win7也适用

    1. 下载cuda8.0  cudnn5   anaconda https://developer.nvidia.com/cuda-80-ga2-download-archive https://de ...

  10. Win Server 2012 配置运行 .net core 环境

    今天拿到一台 全新的win 2012 服务器配置服务器环境 记录一下 首先装好IIS 打开服务器管理器  - 添加功能和角色     好 安装完IIS 看一下服务器有没有安装 core的运行环境(全新 ...