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
1 弹性布局简介 弹性布局，又称“Flex布局”，是由W3C在2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >>> 了解两个基本概念，接下来会频繁提到： ① 容器： 需要添加弹性布局的父元素； ② 项目： 弹性布局 ...
分类：
其他好文 时间：
2020-01-16 18:45:37
阅读次数：
160
垂直居中，在CSS中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊9种不同的居中方法。有常见的flex、transform、absolute等等。也有CSS3的网格布局。还有伪元素的方法，是的，你没有看错，::after和::before也可以实现居中。1、flex大家的第一反应，可能就是flex了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。<
分类：
Web程序 时间：
2020-01-16 01:00:21
阅读次数：
110
说明 问题： 一个div宽度不固定，高度固定，采用Flex布局，它里面有两个元素一个img宽度占40%，高度占100%，一个p元素，宽度占60%，高度占100%，调整浏览器窗口大小，要保证，img元素不变形，宽高比不变，怎么办！ 从图中可以看出，随着调整浏览器窗口，图片的宽高比也被破坏了，我们该怎么 ...
分类：
Web程序 时间：
2020-01-15 19:33:18
阅读次数：
76
css: 1 body{ 2 padding: 0 10%; 3 } 4 ul,li{ 5 margin: 0; 6 padding: 0; 7 list-style: none; 8 } 9 .flex-box{ 10 display: flex; 11 border: 1px solid; 12 ...
分类：
Web程序 时间：
2020-01-15 19:11:53
阅读次数：
97
