CSS学習!

私は最近、今週CSSのことを学んだ!それは私が撮影されている認証演習のためにCSSの周りを回転させる.これらはほんの数ですが、私は誰かが私はどのようにこれから学ぶことができます願っています!だから、ここではいくつかのCSSの属性私は最近あなたがプロジェクトを試すことができます学んだ!

テキストオーバーフロー
オーバーフローに精通しているなら、これは同じ原理を、特にテキスト要素のためにします.
テキストオーバーフローはこれらの値に設定できます.

省略

省略が有効になるには、テキスト要素の幅を設定する必要があります.white-space: hidden and overflow: hidden .

クリップ

これは基本的にはoverflow : hidden 作品唯一のことは、オーバーフローが設定されている場合のみテキストオーバーフローが発生します.
省略:底部:クリップ

オブジェクトフィット
私はイメージをトリミングする方法を学んだ!これに対するより一般的な解決策は、背景画像として写真を使用し、そこから調整を適用することですが、オブジェクトフィットは何かもっと現代的なので、それを試してみたと言われていた.
オブジェクトのフィット値は次のようになります.

フィル

カバー

含む

なし

スケールダウン

チェックアウトCodePen 例については
* object position -オブジェクトに対応する行の別の属性です.オブジェクトフィットを使用して画像をトリミングするので、これは、要素のフォーカスのポイントを変更するように調整に役立ちます.
値は位置(上部、下、左＆右)または長さ/パーセンテージことができます.
位置の値を使用してサンプル;

#img1 {
  width: 200px;
  height: 300px;
  object-fit: cover; // Object position will be more evident with object fit set to cover
  object-position: left;
}

パーセント値を使用してサンプル;

#img2 {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 100%;
}

同じ写真の異なる結果!きちんとした?

垂直整列
この1つが動作するためには、必要とする要素を設定する必要がありますdisplay: inline or display: inline-block . その後、垂直方向の整列と要素を揃えます.
共通の値は次のようになります.

ミドル

ベースライン

トップ

長さ-それの親のベースラインからの長さ.
ミドル
トップ
ベースライン
長さ( 10 px )

また、text-top , text-bottom , super & sub しかし、上記のものと全く似ていますが、それは親のテキスト要素の位置揃えです.
私はこのブログがあなたの次のプロジェクトにこれらのCSS属性を使用する好奇心を得たことを願っています!
次まで!
参照:

CSS Tricks

MDN Web Docs