允许全屏模式浏览,隐藏浏览器导航栏-->
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0;border: 0;}
ol,li,ul,dl,dt,dd{list-style:none;}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}
img {vertical-align: middle;border: none;width: 100%;}
i {font: inherit;}
a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:transparent;}
a:hover {text-decoration: underline; outline: none;}
select::-ms-expand { display: none; }
a:active,a:hover{outline:0}
.clearfix::before,
.clearfix::after{
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.fl{ float:left;}
.fr{float:right;}
input,select,option{vertical-align:middle;border-radius:0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}
input[type="text"],input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}
.overflow {overflow:hidden; }
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0}
ol,li,ul,dl,dt,dd{list-style:none;}
.fl {float: left;}
.fr {float: right;}
table{border-collapse:collapse;border-spacing:0}
html {text-decoration: none; outline: none;
}.overflow {overflow:hidden; }
.w50{}
html设置初始font-size:320px的字体大小
var html = document.getElementsByTagName('html')[0];
if(html){
var w = window.innerWidth;
var fontSize = (w>640?640:w)/640 *30; 这里最少30,
html.style.fontSize = fontSize + 'px';
}
window.onload = function(){
window.onresize = function(){
var w = window.innerWidth;
console.log(w);
var fontSize = (w>640?640:w)/640 * 30;这里最少30,
html.style.fontSize = fontSize + 'px';
}
}
html设置初始font-size:320px的字体大小
(function(doc, win) {
var docEl = doc.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize';
var recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth)
return;
docEl.style.fontSize = (clientWidth>640?640:clientWidth)/ 320 *20 + 'px';
};
// 不同浏览器resize事件处理机制不同
// 使用定时器延迟处理resize回调函数以降低重复响应
var recalcTimer = null;
var delaycalc = function() {
win.clearTimeout(recalcTimer);
recalcTimer = win.setTimeout(recalc, 100);
};
// 移动端不需要考虑事件注册函数的兼容性
if (!doc.addEventListener)
return;
win.addEventListener(resizeEvt, delaycalc, false);
// DOMContentLoaded事件只在DOM文档树加载完毕触发,此处不用延迟处理
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
新旧版本兼容:这里设置flex容器为.box,子元素为.item
.box{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: -webkit-box;
display: -moz-box;
}
新版:display:flex
水平方向:
.box{
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
.box{
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
}
旧版:box-direction: normal 水平方向 | reverse 垂直方向 | inherit ,跟子元素的方向一致; 定义子元素的显示方向。
box-orient: horizontal 水平排列| vertical 垂直排列| inline-axis 默认 | block-axis 快方式排列 | inherit继承父元素; 定义子元素是否应水平或垂直排列。
这两种要同时设置才能确定排列方式;
水平方向:box-direction: normal;box-orient: horizontal
垂直方向:box-direction: normal; box-orient:vertical
新版:flex-direction:row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。column-reverse:主轴为垂直方向,起点在下沿。
.box{
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: center;
}
旧版: box-pack: start | end | center | justify;
注意:兼容写法新版语法的space-around是不可用的
新版:justify-content:flex-start(默认值):左对齐
flex-end:右对齐space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
.box{
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-align: center;
}
旧版: box-align: start | end | center | baseline | stretch;
新版:align-items:flex-start:交叉轴的起点对齐。.item{
-moz-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-box-flex: 1.0;
}
旧版:box-flex:1.0浮点数字
新版:flex:1 数字
要求换行
.box{
flex-wrap:wrap;
box-lines: multiple;
}
旧版: box-lines: single默认不允许 | multiple 允许;
新版:flex-wrap: nowrap 不换行
wrap 换行,第一行在上方
wrap-reverse 换行,第一行在下方
01、行内元素也可以定义flex语法:不常用
.box{
display: -webkit-inline-flex;
display: inline-flex;
}:
02、父元素属性align-content属性 定义在多跟抽线的对齐方式,一般是换行以后的对齐方式,只有一条抽线改属性不生效,常用在换行以后有间距的问题:设置align-content:flex-start; 不常用
align-content:flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
03、子元素属性flex,是flex-grow, flex-shrink 和 flex-basis的简写,一般只定义子元素占多少份,常用
04、子元素属性flex-grow 定义子元素占一行的多少份,值为数字 不常用
05、子元素属性flex-basis属性 定义了在分配多余空间之前,项目占据的主轴空间 像素单位和百分比,默认auto
06、子元素属性flex-shrink属性 定义了子元素的缩小比例,如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值无效
07、 子元素属性order属性 定义子元素的排列方式,数值越小,越靠前排列,数字
08、子元素属性align-self属性 定义允许单个项目有与其他项目不一样的对齐方式,会覆盖algin-items属性 不常用
align-self: auto 默认 表示继承父元素
flex-start 与交叉轴的起点对齐。
flex-end 与交叉轴的终点对齐。
center 与交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
justify-content: space-around 不能用
flex-wrap: wrap 不能用
-webkit-前缀标准版
-moz-前缀标准版
标准版
-webkit-前缀09版
示例:
.box{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: -webkit-box;
display: -moz-box;
}
定义flex:
.box{
display: -webkit-flex; /*webkit*/
display: flex;
}
/*行内flex*/
.box{
display: -webkit-inline-flex; /*webkit*/
display:inline-flex;
}
父元素属性:
.box{
flex-direction: row | row-reverse | column | column-reverse;
/*主轴方向:左到右(默认) | 右到左 | 上到下 | 下到上*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*换行:不换行(默认) | 换行 | 换行并第一行在下方*/
flex-flow: || ;
/*主轴方向和换行简写*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主轴对齐方式: 左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}
子元素属性:
.item{
order: ; number
/*排序:数值越小,越排前,默认为0*/
flex-grow: ; /* default 0 */
/*放大:默认0(即如果有剩余空间也不放大,值为1则放大,2是1的双倍大小,以此类推)*/
flex-shrink: ; /* default 1 */
/*缩小:默认1(如果空间不足则会缩小,值为0不缩小)*/
flex-basis: | auto; /* default auto */
/*固定大小:默认为0,可以设置px值,也可以设置百分比大小*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/*flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*单独对齐方式:自动(默认) | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}