css黑魔法

多行文本溢出显示省略号(...)的方法

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;//规定可现实几行
    -webkit-box-orient: vertical;
}

  

子元素垂直居中

<div class="parent">
    <div class="child">
        垂直居中
    </div>
</div>

<style>
    .parent{
        display:table;
        width:500px;
        height:500px;
    }
    .child{
        display: table-cell;
        vertical-align: middle;
    }
</style>

  

子元素元素table-cell高宽填充整个父元素

移动web页面支持弹性滚动

传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同、版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG。

.css{
overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
}

  

详细可参考: 移动web页面支持弹性滚动的3个方案

CSS箭头制作方法

&:after {
               content: '';
                border: Size(13) solid transparent;
                border-left-color: #fff;//方向
                width: 0;
                height: 0;
                position: absolute;
                top: 0;
                right: Size(-30);
                @include verticalCenter();
            }

  

posted @ 2015-11-23 10:14  goodbyepeterpan  阅读(229)  评论(0编辑  收藏  举报