一个页面布局的知识点总结

前言：最近快速看了一个学习视频，学完基础的HTML5和CSS3之后简单的练习了一个相关页面，总结一下过程中遇到的新的知识点。想到什么写什么了。

先贴一下效果：
首页：
https://sunyueru.github.io/practice/pageLayout/homePage/index.html

产品页面：
https://sunyueru.github.io/practice/pageLayout/products/index.html
源代码：
https://github.com/sunyueru/practice/tree/master/pageLayout

• transform属性的使用
• animation动画
• transition属性的使用
• text-overflow属性
• 如何消除html内容换行导致的间隙
• 使用display：inline-block代替浮动来布局
• vertial-align属性

一、transform属性
这个我想说的是，如果要同时使用translate，rotate，scale多个值的话，应该怎么写在一起的问题。

40%{
        transform:rotate(30deg)scale(2);
        -ms-transform:rotate(30deg)scale(2);    /* IE 9 */
        -moz-transform:rotate(30deg)scale(2);   /* Firefox */
        -webkit-transform:rotate(30deg)scale(2); /* Safari 和 Chrome */
        -o-transform:rotate(30deg)scale(2);     /* Opera */

多个值之间不要加逗号！！！我就是想说的这个。。。。

二、animation动画

①首先是使用@keyframes创建动画：
@keyframes 动画名称{ }

@keyframes change{
    0%{
        transform:rotate(10deg);
        -ms-transform:rotate(10deg);    /* IE 9 */
        -moz-transform:rotate(10deg);   /* Firefox */
        -webkit-transform:rotate(10deg); /* Safari 和 Chrome */
        -o-transform:rotate(7deg);  /* Opera */
    }

②然后把创建的动画绑定在相应的div上面：
animation：动画名称 时间 等等属性

.mainbody .picList li:hover img{
    /*border: 1px solid red;*/
    animation: change 3s linear; 
    -webkit-animation: change 1s linear; 
    -moz-animation: change 1s linear; 
    -ms-animation: change 1s linear;
    -o-animation: change 1s linear;  
}

三、transition属性
过渡属性

.header li.active,.header li:hover {
    background-color: #2f89c5;
}

.header nav li{
    display: inline-block;
    line-height: 60px;
    width: 80px;
    text-align: center;
    /*color: #000;*/
    font-size: 16px;
    border-right:1px solid #2f89c5;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -ms-transition: background-color 1s;
    -o-transition: background-color 1s;
}

简单介绍：
定义点击li之后改变背景颜色，在相应的li内设置transition属性。
transition：属性名称 延迟时间

四、text-overflow属性

实现超出宽度显示省略号的效果

关键代码：

.leftThree #left li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

第一个属性是超出的裁剪，第二个是不换行，第三个就是使用省略号裁剪内容

五、如何消除因为html内容换行导致的间隙：
答案就是：给父级元素添加：font-size：0

六、使用display-inline-block布局
这里简单说一下，不做示例了。而且也要视情况而定，
比如一个页面有左右，可以都给他们设置相应的宽度，再设置display：inline-block就可以不使用浮动布局。

七、vertial-align: