H5初步接触（二）
怎么说，先总结一下，感觉学习h5是一件让我爱恨交加的事，学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的，但是有时候搞不懂一个标签或者属性的时候，就有了把电脑砸了的冲动！！！！！！额。。。好吧，再纠结也并没有什么卵用。还是把这周的总结感悟写一下吧。
这周主要接触的H5知识有CSS盒子模型，浮动与定位，HTML的新增结构标签，[html5]表单新增结构标签，以及CSS过渡和动画。
下面讲一下盒子模型和定位
1.CSS盒子模型
在CSS的学习中，盒模型是非常重要的知识点，以下是盒模型的常见知识点
[margin 外边距]
margin属性值最多有四个：
① 写一个值：四个方向的margin均为这个值
② 写两个值：上、右两个方向，下默认=上，左默认=右
③ 写三个值：上、右、下三个方向，左默认=右
④ 写四个值：上、右、下、左 四个方向
⑤ 写三个值+auto：控件居右显示
margin: 50px 30px 20px auto; 距离父容器右侧30px
⑥ margin: 0 auto; 设置控件在父容器中，水平居中
[border 边框]
border 有三个属性值：宽度width 样式style 颜色color
原则上，三个属性都需要手动指定(color不写时，默认为黑色)
[padding 内边距]
使用方式，同margin①~④
注意：使用padding会将整个控件撑大，使用时需注意控件可视区域的实际小。
[border-radius 圆角]
1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
例如：border-radius: 50px 0px ;
=border-radius: 50px 0px 50px 0px;
=border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
3、只写一个数，默认8个值均相等。
[box-shadow 盒子阴影]
1、六个属性值，空格分割：
x轴阴影距离：(必选) 可正可负，正——右移 负——左移
y轴阴影距离：(必选) 可正可负，正——下移 负——上移
阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小
阴影颜色：(可选) 默认为黑色
内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
除此之外，盒模型还有以下知识点
1.
行内盒子的水平外边距
2.
块级盒子的垂直外边距合并
3.
还有很重要的一点就是解决子盒子添加margin-top时会出现的问题
垂直盒子的垂直外边距合并
2.CSS盒子的定位
[相对定位 relative]
1、使用position: relative; 设置元素为相对定位的元素；
2、定位机制：
① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。
3、使用top、left、bottom、right调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
[绝对定位 absolute]
1、使用position: absolute;设置元素为绝对定位元素。
2、定位机制：
① 相对于第一个非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)进行定位。
② 如果所有祖先元素均未定位，则相对于浏览器左上角定位；
③ 使用absolute的元素，会从文档流中完全删除，原有空间释放不再占有；
[固定定位 fixed]
1、position: fixed; 是一种特殊的绝对定位，父容器无法使用relative锁住
2、定位机制：永远相对于浏览器进行定位。
[z-index 属性]
1、作用：设置定位元素的Z轴层叠顺序
2、使用要求：① 必须是定位元素才能使用。relative/absolute/fixed
② 使用z-index需要考虑父容器的约束。
如果父容器为z-index:auto，则子容器的z-index可以不受父容器的约束；
如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素，仍可以通过自己的z-index调整层叠关系)。
3、z-index:auto & z-index:0 的异同：
① z-index:auto为默认值，与z-index:0处于同一平面。
② z-index:auto,不会约束子元素的z-index层次，而z-index:0，会约束子元素必须与父元素处于同一平面。
4、z-index相同(处于同一平面的定位元素)的层叠关系：后来者居上
【1、实现块级元素在块级元素中水平垂直居中】
① 设置子容器为定位元素；
② left:50%; margin-left:-width/2;
top:50%; margin-top:-height/2;
【2、使用负边距增大元素宽度】
① 不指定子容器宽度，指定高度或填充内容；
② margin: 0px -50px; 可以是左右两边，均超出父容器50px
由于本周末进行了网页项目实战，在此过程中大量利用到盒子和定位，其中要注意的是，定位时一定要注意父子容器的定位关系，父容器一定要约束住子容器。
