当小程序的flex布局遇到button时 发现justify-content不起作用，无论怎么设置都是space-around的效果。 经过排查，发现原因是小程序button中的默认样式中的margin-left: auto;margin-right: auto;所引起的 覆盖掉就好了 flex 格 ...
分类：
微信 时间：
2020-06-11 16:15:16
阅读次数：
94
关于css的flex布局,我只想说他真的解决了曾经布局中float和position中的痛苦,网上关于flex的文章很多了,在这里分享两篇好的文章(真的只有两篇)供大家学习. 一.阮一峰(不用多说很详细)Flex 布局教程：实例篇Flex 布局教程：语法篇 二.渔人码头用大彩图和GIF动画解释 用大 ...
分类：
其他好文 时间：
2020-06-11 01:07:28
阅读次数：
108
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网格布局Grid用法</title> <style> body{ width: 100%; height: 100%; display: flex; justi ...
分类：
微信 时间：
2020-06-11 00:24:16
阅读次数：
89
前言 1.本篇文章，献给我家女朋友，祝她在杭州找一个965的好公司！2.除了面试题。结合多年开发经验整理出2020最新企业级实战视频教程， 包括 Vue3.0/Js/ES6/TS/React/node等想学的可进裙 519293536 免费获取，小白勿进哦！ 题外话：关于中级 -> 高级的进阶，我也 ...
分类：
Web程序 时间：
2020-06-10 13:13:45
阅读次数：
1679
一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS ...
分类：
Web程序 时间：
2020-06-10 11:25:56
阅读次数：
85
首先父元素肯定时先使用弹性布局，并设置wrap属性使其自动折行 .flexContainer { display: flex !important; flex-wrap: wrap; } 首先使用弹性布局对子元素进行平均划分，使他们的高宽相等可以，然后设置text-align进行右对齐即可（注意：子 ...
分类：
其他好文 时间：
2020-06-09 20:10:46
阅读次数：
168
html: <div class="box"> <div class="first">85.719</div> <div class="second">214.281</div> </div> css: .box{ width: 300px; display: flex; } .first{ bac ...
分类：
其他好文 时间：
2020-06-09 14:50:39
阅读次数：
60
by Chris House 译者：若愚老师想要更好的阅读体验可在饥人谷技术博客 查看原文 CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网 ...
分类：
Web程序 时间：
2020-06-09 12:33:21
阅读次数：
67
下文内容摘自：https://blog.csdn.net/mazhili1991/article/details/104476445/ 在IE10浏览器中，使用flex布局的常用兼容性代码： /*display*/ .display_flex{ display: -webkit-box; displ ...
分类：
其他好文 时间：
2020-06-08 14:47:53
阅读次数：
340
边距重叠 统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况： 首先把所有的margin格式清空 <head> <title>边距重叠</title> <style> html *{ margin-top: 0px; padding: 0px; } </styl ...
分类：
其他好文 时间：
2020-06-07 12:56:38
阅读次数：
73
