盒子模型
margin:外边距
* margin属性最多有四个
* ①只写一个margin属性均为这个值
* ②写两个值时意味着上又两个放向，下默认等于上，左默认等于又
* ③写三个值;上、又、下三个放下，左边默认等于右边
* ④写四个值，上又下左四个值
* ⑤写三个值加auto，控件居又显示
* margin：50px 30px 20px auto；距离父容器右边30个像素。
* ⑥：margin：0 auto；设置控件在父容器中水平居中
* border有三个属性值，宽度，样式，颜色
* 原则上三个属性都要指定（color不写时，默认为黑色）
* padding
* 使用方法同margin的1234，使用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(内阴影) 默认为外阴影
*/
/* [border-image 图片边框]
* 1、十个属性：
* ① 图片路径：url()
* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
* 写的时候，不能带px单位
* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
* 写的时候，必须带px单位
* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
*
* 2、属性值写法：border-image: ① ②/③px ④;
* 第②部分可以只写1个、2个、3个，判断方式同margin
绝对定位
[绝对定位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相同（处于同一平面的定位元素）层叠关系：后来者居上
*
* z-index默认为auto
/*绝对定位元素水平居中的方式：
* 1，left: 50%;*/
/* 2,margin-left: -50px;*/
相对定位
[相对定位relative]
* 1，使用position:relative；设置元素为相对定位的元素；
* 2，定位机制：① 相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
* ② 相对定位元素，仍会占据原有文档流中的位置，而不会释放。
* 3,使用top，left，right，bottom调整位置。当left和right同时存在，left生效，当top和bottom同时存在，top生效。
[display]属性：设置元素的级别
* none：隐藏元素，元素所占空间释放
* block：设为块级元素
* inline：设为内联元素（行级元素）
* inline-block：设为内联块级元素（本身为行级元素，但是具有块级元素所特有的各种属性，比如宽，高，text-align等）
负边距的使用
【1，实现块级元素在块级元素中水平垂直居中】 ★★★★★★★★
* ①设置子容器为定位元素;
* ②left：50%； margin-left：-width/2;
* top:50%; margin-top:-height/2;
【2，使用负边距增大元素宽度】
①不指定子容器宽度，指定高度或填充内容；
②margin:0px -50px;可以使左右两边，子容器均超过父容器50px
布局标签
<!-- 【HTML5 新增结构标签】
section：表示页面中的一个内容区块，文档的主体部分，用于将网页或文章划分章节、区块。
article：表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。
aside：表示article元素内容之外的，与article元素内容相关的辅助信息。(常用于相关推荐啊等)
header：网页或文章的头部。
footer：网页或文章的底部。
nav：表示页面中导航链接的部分
hgroup：用于整个页面或页面中一个内容区块的标题进行组合。
-->
<!--【HTML5表单属性】
Form:指向特定表单id，实现input无需放于form中，即可通过form提交；
Formaction/Formmethod:设置某个submit按钮，提交到指定的action地址，使用指定的method方法。 会覆盖form中的action和method属性
Placeholder:自动提示
Autofocus:自动获得焦点
Autocomplete:自动完成功能
详见 05_表单form.html 第8部分
List：指向指定的datalist的ID，为input绑定一组指定的datalist提示信息(datalist具有和Autocomplete类似的自动筛选完成功能)
>>>写法：<input type="text" list="data1"/>
<datalist id="data1">
<option>1234</option>
<option>2234</option>
<option>3234</option>
</datalist>
>>> 效果图：
maxlength:设置输入框的最大输入长度
-->
css3概述
<!--css3新增选择器
chrome，Safari：-webkit-
opera：-o-
firefox：-moz-
Internet explorer：-ms-
css3长度单位
em：与元素字号挂钩
rem：与根元素的字号挂钩
px：像素，与分辨率挂钩
%：相对于另一值得百分比-->
<!--<div clas="div1">
这是div1
<div class="div2">
这是div1里边的div2
</div>-->
<!-- transform 定义变换：
常用变换：translate 平移
scale 缩放
rotate 定义旋转
transform可同时进行多种变换，多种变换之间空格分隔：
例如：transform： scale（1.8，3.0） translateY（0px） rotate（）；
x y
transform-origin：定义变形起点。
可选值：left/center/right top/center/bottom
或者，直接写X Y轴坐标点。
例如： transform：rotate（180deg）;
transform-oringin:right bottom;
表示绕左下角旋转180度。
transition属性：定义过渡
①参与过渡的属性，可以单独指定某个css属性，也可以all/none
②过渡开始到过渡完成的事件，。3s 。5s
③过渡的样式函数 常选 ease
④过渡开始前的延迟时间
transition属性可以同时定义多个过渡效果，用逗号分隔
例如：transition： color .3s ease,border .5s linear;
animation:缩写顺序
animation-name 动画名称（@keyframes 名称）
animation-duration 动画持续时间
animation-timing-function 动画速度曲线
animation-delay 动画延迟时间
animation-iteration-count 播放次数 infinite
animation-direction （alternate 逆向播放）
注意animation-name和animation-duration 必须设置
【css3动画的使用】
1，声明一个动画（关键帧）
@keyframes name{
from{}
to{}
}
阶段：
①每个阶段用百分比表示，从0%到100%
②起止必须设置即0%和100%或者from和to
2，在css选择器中，使用animation 动画属性，调用声明好的关键
animation:缩写顺序
animation-name 动画名称（@keyframes 名称）
animation-duration 动画持续时间
animation-timing-function 动画速度曲线 常选 ease
animation-delay 动画延迟时间
animation-iteration-count 播放次数 ，默认为1，无限次infinite
animation-direction 检索或设置对象动画在循环中是否会反向运动 （alternate 逆向播放）
animation-fill-mode 设置对象动画时间之外的状态 forwards：停留在动画结束状态 backwards：停留在动画开始状态
《《 注意animation-name和animation-duration 必须设置
《《animation可以同时设置多个动画 动画之间用，分隔 animation：frame1.3s，frame2.5......
css3新增属性
background-origin：设置背景图的定位方式。border-box从边框外缘开始，padding-box从边框内缘，content-box从文字内容区开始
* background-origin不改变背景图显示区域大小，只决定左上角定位位置。
* background-clip：裁切背景图和背景色显示区域。border-box从边框外缘开始显示，padding-box从边框内缘开始显示，content-box从文字内容区开始显示 。不在显示区域内的背景图或背景色，会被裁切不显示
* background-clip不改变定位位置，只是通过裁切显示部分区域。
*/
/*background-origin: content-box;*/
background-clip: content-box;
background-color: blue;
padding: 30px;
transition属性：定义过渡
* ① 参与过渡的属性，可以单独指定某个CSS属性，也可以all/none
* ② 过渡开始到过渡完成的时间，.3s .5s
* ③ 过渡的样式函数 常选 ease
* ④ 过渡开始前的延迟时间，可以省略
*
* transition属性可以同时定义多个过渡效果，用逗号分隔
* 例如：transition: color .3s ease,border .5s linear;
*/
transition: all .3s ease;
}
.div4:hover{
height: 30px;
}
.div4:hover img{
/* transform定义变换：
* 常用变换：translate 平移
* scale 缩放
* rotate 定义旋转
* transform可同时进行多种变换，多种变换之间空格分割：
* 例如：transform: scale(1.8,3.0) translateY(0px) rotate();
* transform-origin： 定义变形起点。
* 可选值：left/center/right top/center/bottom
* 或者，直接写X Y轴坐标点。
* 例如：transform: rotate(180deg);
* transform-origin: right bottom;
* 表示，绕左下角，旋转180度。
*/
/*transform: scale(3);
transform-origin: left bottom;*/
transform: scale(1.8,3.0) translateY(0px);
}
[CSS3 动画的使用]
1、声明一个动画(关键帧)
@keyframes name{
from{}
to{}
}
阶段写法：
① 每个阶段用百分比表示，从0%到100%
② 起止必须设置即0%和100%或者from和to
2、在CSS选择器中，使用Animation动画属性，调用声明好的关键帧
【Animation:缩写顺序】
Animation-name 动画名称(@keyframes 名称)
Animation-duration 动画持续时间
Animtaion-timing-function动画速度曲线 常选ease
Animtaion-delay 动画延迟时间
Animation-iteration-count 播放次数，默认为1，无限次Infinite
Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）
* animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s……