H5学习第二周

怎么说，在各种感觉中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

 

 由于本周末进行了网页项目实战，在此过程中大量利用到盒子和定位，其中要注意的是，定位时一定要注意父子容器的定位关系，父容器一定要约束住子容器。