CSS3盒子模型box-sizing及清除移动端特殊样式

• 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
• CSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
• 也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了

/*CSS3盒子模型：border-box，边框盒子，理解：从边框开始计算盒子的大小（包括边框内部所有内容，边框，内边距，内容）*/
box-sizing: border-box;
/*传统盒子模型：content-box，内容盒子，理解：从内容开始计算盒子大小（只包括内容）*/
box-sizing: content-box;

移动端特殊样式

   /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }