CSS黒魔術(1)_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:04:54
オリジナル
1189 人が閲覧しました

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>
ログイン後にコピー

子要素要素の表セルの高さと幅で親要素全体を埋める

モバイル Web ページをサポート弾性スクロール

従来の PC 側では、通常、overflow:auto を使用してスクロール バーをドラッグして、オーバーフローしたコンテンツを表示できます。 、ブラウザのメーカーのシステムやバージョンが異なるため、モデルが弾性スクロールをサポートしていないため、開発中にいわゆるバグが発生する可能性があります。

.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();            }
ログイン後にコピー

どなたでも追加していただけます。
継続的な更新...

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート