一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">,视窗宽度=设备宽度,默认缩放=1,不允许用户缩放。 二,flexbox,弹性盒子模型: ...
分类:
其他好文 时间:
2016-04-01 20:31:12
阅读次数:
446
× 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本、混合版本和新版本。如果要保证flex弹性盒模型在各个主流浏览器上表现一致,就必须掌握这3个版本的不同用法。深入理解C ...
分类:
Web程序 时间:
2016-03-30 06:59:15
阅读次数:
238
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写,一般称之为弹性盒模型。和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3 ...
分类:
Web程序 时间:
2016-03-29 14:26:08
阅读次数:
258
<div class="father"> <div class="son0"></div> <div class="son2"></div> <div class="son3"></div> </div> 以上面的div结构为例:使用css3中的box的一些属性可以改变框内子元素的宽 高自适应,还可
分类:
Web程序 时间:
2016-03-07 13:32:02
阅读次数:
146
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。尽管目前css3在PC端上的兼容性还不是那么...
分类:
Web程序 时间:
2016-01-18 10:32:11
阅读次数:
188
1px dashed虚线box-sizing拯救了布局1、inherit 继承父级2、content-box(默认)-----这个盒子的边框、内边距 这2个值是不包括在width和height中,所以外扩3、border-box---- 这个盒子的边框、内边距 这2个值是包括在width和heigh...
分类:
Web程序 时间:
2016-01-08 18:44:53
阅读次数:
277
1、yzd项目结束时,页面布局系统学习css3的新盒模型——弹性盒模型:http://edu.cnzz.cn/201011/52573859.shtmlCSS3页面布局方案:http://www.cnblogs.com/tugenhua0707/p/4306311.html尖刀出鞘的display常...
分类:
其他好文 时间:
2015-12-20 22:19:52
阅读次数:
211
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局。同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间。自己写了一个弹性盒子的demo:主要HTML代码: 1 2 3 4CSS代码:在不用 webkit-box-align:cen...
分类:
Web程序 时间:
2015-12-18 22:50:48
阅读次数:
5147