1、使用table-cell父级设置: display: table-cell; text-align: center; vertical-align: middle;子级设置: display: inline-block; vertical-align: middle;2、使用transform父 ...
分类:
其他好文 时间:
2020-02-14 16:03:48
阅读次数:
61
使用弹性盒子兼容低端适配有时需要: display:flex 和 display:-webkit-box display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit ...
分类:
Web程序 时间:
2020-02-12 12:55:03
阅读次数:
91
先来看看一个例子 在一个div我们把四个按钮全部放到右边去了,看下效果↓ 这个时候我们想把第一个按钮左对齐,其他保持不变 这时候我们来个第一个按钮样式上加上 :margin-right: auto; 再看页面效果↓ 同理如果你是左对齐,让最后一个右对齐,就给最后一个按钮样式加上:margin-lef ...
分类:
其他好文 时间:
2020-02-11 17:38:30
阅读次数:
789
全部代码如下 <style> .foot{ width: 100%;margin:0 auto; height: 80px; background: #5283ff;} #footnav{ list-style: none;display: flex;justify-content: center; ...
分类:
其他好文 时间:
2020-02-08 19:44:12
阅读次数:
115
当指定view为flex布局后,给子元素定义width是不起效果的。 原因:定义为flex布局元素的子元素,自动获得了flex-shrink的属性,这个属性是什么意思呢?就是告诉子元素当父元素宽度不够用时,自己调整自己所占的宽度比,这个flex-shrink设置为1时,表示所有子元素大家同时缩小来适 ...
分类:
其他好文 时间:
2020-02-07 15:15:04
阅读次数:
74
网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于 "盒状模型" ,依赖 " " 属性 + " " 属性 + " " 属性。它对于那些特殊布局非常不方便,比如, "垂直居中" 就不容易实现。 2009年,W3C 提出了一种新的方案 Flex 布局,可以简便、完整、响应式地 ...
分类:
其他好文 时间:
2020-02-07 10:36:58
阅读次数:
56
先来看看效果图! HTML代码: <div id="wrap"> <div class="balloon"> <h2>!</h2> </div> <div class="balloon"> <h2>恭</h2> </div> <div class="balloon"> <h2>喜</h2> </di ...
分类:
Web程序 时间:
2020-02-06 10:26:16
阅读次数:
246
flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时对元素作出调整。 如果图片A的flex-grow属性的值为 1,图片B的flex-grow为 2,那么 2 的会比 1 的扩大两倍: 也许“扩大两倍”这个概念不便于理解,我们可以换一种说法。 首先要理解一个词“剩余空 ...
分类:
Web程序 时间:
2020-02-05 09:16:54
阅读次数:
142
WXSS和CSS: WXSS(WeiXin Style Sheets)具有CSS大部分特性。同时为了更适合开发微信小程序,WXSS对CSS进行了扩充以及修改。主要体现在两个方面: 1, 尺寸单位。2, 样式导入。 rpx尺寸单位: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhon ...
分类:
微信 时间:
2020-02-04 22:09:14
阅读次数:
125
场景:在无数据的子组件中,有图片提示,该页面无数据,想要将这个图片水平垂直居中 父组件 子组件 可以在图片的父元素上同时使用定位方式和flex布局 ...
分类:
移动开发 时间:
2020-02-03 19:05:09
阅读次数:
700