.key { display: inline-block; width: 100px; vertical-align: text-top; text-align: justify; text-justify: inter-ideograph;/*IE*/ } .key:after { ... ...
分类：
Web程序 时间：
2019-01-23 17:35:57
阅读次数：
206
未知宽高 1、把父元素设置成table，子元素为table-cell，然后用vertical-align：center 优点：父元素可以改变高度 缺点：IE8以下不支持，且对img无效果 2、用一个空标签并设置vertical-align的基准线为中间，并让它inline-block，宽为0，高度1 ...
分类：
Web程序 时间：
2019-01-21 11:15:45
阅读次数：
149
水平居中 垂直居中（vertical-align） vertical-align时而没效果 然而真实使用的时候，我们会发现这个属性“时灵时不灵”，有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化。那是因为vertical-align只作用在inline-block或者inline ...
分类：
其他好文 时间：
2019-01-18 10:57:40
阅读次数：
219
html 基本样式 一、宽高不固定 1.display: flex 2.absolute + transform 3.absolute + margin: auto 4.display: table-cell 二、宽高固定 1.text-align + display: inline-block + ...
分类：
Web程序 时间：
2019-01-13 19:13:26
阅读次数：
212
今日励志语 往日不可追，来日犹可期，祝大家2019年继往开来 迷之间隙 我们创建一个导航列表，并将其列表 item 设置为 inline block，主要代码如下： 效果图如下： 我们从效果图中可以看到列表 item 之间有一点小空隙，但是我们在代码中并没有设置 margin 水平间距。那么这个空隙 ...
分类：
其他好文 时间：
2019-01-05 18:15:00
阅读次数：
173
1.display:inline-block 内容上下移动 原因：inline-block 默认对齐方式是底部对齐 方法：加一个 vertical-align:top; 属性 把垂直对齐方式改为顶部 ...
分类：
Web程序 时间：
2019-01-05 15:19:36
阅读次数：
187
一、垂直对齐方式{vertical-align：middle/top/bottom；} <img>垂直对齐方式：1）给自身加vertical-align；再设置line-height即可； 注意：img会受文字影响自带行高需加font-size：0；去除影响； 2）给img标签设置参照物，也就是在同 ...
分类：
其他好文 时间：
2019-01-02 20:44:15
阅读次数：
216
间隙产生的原因是`inline-block`对外是`inline`，对内是`block`。`inline`会将连续的空白符解析为一个空格（如：下面示例的两个`li`之间的后面的换行空格）。取消间隙的方法如下： ```html Document 有间隙 首页 上一页 1 2 ... ...
分类：
Web程序 时间：
2019-01-02 01:16:00
阅读次数：
214
垂直对齐只对inline或inline-block元素有效 1.基线（baseline） 使用字母x辅助找基线 inline或inline-block基线：在后加一个字符x，x的底部所在位置就是基线位置 父元素基线：在父元素最后加一个x，x的底部所在位置就是基线位置 空的inline或inline- ...
分类：
Web程序 时间：
2018-12-31 13:50:17
阅读次数：
3110
本文是根据网上资料总结出来的文章 左边固定，右边自适应的两栏布局。 基本样式 双inline block方案 通过width: calc(100% 140px)来动态计算右侧盒子的宽度。需要知道右侧盒子距离左边的距离，以及左侧盒子具体的宽度(content+padding+border)，以此计算父 ...
分类：
Web程序 时间：
2018-12-31 00:56:22
阅读次数：
171
