iOS H5页面修改笔记一

作为一个iOS程序员对H5知之甚少，很少惭愧，但是在项目模块改造中，对原有的H5页面修改，确实不得不面对的问题，开启新的学习一路，一点点走起！

.nine_squares_selection{
    height: 200px;
    background: #fff;
    overflow: scroll;
/*    overflow: hidden;*/
    margin-left:24px;
    margin-right:24px;
/*    padding: 25px 5px;*/
}
.nine_squares_selection ul{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
    /*    float:left;*/
}
.nine_squares_selection li{
    /*    position: absolute;*/
    box-sizing: border-box;
    text-align: center;
    float:left;
    width:25%;/*20%*/
}

.nine_squares_selection li span{
    display: inline-block;
    width: 40px;
    height: 40px;
}

1 overflow

值	描述
visible	内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	由浏览器决定如何显示。如果需要，则显示滚动条。

2.position

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

3. display: flex; //将对象作为弹性伸缩盒显示

4. justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述	测试
flex-start	默认值。项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
center	项目位于容器的中心。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

5. box-sizing  属性允许你以某种方式定义某些元素，以适应指定区域

  http://www.runoob.com/cssref/css3-pr-box-sizing.html

值	说明
content-box	这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算
inherit	指定box-sizing属性的值，应该从父元素继承

6. float 属性指定一个盒子（元素）是否应该浮动。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。