FLEX | 易学教程

项目实战中的布局技巧，垂直居中

阅读更多关于项目实战中的布局技巧，垂直居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .flex__container { display: flex; background-color: blanchedalmond; border: 1px solid black; width: 500px; height: 500px; justify-content: center; align-items: center; } .flex__item { background-color: cadetblue; border: 1px solid black; width: 300px; height: 300px; } .flex__container1 { display: inline-flex; background-color: blanchedalmond; border: 1px solid black; width: 500px; height: 500px; justify-content: center; align

CSS背景图片的6个有趣的技巧

阅读更多关于 CSS背景图片的6个有趣的技巧

背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的，但是。。。。。。 1.如何将背景图像完美地适合视口 body { background-image : url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80') ; background-repeat : no-repeat ; background-position : center ; background-attachment : fixed ; background-size : cover ; -webkit-background-size : cover ; -moz-background-size : cover ; -o-background-size : cover ; } background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 2.如何在CSS中使用多个背景图片 body { background-image : url(https://image.flaticon.com/icons

Scratch3.0开发记录（二）添加登录功能之创建窗口

阅读更多关于 Scratch3.0开发记录（二）添加登录功能之创建窗口

本文是Scratch3.0二次开发添加登录功能部分——添加点击登录按钮弹窗功能，下一篇会介绍添加接口部分以及登录接口怎么写。 0. 写在前面借鉴：http://www.liyblog.top/ 感谢！希望能一直更新。因为我对react本身不如vue那么熟悉，而且今日来感觉react比vue要繁琐很多，相关资料和帖子也远不如vue多，所以走了些弯路，如今总结一下，过程中可能不是很规范正确，产生一些问题，希望各位评论指出来，当然如果有更好的办法和帖子麻烦也在评论添加地址，我也去学习一下，总之希望能一起学习成长。我的邮箱：yh709459462@163.com。 1. 基本文件结构因为是借鉴上边大佬的博客http://www.liyblog.top/p/22，我暂时时间比较紧不做赘述，以后再完善。所以各位有需要的先去按照他的教程，一步步往下走，大致是一样的，但是因为我和另一个人按教程走完后并不能成功，所以我做了一些改动。整个博文内容较多，有点格式问题请谅解按照上边的教程，走的差不多了之后，跟着我往下走。我的顺序可能是纯粹的改动，不会根据react运行流程去一个文件跳一个文件的改，这样更快，看上面的博文就能理解了文件跳转了。改动主要如下：（1）componets/login-modals目录以及里面的 login-modals.jsx更改名字为login。其他文件不用动。

最强云硬盘来了，让AI模型迭代从1周缩短到1天

阅读更多关于最强云硬盘来了，让AI模型迭代从1周缩短到1天

摘要：华为云擎天架构+ Flash-Native存储引擎+低时延CurreNET，数据存储和处理还有啥担心的？虽然我们已经进入大数据时代，但多数企业数据利用率只有10%，数据的价值没有得到充分释放。面对海量数据爆炸式的增长和发掘数据内在价值的巨大需求，拥有弹性伸缩、无限扩展能力的云存储正发展成为时代的智能数据底座。另一方面，随着人工智能（AI）、VR/AR、5G、自动驾驶等技术的发展，应用对云存储的实时处理能力提出了更高标准。对于支撑智能世界的数据平台而言，需要进入百微秒量级，才能满足实时性要求。最近，华为云发布了新款极速型SSD云硬盘，可以充分满足AI、AR/VR、数据库、大数据、HPC等高性能低时延业务场景需求。通过对架构和算法的创新，华为云打造了拥有四大硬核技术的华为云All-Flash智能数据底座，从容应对云、AI、5G时代数据存储的挑战。 All-Flash智能数据底座：100%存储卸载能力华为云All-Flash智能数据底座首先，基于华为云擎天架构，华为云实现了100%的存储卸载能力和零损耗的存储虚拟化。基于RDMA的高速存储网络，能充分发挥NVME 存储集群的性能，搭配租户级QoS能力，可以为用户提供极速和稳定的云存储底座。新一代的Flash-Native存储引擎，采用了Append的数据布局、智能全局FTL、支持全局磨损均衡

element ui实现手动上传文件，且只能上传单个文件，并能覆盖上传。

阅读更多关于 element ui实现手动上传文件，且只能上传单个文件，并能覆盖上传。

　　element ui提供了成熟的组件场景，但实际工作中难免会遇到认（sha）真（diao）的产品。比如，最近遇到的，要求实现手动上传特定格式文件（用户点击“上传文件”按钮，确定之后，只是单纯选择了文件，点击页面上的“提交”按钮才上传），并展示用户选择的文件名称，且只能选择一个文件，如果用户选择第2，3，4...等文件，要求后者覆盖前者，即用户看到的总是最新选择的文件。　　OK，需求合理，但是，查了查API，呃。。。貌似不太好完美实现。　　查源码，改样式。完美奉上解决方案。一，实际应用场景实现手动上传特定格式的文件，展示所选文件名称，且能实现覆盖上传。二，分析 1，解决手动上传问题官网API（ https://element.eleme.cn/#/zh-CN/component/upload ），给出“手动上传”，只需要在Upload组件添加属性 :auto-upload= "false" ，然后调用 this.$refs.upload.submit(); 方法即可。 2，解决特定格式文件问题这块，也有例子，对于本项目，要求添加csv格式，所以，Upload组件添加属性 accept=".csv" 3，最麻烦的是上传限制问题首先想到官网API里的 limit属性， Upload组件添加属性 :limit= "1"，但是这样

简单搭建 @vue-cli3.0 及常用sass使用

阅读更多关于简单搭建 @vue-cli3.0 及常用sass使用

1,在安装了Node.js后使用其中自带的包管理工具npm。或者使用淘宝镜像cnpm（这里不做说明） 1-1，下载vue3.0脚手架（如果之前装vue-cli3x之前的版本，先卸载 npm uninstall vue-cli -g） npm install -g @vue/cli 1-2，下载sass npm install node-sass --save-dev npm install sass-loader --save-dev 1-3，使用vue命令创建my-project项目 vue create my-project（vue init webpack my-project） 1-4，进入项目 cd my-project 1-5，启动项目 npm run serve启动项目 2，目录图片如下在组件componets下新建组件（可以建个文件夹放一个系列组件，便于项目管理） 2-1，在路由中引入组件（没有安装router记得install下，判断方法：可以在package.json文件下 dependencies是否含有vue-router，没有的话执行 npm install vue-router -S；或者直接在依赖写 "vue-router": "^3.0.6" 然后npm install），使用：在路由文件中实例化配置路由后暴露出去 export default

css3弹性伸缩布局(一)—————flex布局

阅读更多关于 css3弹性伸缩布局(一)—————flex布局

CSS3弹性伸缩布局简介 2009年，W3C提出了一种崭新的方案—- Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布局，所以本次主要讲解一下旧版本和新版本在移动端使用的各个知识点，让大家对神秘的flex布局熟悉起来。网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 .box { display : flex ; } 行内元素也可以使用 Flex 布局。 .box {

jquery实现下拉加载更多

阅读更多关于 jquery实现下拉加载更多

下拉加载更多这种原理很容易想明白，但是不自己写一个简单的，老是不踏实，获取什么高度再哪里获取之类的。于是自己简单写了个，就是页面上有几个div，然后当滚动条拉到某个位置的时候，再继续加载div。顺便又查了下各种高度宽度，给body加边框去边框看了下具体差异，不过一个边框的差异，只要滚动条拉到的某个位置距离底部距离大于边框的高度都不会影响加载更多的效果。代码如下： 1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset ="utf-8" > 5 < title > 滚动加载更多 </ title > 6 < style type ="text/css" > 7 body,div { 8 margin : 0 ; 9 padding : 0 ; 10 } 11 body { 12 width : 100% ; 13 background-color : #ccc ; 14 display : flex ; 15 flex-wrap : wrap ; 16 justify-content : space-around ; 17 border : 1px solid gold ; 18 } 19 .load_div { 20 width : 400px ; 21 height : 300px ; 22 border : 1px

Flex弹性布局教程-语法篇

阅读更多关于 Flex弹性布局教程-语法篇

常用flex属性速查表弹性盒子设置弹性盒子： display: flex; 将元素设置为弹性盒容器 display: inline-flex; 将元素设置为弹性盒容器注意：设置为flex布局之后，子元素的float、clear、vertical-align属性都会失效基本概念：容器项目主轴：默认水平方向，向右主轴的起点主轴的终点交叉轴：默认垂直方向，向下交叉轴的起点交叉轴的终点容器属性——添加弹性容器上 flex-direction属性：设置主轴的方向 flex-direction: row; /*默认值，设置主轴方向为水平方向，起点在左侧*/ flex-direction: row-reverse; /*设置主轴方向为水平方向，起点在右侧*/ flex-direction: column; /*设置主轴方向为垂直方向，起点在上方*/ flex-direction: column-reverse; /*设置主轴方向为垂直方向，起点在下方*/ justify-content属性：设置弹性子元素在主轴上的对齐方式 justify-content: flex-start; /*默认值，子元素位于弹性盒的开头*/ justify-content: flex-end; /*子元素位于弹性盒的结尾*/ justify-content: center; /

移动端疑难特性、兼容性

阅读更多关于移动端疑难特性、兼容性

safari浏览器字体不能自动随网页缩放调整大小 -webkit-text-size-adjust:100% 点击<button><input>有灰色透明背景 -webkit-tap-highlight-color:rgba(0,0,0,0); 微信、QQ内置浏览器视频自动全屏非腾讯域名的视频地址都会 iphoneX默认网页显示在安全区域内，不全屏 <meta name="viewport" content="viewport-fit=cover"> flex布局不兼容，加上前缀也不行（常见于华为或旧版iOS） display: -webkit-box; display: box; display: -webkit-flex; display: flex; 须声明box和flex两种。 Android设置line-height有偏移不垂直居中原因：1. 字体不是偶数 2. 用rem单位解决方案： 1. 字体变大 2. 增加父元素，设置diaplay: table-cell; vertical-align: middle 3. 元素放大两倍，再缩小 4. line-height: 1; 用padding-top撑起父元素。 5. 用px单位 6. 用图片去显示 iOS默认不可点击元素点击事件失效当委托给一个元素添加click事件时，如果事件是委托到 document 或

订阅 FLEX