css3杂记

本文随手记录了一些项目遇到的关于css的知识;
1.text-overflow: clip|ellipsis;text-overflow 属性规定当文本溢出包含元素时发生的事情;注意的是使用text-overflow:ellipsis时,当前容器的font-size是对它有影响的。
2.页面使用弹出的时候经常需要使用到蒙版,即一个平铺整个页面的半透明层,这个时候就需要一个div的宽高跟页面一致;可以使用以下方法,注意定位一定是要有并且一定是fixed;

.div {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

3.css Stickt footers
注意下图,一般我们做蒙版的时候,下边那个按钮不是固定在底部的,当页面内容过长,按钮是在内容的下方;当内容正常的时候,按钮是固定在页面的指定位置;这种布局,大家称之为css Stickt footers;
css Stickt footers
实现css Stickt footers的基本方法:
先理清案例的dom结构。.detail是父级div,.detail-wrapper和.detail-close是同级的div,是.detail的子集;下面是less的写法;

.detail {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
      .detail-wrapper{
        width: 100%;
        min-height: 100%;
      }
      .detail-close {
        position: relative;
        width: 32px;
        height: 32px;
        margin: -64px auto 0 auto;
        clear: both;
      }
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值