視覚表現理論の知識の紹介

視覚的なパフォーマンスを一つずつ実装するのではなく、ようやくページの全体的なレイアウトを把握できるようになった気がします。

以下は、自分の経験の少なさにふと気づいた女性男性の雄叫びです

あ、今気づきましたが、widthはコンテンツ領域の幅に設定されており、paddingやmarginを追加すると全体の幅が大きくなります。

あああああああ、コンテンツエリアと左右の余白だけ自動設定できることを今日知りました！ ！ ！ ！

1 関連用語

• フロー: すべての要素がフロー内に配置され、ページが表示されると、要素が 1 つずつ画面に流れてきます。流れ。要素が

  フロート または 配置 の場合、その要素はフローから切り離されます

• 非置換要素: 段落など、例を使用することをお勧めします

• 置換要素: 画像など

• ブロック レベル要素: 段落、タイトル、p などは、流入後に改行を生成します。 display: block; を使用すると、要素が改行なしでブロックレベルのボックス

• インライン要素を生成できるようになります。 要素がボックスを生成できるようにするには、display: inline; を使用します

• root element: html

  
  

2 auto

2.1 水平方向: コンテンツ領域の幅と左右のマージンのみを auto

に設定できます

• 1 つの自動: 残りのスペースをすべて占有します

• 2 つの自動: 一般にマージンが使用され、コンテンツ領域が中央に配置されます

• 3 つの自動: マージンが 0 の場合、コンテンツ領域は最も広いスペースを占有します

2.2 垂直: コンテンツ領域の高さと上下のマージンのみを自動に設定できます

• 通常のフローでは、上下のマージンは自動に設定されており、水平方向のように中央に配置されるのではなく、自動的に 0 に計算されます
  

3 margin

padding では、margin と border のうち、margin のみが負の値に設定できます。また、

margin が負の値に設定すると、padding + margin + border の合計が親要素の幅になる必要があります。これは非常に重要です。 そうです、私はこれまでこれを知りませんでした...なぜこんなに多くの重要な知識ポイントを見逃していたのだろうと思います...幸いなことに、今はそれを補うことができました、権威あるガイドに感謝します~~

4 ディスプレイ役割変換

リスト要素を縦線で区切られた横棒として使いたいです

• display: inline;

• 次に、すべてのリスト要素に右枠を追加し、最初のリスト要素に左枠を追加するだけです境界線

垂直サイドバーとしてレイアウトしたい場合は、いくつかのリンクをpに入れてください

• display: block;

いくつかのスタイルを追加して、美しい垂直ナビゲーションバーとして表示してください

もしそれを入れたい場合は行 ブロック構造

• display: inline-block;

を挿入すると、垂直ナビゲーション バーのようなものが行に挿入されます。このブロックの幅が設定されていない場合は、行

run-in

• display: run-in;

  に適応します。

もちろん、これを使用するには制限がありますが、後続の要素がブロックレベル要素である場合にのみ、そのブロックレベル要素の先頭にある inline 要素に変換されます。

以上が視覚表現理論の知識の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。