浮动布局，定位布局（固定 | 绝对 | 相对），动画

-浮动布局    

　float:left | right

<style>
    ul .li {
        float: left | right;
    }
</style>

浮动布局解决的问题：

　　让块级标签在父级的限制下同行显示，一行显示不下，自动换行（ 想要不自动换行，固定父级的宽度 ）

浮动布局导致的问题：

　　子集不再撑开父级高度

解决浮动布局导致的问题：

　　谁需要同行显示，谁就需要浮动布局
清浮动方式一

.ul1:after {
    content:"";
    display:block;
    clear:"both"
}

清浮动方式二：直接设置父级的宽度

.ul1 {
    height:500px;
}

 

 

-定位布局

　　上下取上，左右取左

（一）固定定位：（完全脱离文档流） fixed
　　盒子相对于屏幕完成位置布局，不会随着屏幕内容的滚动而滚动，且和页面内容无关

   设置完定位，盒子 top | bottom | left | right 均可以参与布局
   上下取上，左右取左

   完全脱离文档流的盒子的显示层次高于不脱离文档流的盒子

　　控制显示层次：
    　　z-index:1  数字越大显示越在前

<style>
    .info {
        position:fixed;    固定定位

        right:0;
        left:20px;
        bottom:10px;
        top:10px;     上下取上，左右取左
    }
</style>

参考系：固定定位参考系为窗口

（二）绝对定位：（完全脱离文档流） absolute
　　兄弟标签之间不相互影响，都参照父级的显示区域来完成布局

　　父级一般只是为了给子集绝对定位下提供参考系
　　父相对定位，子集绝对定位

<style>
    .info {
        position:absolute;   相对定位

        right:0;
        left:20px;
        bottom:10px;
        top:10px;     上下取上，左右取左
    }
</style>

参考系：以最近的定位父级为参考系

（三）相对定位：（不脱离文档流） relative
　　相对定位方位只会改变显示图层，不会改变盒子的原有位置

<style>
    .info {
        position:relative;   相对定位

        right:0;
        left:20px;
        bottom:10px;
        top:10px;     上下取上，左右取左
    }
</style>

动画：

transition-delay: 延迟时间
transition-duration: 持续时间

transition-property:all 过度属性

transition-timing-function:cubic-bezier(0.1,1,1)  过度效果
                            linear 匀速

简写：
               持续时间  延迟时间  过度属性    运动的贝塞尔曲线
    transition:  2s        1s       all      cubic-bezier(0.1,1,1)
    transition: 0.3s linear

 

转载于:https://www.cnblogs.com/liu--huan/p/10300347.html