一般的な CSS テクニックの概要_html/css_WEB-ITnose

1. CSS 背景 CSS 背景は背景色と背景画像に分かれています。では、どのような場合に写真を使用し、どのような場合に背景画像を使用するのでしょうか? 一般原則: アイコンなどの固定コンテンツには、背景画像を使用します。バリアブルコンテンツの場合、画像はコンテンツに関連しているため、画像を使用します。通常、背景画像を書き込むときは、background:url(XXXX.jpg) 0 0 no-repeat のように、background-image、background-position、background-repeat 属性を一緒に書き込み、残りの背景属性を使用します。一人で。 注: インライン要素の背景を設定する場合は、垂直パディングを設定しないでください。インライン要素に垂直パディングを設定しても、ドキュメント フロー内の要素の位置には影響しませんが、背景効果には影響するためです。次のようになります。

Paste_Image.png

垂直パディングを設定すると、ドキュメント フロー内で 3499910bf9dac5ae3c52d5ede7383485 タグの垂直位置が変更されることがわかります。 。ただし、背景色が設定されているため、

タグの表示効果に影響します。 ヒント (スプライト): スプライト (CSS スプライト) とは、PS またはオンライン ツールを使用して複数の背景画像を 1 つの大きな画像に結合することを意味します。その後、background-position 属性を使用して画像を配置します。これにより、ネットワーク リクエストが削減されます。 。背景色については割愛しますが、比較的シンプルです。

2. 透明度 透明度 不透明度が透明に設定されている場合、rgba が透明に設定されている場合、内部の要素はすべて透明になります。色のみを透明に設定します

3. センタリング水平方向のセンタリングテキストと画像の水平方向のセンタリング text-align:centerdiv 水平方向のセンタリングマージン:0 auto (注) doctype の宣言)垂直方向のセンタリング単一行テキストの垂直方向のセンタリング: 行の高さを外側のコンテナの高さと同じに設定します。テキストの垂直方向のセンタリング: 上下のパディングを等しく設定します。

//ie8以上可以使用display：table-cell;vertical-align:middle;

ブロックレベルの要素は垂直方向に中央揃えになります: js 処理、上下のマージンを同じ高さに設定します

このブログの著作権は Xu Wei と Hungry Man に属します谷様、転載の際は出典を明記してください