最近开始复习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. vue加载优化方案

    我们的项目随着组件的加入,首次加载的js文件越来越大,用户等待时间越来越长:之前想着使用webpack的splitCoding来解决,看了webpack的官方文档可以配置optimization的 m ...

  2. HanLP分词工具中的ViterbiSegment分词流程

    本篇文章将重点讲解HanLP的ViterbiSegment分词器类,而不涉及感知机和条件随机场分词器,也不涉及基于字的分词器.因为这些分词器都不是我们在实践中常用的,而且ViterbiSegment也 ...

  3. SQL中的关键词

    AS的用法及妙用 https://www.cnblogs.com/zhaotiancheng/p/6692553.html

  4. 19牛客暑期多校 round2 H 01矩阵内第二大矩形

    题目传送门//res tp nowcoder 目的 给定n*m 01矩阵,求矩阵内第二大矩形 分析 O(nm)预处理01矩阵为n个直方图,问题转换为求n个直方图中的第二大矩形.单调栈计算,同时维护前二 ...

  5. python3 虚拟环境的创建

    创建虚拟环境的方法有很多种,我来分享一下我最常用的虚拟环境的创建方法和一些命令的使用, 什么是虚拟环境? 知道的可以略过,不知道的可以听我简单的说下.虚拟环境这四个字,一听你就明白什么意思了,首先理解 ...

  6. volatile 关键字(修饰变量)

    目录 volatile 关键字(修饰变量) 1. 含义 2. 作用 3. 如何保证可见性 4. 如何禁止指令重排序优化 5. volatile 是不安全的 6. volatile 不适用场景 vola ...

  7. HTML练习二--动态加载轮播图片

    接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html demo下载: https://pan.baidu.com/s/1dhvzHwTHKiguy ...

  8. .NET 使用事物调用存储过程

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  9. Mina TCP服务端客户端 示例

    服务端代码: package com.xd.nms.example; import java.io.IOException; import java.net.InetSocketAddress; im ...

  10. 如何成为优秀的技术Leader

    技术主管,又叫技术经理,英文一般是 Tech Leader ,简称 TL.随着工作经验的不断积累,能力的不断提升,每个人都有机会成为 Team Leader. 然而在机会到来前,我们必须提前做好准备, ...