a{ display: inline-block; width: 10px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg);} ...
分类：
Web程序 时间：
2020-04-06 23:36:39
阅读次数：
167
1、现象： 总结：行内元素也能设置pandding,marging，上下是不正常的，需避免使用，左右是正常的。 2、现象： 总结： 行内元素：行内元素的高度由其内的文字框大小决定的，不能被其内部的行内、行内块，块撑开。 块级元素：能被其内部的所有元素撑开 3、inline-block和inlne都不 ...
分类：
其他好文 时间：
2020-04-05 22:42:12
阅读次数：
85
1、通过verticle-align:middle实现CSS垂直居中。 通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。 1 .parents{ 2 backgrou ...
分类：
Web程序 时间：
2020-04-05 20:44:36
阅读次数：
88
{foreach $serviceInfo as $v} <div style="display: inline-block;margin-right: 10px;"> <input type="checkbox" value="{$v.service_item}" id="checkbox-{$v ...
分类：
编程语言 时间：
2020-03-28 18:21:59
阅读次数：
429
开发的时候很多莫名的间距，比如img，span没写在同一行，它就无耻地出现间隔； 再比如li标签横方向排列加上行级元素的display: inline-block;属性后，li标签没写在同一行，它也无耻地出现间隔。 所以翻阅很多自来资料，这里总结一下解决方法。。。先了解元素属性 块级元素（块级大多为 ...
分类：
其他好文 时间：
2020-03-23 09:29:19
阅读次数：
85
图片 + 未知宽高 + 垂直居中 第一种： table-cell / inline-block + vertical-align条件： 容器宽高受图片默认宽高影响html结构： <div> <img src="./image.jpg" alt=""> </div> css代码： div { disp ...
分类：
其他好文 时间：
2020-03-22 13:49:56
阅读次数：
68
问题： 当两个div使用了display：inline-block样式后，会出现错位的情况： 问题分析 出现这种情况的原因是，第二个外层的div会相对于第一个 外层div 中最后渲染出来的 内层div 的顶部对齐， 所以才出现了这种错位的情况，如下所示： 解决 给每个外层div设置 vertical ...
分类：
其他好文 时间：
2020-03-21 09:22:46
阅读次数：
116
一. 问题： 如题所描述，div设置为inline block后，产生如下现象： 二. 解决办法： 1. div之间不要换行不要留空格，写成这种： 2. 父元素的font size：0；再给子div设置一个font size 三. 原因 出现空隙是因为div标签设为行内块级元素后代码里的换行被浏览器 ...
分类：
其他好文 时间：
2020-03-20 12:24:35
阅读次数：
86
即使使用 *{margin: 0;padding: 0;} 这样的代码重置了浏览器默认样式 类似<a>标签这种inline-block元素，它们之间还是存在着留白和间距。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> < ...
分类：
其他好文 时间：
2020-03-19 23:17:32
阅读次数：
108
间隙产生的原因是`inline-block`对外是`inline`，对内是`block`。`inline`会将连续的空白符解析为一个空格（如：下面示例的两个`li`之间的后面的换行空格）。取消间隙的方法如下：```html Document 有间隙 首页 上一页 1 2 3 下一... ...
分类：
Web程序 时间：
2020-03-19 22:03:36
阅读次数：
91
