原文地址：http://www.cnblogs.com/tugenhua0707/p/5180841.html#3809570 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 移动开发基 ...
分类：
移动开发 时间：
2017-10-17 18:51:55
阅读次数：
226
布局的传统方案，基于盒装模型，依赖display属性+position属性+float属性。他对于那些特殊的布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在 ...
分类：
其他好文 时间：
2017-10-16 00:17:17
阅读次数：
192
思想:通过给父容器设置属性(display:flex || inline-flex),让父容器有能力来改变子元素的宽度或者高度,以填满可用空间,(可自适应不同尺寸设备,故多用于移动端布局) 弹性盒模型布局在改变子元素排列方向,缩放,拉伸,收缩等方面,较传统布局方式有优势. ps:1.css3 列在弹 ...
分类：
其他好文 时间：
2017-10-14 16:57:11
阅读次数：
120
一、什么是flex? flex是css3中引入的一种布局方式，可以非常灵活高效控制元素的排列与对齐方式，大多数人称之为弹性布局. 二、怎么使用flex? 任何一个容器都可以指定为flex布局 三、flex的基本术语 采用flex布局的元素被称为flex容器 (flex container), 它的子 ...
分类：
Web程序 时间：
2017-10-11 21:55:17
阅读次数：
218
标准盒子： 一个块的总宽度 = width + margin(左右) + padding（左右） + border（左右） 怪异盒子： 一个块的总宽度 = width + margin(左右) ——width已经包含border和padding值 定义怪异盒子： box-sizing: border ...
分类：
其他好文 时间：
2017-09-19 15:29:26
阅读次数：
120
今天写了一个携程界面的UI，利用H5的弹性盒子来实现，学过H5弹性盒子的，来看是比较方便的，因为CSS代码都差不多。 可以看看这篇博客 快速使用CSS 弹性盒子 效果图如下： 主要是携程首页的四个模块； 代码： CSS代码 一个简单的小案例，界面练习，和H5的弹性盒子相同。 源码点击下载 ...
分类：
微信 时间：
2017-09-16 11:51:04
阅读次数：
321
这期给大家介绍下移动端布局。平时写，有的用百分比，有的用rem来做，但无论哪种，都需要了解flex弹性盒子布局，进入正题： Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 先举个易于理解并实用的例子： 比如说这张图片，是一个商品的列表页，一行有三个。那么 ...
分类：
移动开发 时间：
2017-09-05 12:34:58
阅读次数：
182
Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。 使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子 ...
分类：
其他好文 时间：
2017-09-03 14:16:54
阅读次数：
120
