9月 28 2014

无线页面的一点点小总结.md

无线页面的一点点小总结

总结两个方面：

css3
js-iscroll

css3

从几个代表的部分展开分析css3

logo部分
top布局部分
图标部分　@font-face

logo部分

先说一下`background-size`,随带说一下`background-clip`与`box-sizing`

内容
background-size	background-clip	background-sizing

示例demo background-size,background-clip与box-sizing

background-size: contain | cover | inherit

contain 等比，完全保留全部的底图，把完整的底图放进去展现出来，可能会留白，可能会铺不完全，以图为基准，只要把完整的图放进去目的就达到了
底图等比（放大或缩小）且完整的呈现在box中

cover 等比，填满，不留空白，超出的隐藏，把完整的框全部用底图铺满，不会留白，以框为基准，只要把框全部用图覆盖满了就行，不留空白死角
box会被底图全部填满，底图同样等比（放大或缩小），但底图超出的部分会被隐藏不显示。

如果框的大小与底图的大小是等比例的，那么 background-size: contain | cover | 100% ;这时候这三者是一样的效果。

background-clip: border-box | padding-box | content-box  //从什么位置（边缘）开始填充底图

border-box 　从border的外界边缘开始填充底图

padding-box 　从padding的外界边缘开始填充底图

content-box 　从content的外界边缘开始填充底图

box-sizing: border-box | padding-box | content-box 盒子的大小，是包含padding呢，border呢，还是content呢

border-box 意思是　width = contentWidth + padding + border;

padding-box 意思是 width = contentWidth + padding;　　-webkit-box-sizing: padding-box; -webkit不支持padding-box;

chrome(-webkit) 版本 37.0.2062.120 暂时还不支持padding-box;

content-box 意思是　width = contentWidth;

top布局部分

display: box;     box-flex: 1;
`box-orient`     `box-direction`     `box-pack`     `box-align`

box && box-flex box-orient box-direction box-align box-pack

`box-orient: horizontal | vertical`  轴，确定是到底哪个轴，是水平轴还是垂直轴

`box-direction: normal | reverse`　轴的方向，是正向还是逆向

`box-pack: start | end| center | justify;` 轴上的位置，是居左居右居中还是两端对齐

box-pack的方向与box-orient的方向是相同的一致的

`box-align: start | end | center | baseline | stretch;` 相反的轴上的位置，是居左居右居中还是两端对齐

box-align的方向与box-orient的方向是相反的不一致的

由box-pack与box-align实现居中会很容易，box-pack与box-align的方向受box-orient与box-direction的影响。

图标部分　@font-face

自己绘制图标字体，参考　自制矢量图标转换成字体　文章。
由其它网站（如：icomoon fortawesome）及其类似的网站，别人制好的库里筛选自己想的图标字体

[class^="baikeicon-"], [class*=" baikeicon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.baikeicon-home:before {
    content: "\e60c";
}

添加class的值，通过伪类:before的content给标签加图标内容，标签对应的字符，如下图（下载下来的demo），可以自己去定义要用的字符。

iscroll

参考文档：　iscroll4

结束