HTML と CSS に関する基本的なメモ (フロントエンドでは必読)

上記は一般的な方法です。初心者としては、互換性を考慮せずに、1つのタグを使用することで問題を解決できると感じています。文字の場合は、行の高さを使用して垂直位置を制御し、幅と高さを使用して表示領域を制限します。

効果は次のようになります:

現在、GoogleとFirefoxでのみ効果をテストしており、問題はありません。何か問題があればご指摘ください。

4 隣接するインライン ブロック要素間の距離

上記のナビゲーションをインライン ブロック要素に変換すると、隣接する 2 つの要素の間に数ピクセルの距離が生じます。一見すると見えないかもしれませんが、拡大するとわかります。この問題を解決する唯一の方法は、フローティングを使用することです。

5 数値の連続記述：

CSSでは、一部の属性の値を連続して記述することができます。たとえば、padding と border-radius です。前者は上、右、下、左、後者は左上、右上、右下、左下です。それらはすべて時計回りに配置されていますが、開始点は異なります。 4つの方向をa、b、c、dとすると、したがって、その後ろに連続する 2 つの数字が書かれている場合、それらは ac、bd を表します。3 つの数字は a、bd、c を表します。言うまでもなく、4 つの数字は a、b、c、d を表します。

6 フロートのクリア フロート

をクリアする方法は 4 つありますが、最も一般的な方法は疑似要素を使用することです。

7 高さを設定します。

フローティングについて話しているときに、セクションの高さの問題を突然思い出しました。一般的に、セクションをハードコードするために固定の高さを使用しないようにしてください。ハードコードしないでください。死んでも書かないでください!死んでも書かないでください!重要なことは3回言うべきです。ハードコードされている場合、レスポンシブにするにはどうすればよいでしょうか?

8 要素のマージンとパディングは

、すべての要素のマージンとパディングの水平方向 (左右) に有効であり、行内の要素の垂直方向 (上下) のみが補助的な役割を果たしません。パディングによって要素の境界が拡張されますが、要素を元の垂直位置から押し出すことはできないことに注意してください。

9 相対位置決めと絶対位置決めの使用

位置決めには、絶対位置決め、相対位置決め、固定位置決め、静的位置決めの 4 種類があります。後者の 2 種類の位置決めについては、特に言うことはありません。前の 2 種類と同じです。注意すべき点は、相対位置決めはドキュメント フローの元の位置を占めますが、絶対位置決めはドキュメント フローの元の位置を占めないことです。したがって、位置決めを使用する必要がある場合は、実際の状況に応じて具体的な状況を分析し、相対位置決めを使用するか絶対位置決めを使用するかを検討する必要があります。例:

リストは上部に属し、leftは下部の広告、bは下部のコンテンツです。相対配置と絶対配置を使用して問題を解決する場合、leftは下部に影響を与えないように絶対を使用する必要があります。このようにして、上部を超えたリストがカバーされます。したがって、リストの親ボックスには一定のレベルを設定する必要があります。論理的には、依然として上部に属しているため、相対を使用して上部の位置を占める必要があります。この場合、b にも relative を設定し、ブロックされないように左マージンを設定する必要があります。

10 配置を使用して要素を中央に配置します。

ブロック レベル要素を水平方向に中央に配置するには、margin: 0 auto を使用します。配置を使用した解決策は、配置を設定した後、左 (上) を 50% に設定し、margin-left を使用してその位置の半分を後ろに移動します。

11 背景と画像 画像

を挿入する際に img を使用するタイミングと背景を使用するタイミングについてよく質問されます。簡単に言うと、一般的なウェブサイトのアイコンはすべて背景を使用し、特定の製品に関連する場合はimg画像が使用されていると思います。

フロントエンド必読のHTMLとCSSの基本ポイントを解説した上記記事が、編集者が皆さんにシェアする内容の全てです。皆さんの参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/qing9442/archive/2016/07/26/5709413.html