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

HTMLに触れた当初はレイアウトにいつもテーブルを使っていましたが、とても面倒で見た目も悪かったので、最初はあまり興味がありませんでした。半年ほど前からdiv+cssを使ってページを書くようになってから、興味を持つようになりました。新人として、主に自分自身のためにレッスンと成果を記録していますが、今後学習したい学生の参考になればと思っています。同時に、先輩たちに自分の欠点を指摘してもらうこともしています。

1. 意味のないタグの使用を減らす

以下に簡単な例を示します。

このトップ構造では、

エラー: 列全体 > ページ中央 > 左側 + (右側 > ul > li*9 > a)

正解: 全列 > ページ中央 > 左側 + (ul > li*9 > a)

右側の部分では、ul を囲むために div を使用する必要はありません。1 つの ul でこれを実現できることは明らかです。では、なぜ余分な div タグを使用してネストするのでしょうか。したがって、記述する際に、1 つのタグだけで問題が解決できる場合は、意味のない複数の階層のネストされたタグを使用しないでください。

2 命名について

Java を勉強していたとき、英語があまり得意ではなかったため、ピンインを使って名前をつけるのが好きでした。これは良い考えではありませんでした。勉強を始めた当初はそれを知っていたものの、あまり気にしていませんでした。周りの人からの注意や、特に私自身がピンインの使用に不便さを感じたため、自分自身を訂正し、今後は命名にもっと注意を払うつもりです。英語が得意でなくても大丈夫です。Youdao や Baidu はまだあるのではないでしょうか?

もう 1 つは、タグがネストされている場合の命名です。一般的に、同じレベルのタグの命名は大きな問題ではなく、1 つの単語のみを使用する必要があります。ただし、ネストが発生する場合は、「-」を使用して接続する必要があります。そうしないと、どのラベルがどのラベルであるかを混乱しやすくなります。例えば、上の一番上の列はtop、右側はtop-right、最後にtop-right-detail-linkと名付けることができます。長すぎる場合はtop-rd-linkと省略できます。それでも長すぎる場合はtrd-linkと省略することもできます。長すぎる場合にのみ省略されていることに注意してください。短い場合は、意味の理解を確実にするために省略する必要はありません。また、最後の単語は理解のために省略しない方がよいでしょう。

3 特殊記号の使用

上のドロップダウン矢印はダイヤモンド記号 ◇ を使用して作成され、ネストされた書き込みには 2 つのタグが使用されています。

 < i >< s > ◇ </ s ></ i >

s タグは position を使用して表示する必要がある部分の位置を制御し、i タグはウィンドウのサイズを制御してオーバーフロー部分を非表示にします。

CSSコードコンテンツをクリップボードにコピー

i {
幅: 15px ;
高さ: 8px ;
位置:相対的;
オーバーフロー:非表示;
}
は {
フォント: 400 14px / 14pxコンソール;
位置:絶対;
top : - 6px ;
}

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

XML/HTML コードコンテンツをクリップボードにコピーします

<!DOCTYPE html >
<html>
<ヘッド lang = "ja" >
<メタ文字セット= "UTF-8" >
<タイトル>テスト</タイトル>
<スタイル>
i {
表示: インラインブロック;
高さ: 50px;
幅: 100px;
オーバーフロー: 非表示;
フォント: 400 100px/0px SimSun;
}
</スタイル>
</ヘッド>
<本文>
< i > ◇ </ i >
</本文>
</html>

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

現在、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 つありますが、最も一般的な方法は疑似要素を使用することです。

CSSコードコンテンツをクリップボードにコピーします。clearfix

:before、.clearfix:after {
コンテンツ： "" ;
表示: テーブル;
}
.clearfix:after {
クリア:両方;
}
.clearfix {
*ズーム: 1; /*IE/7/6*/ /*IE6と互換性あり*/
}

7 高さを設定します。

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

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

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

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

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

CSS コードコンテンツをクリップボードにコピー

* { margin : 0; padding : 0; color : #fff ; font-size : 20px ; }
.nav { height : 30px ; background-color : pink; border-bottom : 4px 固体 div : red ; }
.w { width : 100px ; margin : 0 100px ; position : relative ; height : 30px ; z-index : 1; }
.nav-list { height : 30px ; background-color : red ; }
.left { width : 100%; height : 400px ; background-color : peru; position : absolute ; }
.b { margin-left : 210px ; width : 100px ; height : 100px ; background-color : lightblue; position : relative ; }

XML/HTML コードコンテンツをクリップボードにコピー

< div クラス= "nav" >
< div クラス= "w" >
< div class = "nav-list" >リスト</ div >
< div class = "nav-list" >リスト</ div >
< div class = "nav-list" >リスト</ div >
< div class = "nav-list" >リスト</ div >
< div class = "nav-list" >リスト</ div >
</div>
</div>
< div クラス= "left" >左</ div >
< div クラス= "b" > b </ div >

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

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

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

CSSコードコンテンツを