CSS についてどのくらい知っていますか (10) --display_html/css_WEB-ITnose

1. はじめに

Web ページの「ブロック」を除くすべての要素は「フロー」であり、「フロー」は「ブロック」の中に含まれます（最も外側のボディが「ブロック」です）。このシリーズの冒頭で「ブラウザのデフォルト スタイル」について話したとき、ブラウザのデフォルト スタイルがどの HTML 要素が「ブロック」に属するかを規定していることも誰もが理解しました (残りは「フロー」)。この部分の知識は非常に重要かつ基本的なものであるため、すべてのフロントエンド面接の質問で、どの要素が「ブロック」でどの要素が「フロー」であるかを尋ねられます。

実はこの部分の知識は表示形式の設定に含まれています。インターネットで表示のプロパティをすべて検索すると、たくさんのプロパティがあることがわかりますが、そのすべてが一般的に使用されているわけではなく、ほとんどのプロパティを使用したことがない場合もあります。学んだことは、必要ないなら学ばなくても大丈夫です。いつそれを詳しく学ぶのですか？そういうものがあるということを知っていないと始まらないということです。

上の写真を見てください。よく使用される属性は none、block、inline、inline-block、Inherit は親要素を継承するスタイルであることは言うまでもありません。その他については後で詳しく説明します。その他は一般的には使用されませんが、実際には「ブラウザのデフォルト スタイル」セクションで説明されているものもあります。詳細については、「ブラウザのデフォルト スタイル」セクションを参照してください。 。

1. list-item: li リスト スタイルをシミュレートできます。
2. table: これも「ブロック」ですが、ブロックと比較するとテーブルはラップされています。
3. table-cell: 最新の複数列レイアウト ソリューション。

2. インライン

一般的に使用されるインラインはテキストと画像です。実際、インラインについては何も言うことはありません。それは「流れ」であり、サイズや形状はありません。その幅は親コンテナの幅によって異なります。

したがって、インラインタグの場合、設定した幅と高さは無効です。監視を通じて、要素の実際の幅と高さが、設定した値ではなく自動であることがわかります。

非常に基本的な質問: インライン要素を「ブロック」要素に変換するにはどうすればよいですか?ほとんどの人の答えは「display:block」だと思いますが、これが唯一の答えではないことを知っておく必要があります。少なくとも、display:table を設定することはできますよね? (知らない場合は) さらに 2 つのケースを理解する必要があります:

まず、Float を設定します

効果を見てびっくり。表示効果と監視結果から判断すると、span要素は「ブロック」されています。前のセクションで float について説明し終えたところです。float の「破壊性」と「ラッピング特性」がここでも適用されることを忘れないでください。

2 番目に、inline

要素に Position:absolute/fixed

を設定します。今回は、デモンストレーション用に、span 要素に、absolute/fixed を追加します。効果があり、float を追加すると同じ効果があります。絶対/固定の特徴については、次のポジション紹介時に触れます。

3. ブロック

このシリーズには「ボックスモデル」に焦点を当てたセクションがあります。見たことがあるのか​​、すでにボックスモデルをよく知っているのかわかりません。 🎜 🎜 実際、ブロックに関しては「ボックスモデル」だと思います。要素をブロックに設定したら、ボックス モデルのルールに従う必要があります。したがって、ここでは詳しく書きません。ボックスモデルセクションにアクセスして詳しく見てください。 🎜 4. inline-block 🎜 このトピックは「ブラウザのデフォルト スタイル」セクションから開始する必要があります。ブラウザのデフォルトのスタイルでは、いくつかの HTML 要素が display:inline-block であることが規定されています。見てみましょう。 🎜 🎜 🎜 🎜 初心者はインラインブロックに慣れていないかもしれませんが、大丈夫です、ステップバイステップで従ってください。まず、インラインがどのようなものであるか、つまり一般的なテキストと画像であることを理解する必要があります。次に、ブロックがどのようなものであるか、つまり一般的な div であることを理解する必要があります。インラインとブロックの特性については、通常のボタンや入力がどのように見えるかを考えることができます。 🎜 🎜 あのボタンは一例です。ページにいくつかの を入力すると、それらが「フロー」スタイルで配置されていることがわかりました (複数の

の配置を比較できます)。ただし、ボタンの場合は、「ブロック」の特性を持つようにその形状をカスタマイズすることもできます。 🎜 🎜 🎜 🎜 したがって、inline-block の特徴は次のように要約できます: 外側からは「フロー」のように見えますが、それ自体は実際には「ブロック」です。みんなが理解できるか分かりませんが？ 🎜5. まとめ

『CSSデザインガイド』の本の表示に関する内容は1ページにも満たないと読みましたが、それは表示に関する内容がそれほど多くないことを反映しています。詳しく味わってみると、やはりとても興味深いです。ご意見がございましたら、メッセージを残して交換していただけます。

------------------------------------------------ -------------------------------------------------- -----------

私のチュートリアルへようこそ: 「デザインからパターンまで」「 JavaScript プロトタイプとクロージャ シリーズの深い理解」「Microsoft petshop4.0 ソース コード解釈ビデオ」 " "json2 .js ソース コード解釈ビデオ》

また、私のオープンソース プロジェクトのフォローも歓迎します??wangEditor、シンプルで使いやすい Web リッチ テキスト エディターです

---------- -------- -------------------------------------- -------- --------------------------------------

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。