1.指定文本前后添加内容 2. 实现一个书签标记logo 3.文字前后自动加上引号 4.自定义样式实现checkbox 5. 简单实现一个聊天气泡 6. 相片堆叠 参考链接 "掘金:CSS伪元素:before和:after介绍" ...
分类：
Web程序 时间：
2020-01-22 23:51:13
阅读次数：
179
如图可见flex的属性分为父容器和子容器的属性共12个。关于这些属性具体代表什么意思，网上有很多教程的文章，自觉不能写得比别人更好，所以这里主要写了一些例子关于父容器属性效果的演示，希望可以帮助大家理解。后续还会有关于子容器演示的地址更新。flex布局父容器属性部门效果演示地址 如图可见flex的属 ...
分类：
其他好文 时间：
2020-01-21 19:56:30
阅读次数：
68
html中 <div class="flexLayoutr"> <div class="div_head"></div> <div class="div_content">中间区域</div> <div class="div_foot"></div> </div> css中 *{ margin: 0 ...
分类：
移动开发 时间：
2020-01-21 16:13:07
阅读次数：
185
双飞翼布局，就是两端固定宽高，中间自适应的三栏布局 先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 方式一：通过flex弹性布局来实现 看代码 //HTML结构，div2是中间的自适应区域 ... <body> <div class="wrap"> <div class="di ...
分类：
Web程序 时间：
2020-01-20 14:45:21
阅读次数：
89
CSS由于缺少命名空间，所有的class都是全局的，所以大团队项目如果没有良好的命名规范，会容易失控。 举例实现以下效果： 通过 class + tag .pageButtons { display: flex; justify-content: center; } .pageButtons but ...
分类：
Web程序 时间：
2020-01-20 00:16:09
阅读次数：
98
版本1草稿: XsInfo.htmll文档: <!doctype html> <html> <head> <meta charset="utf-8"> <title>选手信息</title> <link rel="stylesheet" type="text/css" href="Blue/css/ ...
分类：
其他好文 时间：
2020-01-19 19:03:25
阅读次数：
86
开始 最近研究一个框架，刚好里面也实现了flex布局的算法，虽然平时也用到flex做一些简单的布局，但是深入到算法实现的时候，发现自己对flex某些概念倒是没那么清晰，立马谷歌把几个flex涉及的属性都好好理清一下，权当一个自我梳理。 main-axis和cross-axis main其实跟flex ...
分类：
其他好文 时间：
2020-01-18 00:46:27
阅读次数：
84
css flex弹性布局学习总结 一、简要介绍 flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。 主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其中在webkit内核的浏览器中使用时，必须加上-webki ...
分类：
Web程序 时间：
2020-01-17 21:07:57
阅读次数：
88
对于微信App, 导航用的是非常多的，几乎每个页面都需要，我们先将它简单地封装以下。 1. free-icon组件， 用来定义每个icon图标 <template> <view :style="getSize" class="flex justify-center align-center"> <t ...
分类：
其他好文 时间：
2020-01-17 19:09:40
阅读次数：
90
上一次,我们已经了解过flex-grow的具体用法后,这周,让我们一起来见一下flex-basis这个属性. flex-shrink 定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下，项目缩小。值为0,不缩小。 下面的例子中没有定义该属性，但是满足容器中空间不足的情况,项目会默认缩小。 当 ...
分类：
其他好文 时间：
2020-01-16 18:53:18
阅读次数：
67
