布局 display 语法： display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-gr ...
分类：
Web程序 时间：
2020-06-25 23:23:15
阅读次数：
180
公共样式 .wrapper{ width: 300px; height: 300px; background-color: chartreuse; margin-right: 30px; display: inline-block; } .content{ width: 100px; height: ...
分类：
Web程序 时间：
2020-06-23 01:26:22
阅读次数：
87
display属性 值说明 block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 inline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性 none 设置元素不会被显示 d ...
分类：
其他好文 时间：
2020-06-22 12:56:20
阅读次数：
51
<div class="circle" style="display: inline-block;position: relative;"> <div class="wave0 wave"></div> <div class="wave1 wave"></div> <div class="wave2 ...
分类：
Web程序 时间：
2020-06-20 10:45:28
阅读次数：
110
当我们想让元素横向排开时，会使用span标签，或者是将块级元素设置为display:inline-block时 有时会发现，相邻两个元素之间，明明没有设置margin或者是padding值，但是有间隙 原因是因为html代码中相隔的span标签间有回车 HTML代码中的回车换行被转成一个空白符，在字 ...
分类：
其他好文 时间：
2020-06-18 16:07:45
阅读次数：
55
display:inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。 解决方案： 1.将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。 <style> .spa{ d ...
分类：
其他好文 时间：
2020-06-16 15:20:43
阅读次数：
45
html: <div class="consult-tab"> <a href="">咨询</a> <a href="">企业咨询</a> <a href="">咨询</a> <a href="">咨询</a> <a href="">咨询</a></div> css: .consult-tab { ...
分类：
Web程序 时间：
2020-06-14 20:42:55
阅读次数：
78
当我们布局一个个一样的div组合时，往往会遇到一个问题，那就是无论什么原始布局display都很鸡肋。 display:inline-block 比如纯粹的inline-block展示，自适应的话两边不对齐。假使固定一行个数，那么，当用户缩小屏幕时，就会展示不全面,影响体验。 display:gri ...
分类：
其他好文 时间：
2020-06-06 00:50:39
阅读次数：
69
display inline/inline-block/block -->> 牛奶/果冻/坚果 inline: img, span, strong, em, i, em, a... inline-block: input, button, ...（table-cell元素） block: p, di ...
分类：
Web程序 时间：
2020-06-05 10:28:41
阅读次数：
73
垂直居中 单行文本垂直居中 父元素高度为auto 一个父元素如果不设置高度的话，默认就是紧包裹着子元素，如果父元素设置的pading-top和padding-bottom相同，这本身就是一个垂直居中效果，但是当子元素并不是独占一行，而是inline元素和inline-block元素组合成一行，比如下 ...
分类：
Web程序 时间：
2020-06-05 00:36:45
阅读次数：
75
