FLEX | 易学教程

弹性布局总结

阅读更多关于弹性布局总结

弹性布局对于移动端页面开发其实还是蛮重要的，今天来一些总结吧 Flexbox 为 display 属性赋予了一个新的值（即 box 值）, flexbox的属性有很多，记录一些比较常用的属性：用于父元素的样式： display : box ; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代） box-orient: horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的。 box-pack: start | end | center | justify; 设置沿 box-orient 轴的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，则父元素的子元素是水平的排列方式，反之亦然。（表示父容器里面子容器的水平对齐方式--垂直排列时--定宽） box-align: start | end | center | baseline | stretch; 基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。（表示父容器里面子容器的垂直对齐方式--水平排列时--定高）用于子元素的样式： box－flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。其中 box

微信小程序分享之生成海报--canvas

阅读更多关于微信小程序分享之生成海报--canvas

首先看文档了解知识点~~（ https://developers.weixin.qq.com/miniprogram/dev/component/ ） githup： https://github.com/ad-skylar/wxProjece_canvas 一.画布。 1.wxml 创建canvas canvas-id canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 < canvas style ="width: 375px;height: 667px;position:fixed;" canvas-id ="mycanvas" /> 2.js 调用wx.createCanvasContext var context = wx.createCanvasContext('mycanvas'); 3.绘制一个矩形作为背景，填充白色 CanvasContext.fillRect(x, y, width,height)；参数依次是矩形x坐标、y坐标、图片宽、高填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。 4.绘制图像到画布 CanvasContext.drawImage(src, x, y,width,height) 参数依次是图片地址、x坐标、y坐标、图片宽、高 5.绘制文字到画布 CanvasContext

vue中引入mintui、vux重构简单的APP项目

阅读更多关于 vue中引入mintui、vux重构简单的APP项目

　　最近在学习vue时也了解到一些常用的UI组件，有用于PC的和用于移动端的。用于PC的有：Element(饿了么)、iView等；用于移动端APP的有Vux、Mint UI(饿了么)、Vant(有赞团队)、cube-ui(滴滴)。　　想做一个移动端微信公众号使用的界面，于是选择用mintUI。　　mintUI官网： http://mint-ui.github.io/docs/#/en2/quickstart 1.项目中引入mint-ui 1.下载以及配置 (1)下载： E:\HBuilderSpace\vue-demo>cnpm install --save mint-ui (2)引入：可以按需引入，也可以全部引入全部引入的方式： main.js: import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.config.productionTip = false; Vue.use(MintUI) new Vue({ router, store, render: h => h(App),

弹性布局

阅读更多关于弹性布局

给其父元素添加属性，display：flex； justify-content ： space-between ；其中的 space-between 作用是两端对齐（自己最常用弹性布局的属性），子元素属性设置为flex： flex-grow flex-shrink flex-basis 这是简写，也可以单独分离开设置。其中的flex-grow为扩张率、flex-shrink为子元素收缩率、flex-basris是子元素的收缩基准率，在平常的开发中自己用到的不多 flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写不熟练的时候，分开设置，便于记忆， flex-direction 定义子元素的排列方向，有4个属性值：row，子元素左对齐，也就是沿着x轴左到右排列 row-reverse 与row相反 column，子元素，从上往下（顶对齐） column-reverse ，与 column相反 flex-wrap 控制flex容器单行显示还是多行显示。有3个属性值， nowrap | wrap | wrap-reverse nowrap flex容器为单行，在这种情况下，有可能会溢出， wrap flex容器为多行，溢出的部分会放置在第二行， wrap-reverse wrap 反转排列。 align-content ：flex

css如何让子元素在父元素中水平垂直居中

阅读更多关于 css如何让子元素在父元素中水平垂直居中

方法一： display:flex <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css_com/reset.css"> <style> .parents{ /*添加部分*/ display: flex; align-items: center; justify-content: center; margin:0 auto; width: 600px; height: 600px; background-color: #4eff5e; } .son{ width: 300px; height: 300px; background-color: #ff4236; } </style> </head> <body> <div class="parents"> <div class="son"></div> </div> </body> </html> 方法二：display:table-cel <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet"

CSS八种让人眼前一亮的HOVER效果

阅读更多关于 CSS八种让人眼前一亮的HOVER效果

　　一.发送效果　　HTML 　　// 这里是一个svg的占位　　Send 　　复制代码　　CSS 　　#send-btn{ 　　display: flex; 　　align-items: center; 　　justify-content: center; 　　height: 100vh; 　　} 　　button { 　　background: #5f55af; 　　border: 0; 　　border-radius: 5px; 　　padding: 10px 30px 10px 20px; 　　color: white; 　　text-transform: uppercase; 　　font-weight: bold; 　　} 　　button svg { 　　display: inline-block; 　　vertical-align: middle; 　　padding-right: 5px; 　　} 　　button:hover svg { 　　animation: fly 2s ease 1; 　　} 　　@keyframes fly { 　　0% { 　　transform: translateX(0%); 　　} 　　50% { 　　transform: translateX(300%); 　　} 　　100% { 　　transform:

写CSS的常用套路·续

阅读更多关于写CSS的常用套路·续

3D 方块如何在 CSS 中创建立体的方块呢？用以下的 SCSS mixin 即可方块的长度、高度、深度都可以通过 CSS 变量自由调节 @mixin cube($width, $height, $depth) { &__front { @include cube-front($width, $height, $depth); } &__back { @include cube-back($width, $height, $depth); } &__right { @include cube-right($width, $height, $depth); } &__left { @include cube-left($width, $height, $depth); } &__top { @include cube-top($width, $height, $depth); } &__bottom { @include cube-bottom($width, $height, $depth); } .face { position: absolute; } } @mixin cube-front($width, $height, $depth) { width: var($width); height: var($height); transform-origin:

日志系统新贵Loki，确实比笨重的ELK轻

阅读更多关于日志系统新贵Loki，确实比笨重的ELK轻

点击上方蓝字把我设为星标吧！作者：inkt1234 来源：https://blog.csdn.net/Linkthaha/article/details/100575278 阿面和你一起读：作为程序员，在技术更新迭代很快的情况下，我们一般的处理都是学它，日志系统又是必不可少的，文本介绍日志系统Loki，大家可以看看是不是多了一种选择呢~ 正文目录：背景和动机 ELK存在的问题成本整体架构读写可扩展性最近，在对公司容器云的日志方案进行设计的时候，发现主流的ELK或者EFK比较重，再加上现阶段对于ES复杂的搜索功能很多都用不上最终选择了Grafana开源的Loki日志系统，下面介绍下Loki的背景。背景和动机当我们的容器云运行的应用或者某个节点出现问题了，解决思路应该如下：我们的监控使用的是基于prometheus体系进行改造的，prometheus中比较重要的是metric和alert,metric是来说明当前或者历史达到了某个值，alert设置metric达到某个特定的基数触发了告警，但是这些信息明显是不够的。我们都知道，k8s的基本单位是pod,pod把日志输出到stdout和stderr,平时有什么问题我们通常在界面或者通过命令查看相关的日志,举个例子：当我们的某个pod的内存变得很大，触发了我们的alert，这个时候管理员

移动端移动布局

阅读更多关于移动端移动布局

移动布局 1.移动设备有手机和ipad 安卓系统 ios系统安卓系统的内置浏览器是谷歌 ios内置 safari浏览器他们的内核都是web，不考虑兼容性，需要考虑的问题是安卓和ios的区别？ 2.布局(写页面) 要考虑以下几点设置的宽度设备的实际大小（设备的分辨率）厂家给的页面的大小设计稿上的大小浏览器的视口（大小）浏览器自带的可以通过用 document.documentElement.clientWidth 查看，在移动设备上如果不做视口处理默认是 980 例子：设备宽是320 页面宽是1200 浏览器视口是980px，三者不统一，我们用移动设备看页面，浏览器视口会自动缩放，以100%完整的展示页面，就会变得不清楚，特别挤。第一我们需要把这个三个变得统一 1.移动设备宽(320) 要和浏览器视口宽一致在head之间加一个meta标签 name=‘viewport’ <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 设备宽度和浏览器视口一致时，如果页面大于这个数字，就会出现滚动条 2.当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过的部分会被截掉

vue中修改子组件(或第三方组件库)样式

阅读更多关于 vue中修改子组件(或第三方组件库)样式

一、问题叙述　　项目里需要新添加一个表单页面，里面就只是几个select,这个几个select是原本封装好的组件，有自己原本的样式，而这次的原型图却没有和之前的样式统一起来，需要微调一下，这里就涉及到父组件修改子组件的样式。不想混用本地和全局样式，所以选择了>>>，但是并不起作用，就换成/deep/，其实到这里我也没有继续深入这个知识点，因为在浏览器里预览后已经实现了原型图的样式，直到打包在手机上测试，发现问题，在手机上浏览并没有将样式修改过来。如下图：问题：①为什么使用>>>不起作用？②为什么我使用了/deep/却没有成功的在手机上将样式修改过来？二、相关知识点　　㈠关于vue中使用scoped属性在vue组件中，在style标签中添加scoped属性，这样在这里定义的css只作用于当前组件中的元素，可使组件之间的样式不会相互污染，使样式私有化。比如在父组件内使用子组件，父组件的样式不会渗透到子组件中。　　Ⅰ、在加上scoped后，会为DOM节点自动添加一个唯一的属性（data-v-f3f3eg9后面这串数字像是独一无二的hash值），以保证其唯一性。同时在相应的css选择器末尾，也加上了当前组件的data-v-f3f3eg9属性，来使其私有化。如Vue Loader中所给出的代码示例： < template > < div class ="example" >

订阅 FLEX