CSS表示の簡単な分析attribute_html/css_WEB-ITnose

CSS の旅を続けましょう。今日は何について話しますか?構想から 2 日が経過しても、まだ何もわかりませんが、学習のペースを止めることはできません。前回の計画に従って表示について話しましょう。これについて話す前に、私たちはまだ古いルールに従い、あまり大きな一歩を踏み出すことはできません。これ以上ナンセンスなことはありません。
みんなに質問はありますか？ブロックレベルの要素と行レベルの要素をご存知ですか?

ブロックレベル要素とは何ですか? (div) はブロックレベルの要素です。行レベルの要素とは何ですか? （スパン）それらの違いが分かりますか？ 上の写真

おそらく、人々は直接の違いに特別な注意を払っていないことがあります。それぞれの具体的な機能について説明します:

ブロックレベル要素:

1: ブロックレベル要素は単独で行を占有し、その幅は親要素の幅を自動的に埋めます

2: ブロックレベル要素幅と高さの属性を設定できます。 [注: ブロックレベル要素の幅を設定しても、排他的な行を占有します]

3: ブロックレベル要素にマージンとパディングを設定できます。 ... 変更点

2: インライン要素の幅と高さの設定は無効です

3: インライン要素の水平方向の padding-left、padding-right、margin-left、および margin-right はすべてマージン効果を生成しますが、垂直方向はpadding-Top、padding-bottom、margin-top、margin-bottomはマージン効果を生成しません。つまり、水平方向には有効で、垂直方向には無効です

。
前に簡単なことを言いましたが、今ではそれらの違いがわかります。ここで追加する必要があるのは、この要素は別のものであり、可変要素であるということです。それが何であるかを判断する方法 (可変要素は、ブロックであるか行であるか、コンテキストのコンテキストに従って決定する必要があります

) 平たく言うと、

ブロックレベルの要素は、通常、Webサイトのアーキテクチャ、レイアウト、コンテンツを運ぶ インライン要素は通常、Web サイト コンテンツの

特定の詳細や部分

を「スタイル、上付き文字、下付き文字、アンカー ポイントを強調、区別する」ために使用されます。

非常に多くのことが、私たちがこれから話そうとしていることに半セントも関係しているとあなたは言いました。では、これから私たちが話そうとしていることにどれだけ関係があるのか​​について話しましょう。それが重要かどうかは関係ありません。関係ないならこんなこと言って何の意味があるの？

実際、HTML ページ全体は単なる行レベルとブロック レベルではなく、display:inline|block を通じて相互に変換できるということです。 . これで、それらの間の関係がわかりました。

関係がある以上、私たちは彼らの直接的で深い関係に適切に対処する必要があります。とても興奮していますか？ 実際、それらの関係は非常に複雑です。さらに詳しく知りたい場合は、本を読むことをお勧めします

次に、ディスプレイについて話しましょう。それらの属性について 1 つずつ説明することはできません。実際に私たちがよく話す重要な属性である none、block、inline、および inline-block について説明しましょう。

(1): インライン

これは、テキストや画像でよく使用されます。液体の特徴は、形状やサイズがないことです。そのサイズは、それが置かれる容器によって完全に決まります。

実際、ブロックと行は相互に切り替えることができますが、問題があります:

この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメント タイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため、危険です。文書の構造が崩れてしまいますので、ご注意ください。

私が彼のために高さと幅をデザインしたい場合、誰が尋ねますか?

実はこれ？次の章で紹介します。まずは効果をご紹介します。 float 属性がないことを認識する方法

インライン要素の特徴:
と他の要素は同じ行にあります。
高さ、行の高さ、上下の余白は変更できません。
width はテキストまたは画像の幅であり、変更できません。かわった。

(2) ブロック:

上のスクリーンショットと何が違うと思いますか?コンテンツの幅?見たことがありますか。先ほどの彼の幅と高さの違いが理解できましたか？実際、私の理解では、Block はボックス モデルであり、ボックス モデルの特性に完全に従う必要があります。理解できない場合は、前のセクションを参照してください。ありがとうございます

ブロック機能

常に新しい行から開始します
高さ、行の高さ、および上下の余白はすべて制御可能です
幅が設定されていない限り、幅はコンテナの 100% にデフォルト設定されます

太字の部分に注目してください。

(3): inline-block:

inline-block は、名前が示すように、インラインとブロックの両方の特性を備えています。通常のボタンと入力がどのようなものかを考えることができます。このボタンは例を示しています。ページにいくつかの を入力すると、それらが「フロー」スタイルで配置されていることがわかりました (複数の

の配置を比較できます)。ただし、ボタンの場合は、「ブロック」の特性を持つようにその形状をカスタマイズすることもできます。これらは、以前に説明した 4 つの異なる画像です。

彼の特徴がわかるかわかりません。ただ見た目が違うだけです。しかし、どこで使うのでしょうか？

1. ボタンとテキストが 1 行に配置されます

2. ボタン内のテキストの下が外側のテキストの下に自動的に揃えられる これはよく遭遇するシーンです。

実は、こういったものは由来を理解していれば本当に使えるのではないかと感じています。今後も更新される予定です。次回のブログ投稿も楽しみにしています。誰もがこれを知っているかどうかはわかりません。読んでくれてありがとう、ナンセンスがたくさんあります

参考: http://www.cnblogs.com/wangfupeng1988/p/4317153.html

http://dbear.iteye.com/blog/750950