前言 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
一、flex布局 顶部，底部固定，中间自适应(中间左固定，右自适应)。 <body> <div class="container"> <div class="header"></div> <div class="content"> <div class="left"></div> <div clas ...
分类：
Web程序 时间：
2020-06-07 10:59:54
阅读次数：
64
在 这里 display:flex 需要兼容性处理，webpack 编译打包时，需要使用 postcss-loader 这个loader 和 postcss-preset-env 这个插件，它帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼 ...
分类：
Web程序 时间：
2020-06-05 10:21:41
阅读次数：
83
在flex容器中默认存在两条轴，水平主轴和垂直的交叉轴，这是默认设置，当然可以通过修改相关属性使垂直方向变为主轴，水平方向变为交叉轴，在容器中，每个单元块称为flex item，每个flex item占据主轴空间为main size，占据交叉轴空间为cross size。 Flex容器 首先实现fl ...
分类：
Web程序 时间：
2020-06-05 01:09:43
阅读次数：
86
