CSS の本質はマクロな側面とミクロな側面に分けられます。 巨視的には、ページの表示スタイルを制御するために存在します。レイアウト、色、フォントなどを含みます。ミクロレベルでは、この制御機能を実現するさまざまな属性の定義と動作原理です。
定義がわかれば仕事ができるし、原理がわかれば仕事もうまくできる。
対象者は、属性が多すぎると述べました。実際、CSS はスタイルを制御するだけです。従来の新聞やその他の印刷物のレイアウトから借用したものです。身近な新聞や雑誌のページを見つけて、CSS を使用して可能な限り復元するだけです。全体的なレイアウトを復元することは大きな問題ではありませんが、細部となると、期待した効果と異なる場合が多々あります。ここで、個々の属性がどのように機能するかを見てみましょう。たとえば、マージンはマージンを制御するために使用されますが、% を使用した場合、最終的な値はどのように計算されるのでしょうか。予期しないものを見つけた場合は、属性の定義と値の計算方法を確認してください。
よく使用される基本スタイルを図に示します。
ヒント:
よく使用される CSS 属性のマージンとパディングの % 値は、含まれるブロック (ブロック要素に最も近いレベルの祖先要素)。これは幅が広いことに注意してください。
インライン要素に関連するコンテンツエリア、インラインボックス、ベースラインの概念は非常に重要です。
inline-block は、内部的にはブロックレベルの要素として解析され、それ自体もインライン要素として解析されます。
background-image は、要素に複数の背景画像を同時に設定でき、background-position と組み合わせて魔法の効果を作成できます。
浮動要素はマージンの重複を排除し、浮動要素はブロックレベルの要素として解析されます。
top、right、bottom、left、z-index 属性は、位置決めされた要素 (静的な値を持つ位置を除く) で使用される場合にのみ有効です。
オーバーフローの値はスクロールに設定されており、モバイル端末上で水平スライド効果を実行できます。
テーブルレイアウトをテーブル以外に使用しないでください。
著者: Han Shuangli
リンク: https://www.zhihu.com/question/31317160/answer/85833065
出典: Zhihu