css3动画效果和响应式

         这周学习的是css3的动画和响应式效果，在模板之家上面找了个模板，写了一点就换了，学习的开始是结合自己前面遗忘的情况，看了布局的视频以及慕课网上面的css3的动画效果的视频，感觉讲得挺好，结合自己写的网页遇到的问题以及学习到的新知识，总结一下。

        首先是布局，按道理讲这个应该在一开始学习网页的时候就该掌握的，不过，这次看了视频也是蛮多收获的吧。分为一列布局，两列布局，三列布局，以及混合布局，一列布局的话（一般不适合放很多的文字），如果需要居中可以在打的div下面套一个居中的div,然后margin:0 auto;还有一个值得注意的问题是，有很多时候的父本不必设置高度。两列分布的两种情况：1自适应：宽度百分比的设置  2.固定宽度：加在父集里，父集一般固定宽且margin:0 auto。三列定位的固定情况就是两边浮动，中间的设置left.right是左右两边的盒子宽度。元素脱离文档流的css设置是：float.以及position：absolute

       一. figure标签，html5的语义化标签  用于规范独立流的内容（图片，图标，照片，代码）；figcaption与figure连用，用于定义figure的标题。

      二.transform以及transition

         1.transform为css3的属性，主要用于元素的变形处理

         属性：translate.rotate,scale,skew. 分别是平移，基于自己原来的位置；2D旋转，单位是deg,并且origin属性设置旋转的中心点,默认情况下就是这个origin（0,0），正中心点；缩放scale（0.5,0.5），大于一是放大，小于是缩小，并且也可以用origin设置围绕哪里缩放；

         2.transition

         属性：propery,检索设置对象中的参与过度属性；duration,过渡动画的持续时间（s）;timing-function,检索或设置对象中过渡的动画类型（liner,ease.ease-in,ease-out,ease-in-out）;delay检索或设置对象延迟过渡时间。（注：transiton后面必须有两个属性，且propery可用all代替，delay单独使用时，用transition-delay）

        三 媒体查询    通过不同的媒体类型和条件定义样式规则，@media和@import规则上也可以用在html和xml中，宽度用百分比。实例代码：

@media only screen and (max-width: 300px) {
    .allfr{width: 100%;}
}
@media only screen and (min-width: 301px) and (max-width: 800px) {
    .allfr{width: 50%;}
}
@media only screen and (min-width: 801px) and (max-width: 1000px) {
    .allfr{width: 33.3%;}
}
@media only screen and (min-width: 1001px) {
    .allfr{width: 22%;}
}              这里一个值得注意的一点 如下点2.响应式时，当、、、、、

        

        还有一个存在的问题是，div的滥用，一些情况下是没必要设置的div的，；以及没必要设置最外的父本的高度。其次是一些细节问题，分条说

       1.这是在写华东时，一张图片固定不动的代码（重点是fixed以及背景图的圈覆盖）：

./*固定处的图片*/
.backimg{
    width: 100%;
    height: 635px;
    /*实现图片的固定 且图片全覆盖*/
    background: url(../img/backimg.jpg) no-repeat fixed;
    background-size: cover;
    /*虚化图片 加底色*/
    background-color: lawngreen;
    opacity: 0.9;
}

2.响应式时，当界面变小的时候哦，图片边化，但是会重叠到下一个div里面，这时候需要不给父级设置高并且overflow:hidden;

.one{
    width: 100%;
    /*height: 570px;*/
    overflow: hidden;
    background-color: #f7f7f7;
}

3.图片一般加底色，再加透明度，再开始动画设置

4.设置点击图片时，底部出现阴影的代码，并且实例中八张图片浮动时，原打算点击图片，去掉边框border：none.结果出现了点第一行右边图片，下面图片不见的问题，去掉border：none就好了

.allfr{
    width: 23%;
    /*height: 380px;*/
    margin:32px 15px;
    float:left;
    border:solid 1px #ccc;
    /*background-color: lightcoral;*/
}
 .allfr:hover{  
    transform: scale(1.1);
    /*border: px; */
    /* 设置阴影*/
    box-shadow:0px 0px 3px black;
    cursor: pointer;  
    transition: all 0.6s;   
}

5.最后一个问题，在设置结尾时，才一个p标签，我就给它套了三个标签，导致代码有点多，其实p是行级标签，设置text-align:center.它会根据内容，自动撑大，并且在行中间，再设置padding就可以让它垂直居中，这个问题，下周再总结，块级元素，行内元素，内联元素，以及他们的居中问题。