C3的坑之inline-block
最近开始复习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变成了行内元素,所以也应该并排在一起,但是....
这里出现了两个问题:
- div之间出现间隔
- 子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的更多相关文章
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- Hadoop EC 踩坑 :data block 缺失导致的 HDFS 传输速率下降
环境:hadoop-3.0.2 + 11 机集群 + RS-6-3-1024K 的EC策略 状况:某天,往 HDFS 上日常 put 业务数据时,发现传输速率严重下降 分析: 检查集群发现,在之前的传 ...
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
随机推荐
- vue加载优化方案
我们的项目随着组件的加入,首次加载的js文件越来越大,用户等待时间越来越长:之前想着使用webpack的splitCoding来解决,看了webpack的官方文档可以配置optimization的 m ...
- HanLP分词工具中的ViterbiSegment分词流程
本篇文章将重点讲解HanLP的ViterbiSegment分词器类,而不涉及感知机和条件随机场分词器,也不涉及基于字的分词器.因为这些分词器都不是我们在实践中常用的,而且ViterbiSegment也 ...
- SQL中的关键词
AS的用法及妙用 https://www.cnblogs.com/zhaotiancheng/p/6692553.html
- 19牛客暑期多校 round2 H 01矩阵内第二大矩形
题目传送门//res tp nowcoder 目的 给定n*m 01矩阵,求矩阵内第二大矩形 分析 O(nm)预处理01矩阵为n个直方图,问题转换为求n个直方图中的第二大矩形.单调栈计算,同时维护前二 ...
- python3 虚拟环境的创建
创建虚拟环境的方法有很多种,我来分享一下我最常用的虚拟环境的创建方法和一些命令的使用, 什么是虚拟环境? 知道的可以略过,不知道的可以听我简单的说下.虚拟环境这四个字,一听你就明白什么意思了,首先理解 ...
- volatile 关键字(修饰变量)
目录 volatile 关键字(修饰变量) 1. 含义 2. 作用 3. 如何保证可见性 4. 如何禁止指令重排序优化 5. volatile 是不安全的 6. volatile 不适用场景 vola ...
- HTML练习二--动态加载轮播图片
接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html demo下载: https://pan.baidu.com/s/1dhvzHwTHKiguy ...
- .NET 使用事物调用存储过程
using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...
- Mina TCP服务端客户端 示例
服务端代码: package com.xd.nms.example; import java.io.IOException; import java.net.InetSocketAddress; im ...
- 如何成为优秀的技术Leader
技术主管,又叫技术经理,英文一般是 Tech Leader ,简称 TL.随着工作经验的不断积累,能力的不断提升,每个人都有机会成为 Team Leader. 然而在机会到来前,我们必须提前做好准备, ...