移动端基础学习笔记

移动端基础、flex布局

第一天 基础

移动端公共样式Normalize，github地址:Normalize.css
常用公共样式如：

body {
    width: 15rem;
    margin: 0 auto;
    // 因为浏览器默认行高太小了，从排版角度考虑1.5倍行高更舒服
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #f2f2f2;
    /* 永远不会出现水平滚动条的属性 */
    overflow-x: hidden;
        /* 2.点击高亮需要清除， 设置transparent 完成透明 */
    -webkit-tap-highlight-color: transparent;
}
/* 3.移动端游览器默认外观在ios加上该属性才能给按钮和输入框自定义样式,安卓的也通用 */
input {
    -webkit-appearance: none;
}
/* 4.禁用长按页面时的弹出菜单,真实环境中有效 */
a,
img {
    -webkit-touch-callout: none;
}
/* 转为C3盒模型 */
div {
    box-sizing: border-box;
}
img {
    /* 去出图片空白间隙 */
    vertical-align: middle;
}
a {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}

笔记->

    
    
    
    
     








移动端点击高亮



    

    

第二天 flex布局

    
    
    
    
    


    
    

        1
        2
        3
        4
        5
        6
    
    
    

        
1
        
2
        
3
        
4