inline-block | 易学教程

使用inline-block时产生的元素上下偏移的问题

阅读更多关于使用inline-block时产生的元素上下偏移的问题

起因原本想使用 display: inline-block 让这三块元素在水平方向上对齐，但是原本好好的，但是最左侧的元素，里面加了内容之后，就产生了如图所示的问题，元素之间上下偏移了。解决办法查了不少文章，最终查明了问题的原因所在。是因为虽然设置了 display: inline-block ，但是三个行内块元素的基准线没有对齐，所以导致如图第一个元素下沉的问题。解决办法如下： 1. vertical-align 使用 vertical-align 可以让元素的垂直基准线向一个方向对齐，在这里，我们可以简单的对第一个元素设置样式 .item1 { display : inline-block ; // 此处省略 vertical-align : top ; } 这样就可以让元素1回到正常的位置，与其他一起对齐啦。 2. overflow: hidden 使用 overflow: hidden 也可以让行内块元素的基准线变为一起注意事项在查阅资料的时候发现，使用 display: inline-block 往往会造成元素与元素之间左右有着空格间隔。造成这一情况的原因是在元素之间使用了空格、回车等元素，所以会被识别，所以会出现空格间隔。我们可以将父容器设置 font-size: 0 来隐藏掉这些空格间隙或者大家查看这篇文章，以解决间隔问题 https://www

C3的坑之inline-block

阅读更多关于 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

清除浮动的7种方法

阅读更多关于清除浮动的7种方法

使用display：inline-block会出现的情况： 1.使块元素在一行显示 2.使内嵌支持宽高 3.换行被解析了 4.不设置的时候宽度由内容撑开 5.在IE6,7下步支持块标签由于inline-block属性换行的时候被解析（有间隙）故解决方法使用浮动float:left/right 使用浮动时出现的情况： 1.使块元素在一行显示 2.使内嵌元素支持宽高 3.不设置不宽高的时候宽度由内容撑开 4.换行不被解析（故使用行内元素的时候清除间隙的方法可以使用浮动） 5.元素添加浮动，会脱离文档流，按照指定的一个方向移动，直到碰到父级的边界或者另一个浮动元素停止（文档流是文档中可显示对象在排列时所占用的位置） 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 div,span{height:100px;background:red;border:1px solid #000; float:left;} 8 /* 9 inline-block 10 11 1.使块元素在一行显示 12 13 2.使内嵌支持宽高 14 15 3.换行被解析了 16 17 4

这可能是史上最全的CSS自适应布局总结教程

阅读更多关于这可能是史上最全的CSS自适应布局总结教程

标题严格遵守了新广告法，你再不爽，我也没犯法呀！话不多说，直入正题。所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局，inline-block布局，弹性盒布局这几个名词。现在对布局也算有一点了解，做个总结巩固一下。如果你也看了很多资料，但是实际动手时对布局还是无从下手的话，希望本文可以帮你理清思路。唠叨一句：看到一个效果图的时候，千万不要急着手贱去敲代码！先思考清楚页面的构造，理清各元素之间的关系，特别需要注意的是在不同的设备下需要有怎样的展现，当你思路清晰找到最好的布局方案时，coding其实真的不需要多少时间。尺寸相关为什么要先说尺寸呢？因为尺寸在布局中的作用非常核心，布局方式定位这些只是改变了元素之间的关系，没有尺寸就什么也不是。比如我们通常会用margin来控制跟其他元素的距离，这就是布局。很多人都会觉得，什么width、margin太简单了，早就掌握了。这种心态我一开始学习CSS的时候也有，觉得很好理解很简单，但是后面才发现自己原来很多东西都没真正掌握。看看张鑫旭大神给我们上的政治课： http://www.zhangxinxu.com

vertical-align对齐规则

阅读更多关于 vertical-align对齐规则

起作用的前提条件只能应用于内联元素以及 display 值为 table-cell 的元素。 vertical-align 属性只能作用在 display 计算值为 inline、inline- block，inline-table 或 table-cell 的元素上。因此，默认情况下，span、strong、 em等内联元素，img、button、input等替换元素，非 HTML 规范的自定义标签元素，以及<td>单元格，都是支持 vertical-align 属性的，其他块级元素则不支持。浮动和绝对定位会让元素块状化，从而让内联元素的vertical-align不生效百分比 vertical-align 的百分比值是相对于 line-height 计算的且是以line-height的基线为基础，vertical-align:0%和vertical-align：baseline效果一样 vertical-align：inline-block和baseline vertical-align 属性的默认值 baseline 在文本之类的内联元素那里就是字符 x 的下边缘，对于替换元素则是替换元素的下边缘。但是，如果是 inline-block 元素则规则要复杂了：一个 inline-block 元素，如果里面就是没有图文内容，或者 overflow 不是

CSS中 inline、block、inline-block的区别

阅读更多关于 CSS中 inline、block、inline-block的区别

我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道 inline是声明div是内联对象，block是声明块对象，那么inline-block是什么意思，即内联又成块？接下来做个测试，让我们了解一下三者的区别和作用吧： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <htmlxmlns=" http://www.w3.org/1999/xhtml "> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>inline、block、inline-block的区别</title> <style> .a{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;} .b{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;} .c{display:inline-block; width:100px;height:100px; padding:5px;background

inline-block 前世今生

阅读更多关于 inline-block 前世今生

曾几何时，display:inline-block 已经深入「大街小巷」，随处可见「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了，上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗？本文将带你深入剖析该属性值的前世今生，让你更好的理解和运用 inline-block。（本文约定 display:inline-block 简写为 inline-block）开篇我们来看几个问题： IE6、7 真的不支持 display:inline-block 吗？ display:inline-block 后的元素为什么会产生水平空隙，这真的是 bug 吗？如何更好的解决 display:inline-block 元素间产生的水平空隙？一、inline-block 前世 1.认知也许有人问你为何要写「 display:inline-block; *display:inline; *zoom:1; 」来兼容 IE6、7 时，你会立马答道：因为 IE6、7 不支持 display:inline-block 呗!不知道何时起，惯性思维给开发者带来了这样一个可怕的概念。万物都是辩证的，当你写下这些的时候，可曾怀疑过大众观点真的可靠吗？也许你认为这些无关

【jQuery学习日记】jQuery实现滚动动画

阅读更多关于【jQuery学习日记】jQuery实现滚动动画

需要实现的效果样式分析： 2个主要部分，头部的标题和导航部分，和主要的功能实现区域； 1.头部 <div id="header"> <h1>动漫视频</h1> <span><</span> <span>></span> </div> <div id="tips"> <span class="on"> </span> <span> </span> <span> </span> </div> 2.功能区域 <div id="viewBox"> <ul id="contentBox"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> </div> 添加样式 <style> #header{ display: inline-block; } #header h1{ display: inline-block; font-size: 32px; padding-left: 20px; } #header span{ width: 30px; height: 30px; display: inline-block; font-size: 23px; cursor

display:inline-block作用解释

阅读更多关于 display:inline-block作用解释

inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。 HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生了元素间的空隙。方法1：word-spacing letter-spacing设置为负值能解决空隙方法2：水平间隙通过设置父元素font-size:0,子元素另外设置字体大小，垂直间隙通过设置vertical-align:top;解决。来源： oschina 链接： https://my.oschina.net/u/2307566/blog/373415

半深入了解float与inline-block

阅读更多关于半深入了解float与inline-block

首先是兼容性 float 的话完全不用担心什么浏览器都能兼容, 是一个比较老的属性了. inline-block 则在IE8以上(包括8)才能使用,查了下资料,其实IE5.5的时候就已经有inline-block了,只是实现不一样,所以想要兼容低版本的IE就只能用额外的代码 display:inline; //强行不换行 zoom:1; // 用来触发hasLayout,有兴趣深入理解的猴子可自行了解其次是对父亲元素的影响 inline-block 的话,没什么好说的,唯一要注意的就是每个设置了inline-block的元素直接都会有空隙,可以在父亲元素里设置 font-size: 0; 来消除,不过后果是什么大家都知道,不过我依然觉得这是最简单暴力的方法,当然也有其他方法,还是请自行查找 float 的话,设置了该属性的元素会脱离文本流,也就是说和position:absolute一样,不过对于一样设置了该属性的元素则不会.所以带来的问题就是父亲元素并不会随着子元素的大小改变长宽,但是如果父亲元素设置为inline-block的话,则长宽会随着子元素变化 (前提是浏览器兼容inline-block,如果兼容的话我就直接用inline-block了~). 所以在不给父亲元素设置inline-block属性的时候就需要清除浮动. 在父亲元素结束前最后一个浮动元素后.clear

订阅 inline-block