浮动布局,定位布局(固定 | 绝对 | 相对),动画

-浮动布局    

 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值