Home > Web Front-end > HTML Tutorial > CSS黑魔法(1)_html/css_WEB-ITnose

CSS黑魔法(1)_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:04:54
Original
1187 people have browsed it

css黑魔法

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

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

子元素垂直居中

<div class="parent">    <div class="child">        垂直居中    </div></div><style>    .parent{        display:table;        width:500px;        height:500px;    }    .child{        display: table-cell;        vertical-align: middle;    }</style>
Copy after login

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

移动web页面支持弹性滚动

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

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

详细可参考: 移动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();            }
Copy after login

欢迎大家踊跃补充!
持续更新......

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template