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高宽填充整个父元素
传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同、版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG。
.css{overflow:auto;/* winphone8和android4+ */-webkit-overflow-scrolling: touch; /* ios5+ */}详细可参考: 移动web页面支持弹性滚动的3个方案
&:after { content: ''; border: Size(13) solid transparent; border-left-color: #fff;//方向 width: 0; height: 0; position: absolute; top: 0; right: Size(-30); @include verticalCenter(); }欢迎大家踊跃补充!
持续更新......
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号