布局方面尝试使用了CSS3的弹性盒子，但是万万没想到先进的X5内核居然仅支持 display: -webkit-box; 所以这里需要多写一套兼容的样式。动态效果本来想用 transition 凑合一下，看了效果还是过不了自己这关，最后还是换成 animation 实现。transition的问题是 ...
分类：
其他好文 时间：
2016-07-30 19:46:21
阅读次数：
138
一、基础 一、基础 在css中，大多数标签都是默认属性，需要对其进行初始化，比如＊｛padding:0;margin:0;｝在移动端布局时要采用响应式，响应式布局通常有两种方法，一是通过百分比控制，二十使用使用弹性盒子（flex）一、写法，分组和嵌套对于有相同属性的元素，可以使用分组的形式h1{co ...
分类：
Web程序 时间：
2016-07-19 13:23:47
阅读次数：
236
所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有的布局方案，本质上都是尺寸与定位的结合。
大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。...
分类：
Web程序 时间：
2016-07-08 11:53:59
阅读次数：
312
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间 实例: 分析: flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。 本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空 ...
分类：
Web程序 时间：
2016-07-08 01:25:55
阅读次数：
151
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 实例: 解析: flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。 本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3 flex容器的剩余空间 ...
分类：
Web程序 时间：
2016-07-08 01:24:23
阅读次数：
183
设置或检索弹性盒伸缩基准值: 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间 计算值 – 绝对数:在flex-container主方向大小不足以容纳flex items的flex-basis总和时，浏览器会自动缩小它们 实例: <!DOCTYPE html> < ...
分类：
Web程序 时间：
2016-07-07 23:53:29
阅读次数：
353
说明： 本属性适用于：多行的弹性盒模型容器 当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果 实例: ...
分类：
Web程序 时间：
2016-07-07 22:32:24
阅读次数：
170
align-items align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式,还有一位回答者的回答也很好，如下: align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中 alig ...
分类：
Web程序 时间：
2016-07-07 22:23:44
阅读次数：
232
说明： 本属性适用于：flex容器 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式 实例: ...
分类：
Web程序 时间：
2016-07-07 22:21:43
阅读次数：
957
box-flex属性（和谐版） 有道桌面词典显示，”flex”一词中文有“收缩”之意。不过，从此属性实际上产生的效果来看，无论怎样用“收缩”一词解释都显得很牵强。所以，这里，直接抛开字面意思，我们可以将”box-flex”理解为”房子-分配”。box为“盒子”的意思，我们可以理解为当下价格巨高的“房 ...
分类：
Web程序 时间：
2016-07-02 20:06:25
阅读次数：
319
