第二十九章 CSS3弹性伸缩布局【上】 一、布局简介 Flexbox布局，即弹性伸缩布局模型（Flexible Box）,他能更有效的实现布局，但这个布局还处于W3C的草案阶段，并且分旧版本，新版本，混合过渡阶段三种不同的编码。 IE Firefox Chrome Opera Safari 支持需带 ...
分类：
Web程序 时间：
2018-02-28 19:46:41
阅读次数：
246
第二十九章 CSS3弹性伸缩布局【中】 一、混合过滤板（主要针对IE10浏览器伸缩布局效果） 首先，设置伸缩盒的display有如下两个属性值 （1）flexbox 将容器盒模型作为块级弹性伸缩盒显示（混合版本） （2）inline-flexbox 将容器盒模型作为内联级弹性伸缩盒显示（混合版本） ...
分类：
Web程序 时间：
2018-02-28 19:43:35
阅读次数：
245
Flexbox Flexbox（伸缩布局盒）是css3中的一个新的布局模式，其主要思想是给容器控制项目的宽度、高度的能力，使flex项目可以自动充满容器的可用空间。 Flexbox由伸缩容器和伸缩项目组成。一个设有「display:flex」或「display:inline-flex」的元素是一个伸 ...
分类：
其他好文 时间：
2018-02-25 20:33:44
阅读次数：
218
十一、伸缩布局:控制元素对齐方式主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过flex-direction可以互换。1、必要元素：a、指定一个盒子为伸缩盒子display:flex（父元素）b、设置属性来调整此盒的子元素的布局方式例如flex-directionc
分类：
Web程序 时间：
2018-01-29 16:05:01
阅读次数：
236
一、关于布局方案 当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更 ...
分类：
移动开发 时间：
2017-12-31 00:38:33
阅读次数：
298
基本概念 1、父盒子设置了伸缩属性，子盒子设置伸缩比例 2、以上设置完之后子盒子会按照比例分布在父盒子中 3、当设置伸缩比例时默认会按照x轴方向分配，因为默认情况下伸缩布局主轴方向是x轴方向 案例描述 1、父盒子设置了伸缩布局，子盒子设置了比例 2、上述设置完之后，子盒子无需设置宽高，会自动填满 3 ...
分类：
Web程序 时间：
2017-12-22 13:30:40
阅读次数：
142
根据阿里手淘团队发布的可伸缩布局方案amfe-flexible，git地址：https://github.com/amfe/lib-flexible。 使用方法： lib-flexible库的使用方法非常的简单，只需要在Web页面的<head></head>中添加对应的flexible_css.js ...
分类：
移动开发 时间：
2017-12-20 14:52:48
阅读次数：
238
一、Flex布局 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 行内元素也可以使用Flex布局。 Webkit内核的浏览器，必须加上-webkit前缀。 注意：设为Flex布局以后，子元素的float、clear ...
分类：
Web程序 时间：
2017-12-03 22:52:58
阅读次数：
288
一、弹性盒模型（伸缩布局） flxible box 前言： 弹性布局，用来为盒子提供灵活性。就像是当把浏览器缩小的的时候，不会像float属性会依然往下掉，灵活性不好。而且当布局盒装模型的时候依赖于float+position+display，例如实现垂直居中就很不方便了。 一）语法 是不是感觉很熟 ...
分类：
其他好文 时间：
2017-08-26 12:51:23
阅读次数：
214
WEB字体 语法 @font-face{ font-family:""; src:url() format() .... } 兼容性写法 @font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9+ */ src: url ...
分类：
Web程序 时间：
2017-08-08 23:00:35
阅读次数：
275
