学习HTML5的第二周

---恢复内容开始---

这是我学习H5的第二周，在本周，我独立完成了一个网站的首页和一个二级页，虽然在做网页的时候我遇到了许多问题，但我自己想办法解决了其中的大部分，只留下了一小部分没有头绪的问题等待解决。接下来我将记录本周的主要学习内容。

周一，我们学习了css的盒子模型，我们主要用的有两种，第一个是content-box,也叫标准盒模型，给它设置宽高的时候只包括content；

第二个是border-box,它叫做怪异盒子，它的宽高包括padding，border和content。在实际操作中我比较常用这一种盒子模型来操作，调整方式：box-sizeing: ;。

接下来我们学习的是四个属性，包括：margin 外边距，border 边框，padding 内边距，

它们的属性值：

一。margin属性值最多有四个
1.只写一个值:四个方向margin均为这个值.
2.写两个值:上,右两个方向,下默认等于上,左默认等于右.
3.写三个数:上,右,下三个方向,左默认等于右.
4.写四个数:上右下左四个方向
5.写三个值加auto：控件居右显示
margin: 10px 10px 10px auto;居父容器右侧10px。
6.margin：0 auto；设置控件在父容器中水平居中。

二。border有三个属性值:宽度 width 样式style 颜色color
原则上三个都要指定。（color不写时默认为黑色。）

三。padding使用方式同margin1-4.

注意:使用padding会将整个控件撑大,使用时需注意控件可视区域的实际大小.（content-box中）

之后我们又学了几个新的属性：

[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(内阴影) 默认为外阴影

[border-image 图片边框]
 1、十个属性：
 ① 图片路径：url()
 ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。
 通过四条切线切割后，会把图片分成九宫格，
 四个角分别对应边框的四角(不会进行任何拉伸)，
 四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
 写的时候，不能带px单位
 ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
 写的时候，必须带px单位
 ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
 【铺满和平铺区别】
 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。

 2、属性值写法：border-image: ① ②/③px ④;
 第②部分可以只写1个、2个、3个，判断方式同margin

接下来就是很重要的定位属性

[绝对定位 absolute]
 1.使用position: absolute;设置元素为绝对定位元素。
 2.绝对定位的定位机制：
 （1）.相对于第一个非static（用了relative，absolute，fixed）
 的祖先元素来定位。
 （2）.如果所有祖先元素均无定位，则相对与浏览器左上角定位。
 （3）.使用absolute定位会使元素从文档流中被完全删除。原有空间被释放不再占有。
 [固定定位 fixed]
 1.position: fixed;是一种特殊的绝对定位，父容器无法使用relative
 锁定。
 2.定位机制：永远相对于浏览器定位。
 [z-index 属性]
 1.作用设置定位元素的z轴层叠顺序。
 2.使用要求：
 （1）.必须是定位元素才可以使用。absolute，relative，fixed。
 （2）.使用z-index需考虑父容器的约束，如果父容器的z-index为auto则
 子元素的z-index不受其约束，若父容器z-index进行了设置，则子容器
 的层叠以父容器为准。（同一父容器的不同子元素仍可用z-index调节）
 3.z-index：auto和z-index：0的异同
 （1）.auto为默认值，与0处于同一平面。
 （2）.z-index：auto不会约束子元素的z-index层次，而z-index
    会约束子元素必须与父元素在同一平面。
 4.z-index处于同一平面的定位元素的层叠关系：后来者居上。
clip: rect(top,right,bottom,left);
 用于裁剪元素。

绝对定位的一些应用方式：

绝对定位元素的水平居中方式 垂直居中将left改为top，margin-left改为margin-top。
 一.实现块级元素在块级元素中的居中方式。需设置子容器为定位元素。
 1.left: 50%;
 2.设置margin-left为负width的一半。
 margin-left: -50px;
 二.使用负边距可以扩大元素宽度。使用这个方式不能指定元素宽度。
 1.不指定子容器宽度，指定宽度或填充内容。
 2.margin：0px -50px；使子元素左右超出父容器50px。
 3.双飞翼布局（了解）。可保证主布局的优先加载。

三。第二部分应用：解决div中多个li间距问题。（ul中加负margin）。

display属性设置元素的级别
 属性值
 none：隐藏元素，元素所占空间释放。
 block 把元素变为块级元素。
 inline-block：设为内联块级元素（本身是行级元素但是有块级元素的各种属性
 如宽，高，text-align等）。
 linline：设为内联元素（行级元素）。

[相对定位 relative]
 1.使用position: relative;设置元素为相对定位的元素；
 2.定位机制：
 (1).相对于自己原来文档流中的位置进行定位，
 当不指定top等定位值时不会改变元素位置。
 (2).相对定位元素仍会占据原有文档流中的位置，而不会释放。
 3.使用top，left，right，bottom调整位置，当left和right
 同时存在left生效，top，bottom同时存在，top生效。

CSS3长度单位
em：相对长度单位。相对于当前对象内文本的字体尺寸。
rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 。
px：像素
%：
background-origin：（背景图从那开始铺满，不改变背景图大小。）
padding-box： 从padding区域（含padding）开始显示背景图像。
border-box： 从border区域（含border）开始显示背景图像。
content-box： 从content区域开始显示背景图像。
background-clip：（背景图和背景色的显示区域，会改变背景图背景色大小。）
padding-box： 从padding区域（不含padding）开始向外裁剪背景。
border-box： 从border区域（不含border）开始向外裁剪背景。
content-box： 从content区域开始向外裁剪背景。
text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果.
transform:定义变换
常用变换：translate() 平移
rotate() 旋转
scale() 缩放
可同时进行多个变换，变换之间用空格分割。
例：transform：scale（1.5，1.5） translatey(0px) rotate();
transform-origin：定义变形起点。
可选值：left、center、right top、center、bottom。
或者直接写xy坐标
例：transform-origin：right bottom；
transition:属性定义过渡：
1.参与过渡的属性：可单独指定某个css属性，也可以用all、none。
2.过渡开始到结束的时间 .3s .5s等
3.过渡样式函数：常选ease
4.过渡开始前的延迟时间，可省略。
transition可以同时定义多个属性的过渡效果，用逗号分隔
必须加在选择器上不能加在伪类选择器上。

[css3动画的使用]
1.声明一个动画(关键帧)
keyframes name{
from{}
to{}
2.在css选择器中使用动画Animation属性调用声明好的关键帧。
Animation属性：
name： 检索或设置对象所应用的动画名称
duration： 检索或设置对象动画的持续时间
timing-function： 检索或设置对象动画的过渡类型
delay： 检索或设置对象动画延迟的时间
iteration-count： 检索或设置对象动画的循环次数
direction： 检索或设置对象动画在循环中是否反向运动
(normal： 正常方向
reverse： 反方向运行
alternate： 动画先正常运行再反方向运行，并持续交替运行)
fill-mode： 检索或设置对象动画时间之外的状态
（forward停留在结束状态，backword停留在开始状态）
动画名称和动画持续时间必须设置，Animation可以设置多个动画，之间用逗号分隔。
【注意事项】
1.每个阶段用百分比表示从0%到100%
2.起止必须设置即0%和100%或from和to

最后是html的新增属性：

【HTML5表单属性】
1.form：指向特定表单id，实现input无需放于form中，即可通过form提交。
2.formaction/formmethod：设置某个submit按钮提交到指定的action地址，
使用指定的method方法，会覆盖form中的action和method方法。
3.placeholder：自动提示
4.autofocus：自动获得焦点
5.autocomplete：自动输入完成
6.list:为input绑定一组指定的datalist提示信息写法：
<input type="text" name="" value="" list="data1"/>
<datalist id="data1">
<option>1234</option>
<option>1234</option>
<option>1234</option>
<option>1234</option>
</datalist>
datalist具有和autocomplete类似的自动筛选完成功能。

这是我做的首页和二级页：