インライン要素とブロックレベル要素間の変換に関する詳細なチュートリアル

2015年1月5日、北京のインターネットスタートアップ企業に面接に行きました。採用欄にはWebフロントエンドの実務経験を積んでほしいと書かれていました。 . 私は自分自身に依存していました 私が持っているこの小さなスキルは、自分の能力を過大評価しています。その結果、面接官は私が経験したことのある多くの質問をしましたが、残念なことに、私はそれらの知識点については一般的に理解していましたが、それらの知識点を実際に応用することについてはほとんど知りませんでした。面接中、私はいつも人の時間を無駄にしていると感じていたので恥ずかしかったです。

この質問は、インタビュアーがボックスモデルについて私に尋ねたときに生まれました。よりわかりやすく説明するために、私はインライン要素の例を挙げました。とブロックレベルの要素は「インライン」と呼ばれていましたが、要素とブロックレベルの要素はどのように変換できますか?」と尋ねるのは恥ずかしいです。 <a href="http://www.php.cn/wiki/927.html" target="_blank">display<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>，于是，我找了有关书籍，看了几个网站的源代码，再来总结一番。

---

• 块级元素与行内元素

• 块级元素会扩展到与元素同宽。

• 行内元素会“收缩包裹” 其内容，并且会尽可能包紧。
  （以上这两个总结，来自于《css设计指南》这本书）

• 其默认css样式

• 块级元素其高度为其内容高度，宽度会扩展到与父元素同宽。所以导致块级元素会独占一行，无法在其后容纳其他块级元素与行内元素。

• 行内元素其高度为其内容高度，宽度会收缩包裹其内容。奇怪的一点：行内元素之间有一定的距离，使用控制台看的时候，并没有把这段距离算作盒子模型。我使用<a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>:0;padding:0并不会清除这段距离，？？求告知！

• css修饰

• 替换元素：替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。如浏览器会根据<img>src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容;又如由<input>的type属性来决定是显示输入框，还是单选按钮等。引自这里

• 非替换元素：如p a span p这些，即其内容直接表现给用户端（例如浏览器）。
  所以行内元素也就分为行内替换元素img input,与行内非替换元素span a…对于二者css修饰起来是有差别的。

• 行内非替换元素：其宽高设置无效， 对于内外边距，边框，可以设置，但是垂直方向的设置并不会影响文档流布局，所以设置垂直内外边距是没有效果的，垂直边框，我们是看得见，但是垂直边框并不占据文档流 。所以上面的行内元素设置了宽度为10px的边框，并不会导致下面元素的向下移动。

• 行内替换元素，除了具备行内元素同行并列的特点，他可以设置影响文档流布局的内外边距以及宽高。 且设置高度等同于设置行高，会垂直居中

• line-height 行内非替换元素虽然不具备宽高，但是可以利用line-height と答えたばかりなので、関連する本を探して読みました。いくつかのWebサイトのソースコードを入手したのでまとめてみましょう。

  ---
• ブロックレベル要素とインライン要素
• ブロックレベル要素は要素の幅まで拡張されます。

  
  インライン要素は、コンテンツを「シュリンクラップ」し、できるだけしっかりと包みます。

  (上記の 2 つの要約は書籍「CSS デザインガイド」からのものです)

• 
  

  そのデフォルトの CSS スタイル

• ブロックレベル要素の高さはそのコンテンツの高さであり、その幅は親要素と同じ幅に拡張されます。その結果、ブロックレベル要素は独自の行を占有し、その後ろにある他のブロックレベル要素やインライン要素を収容できなくなります。

  🎜🎜🎜インライン要素の高さはそのコンテンツの高さであり、その幅は縮小してコンテンツを包み込みます。奇妙な点: インライン要素間には一定の距離がありますが、コンソールを使用して表示すると、この距離はボックス モデルとしてカウントされません。 <a href="http://www.php.cn/wiki/931.html" target="_blank">margin🎜:0;padding:0</a> を使用していますが、これはクリアされません段落の距離、? ?私にお知らせください！ 🎜🎜🎜🎜🎜cssの変更🎜🎜
  🎜🎜置換要素: 置換要素はブラウザが要素のタグと属性🎜 を使用して、要素の特定の表示コンテンツを決定します。たとえば、ブラウザは <img>の値に基づいて src 属性。"_blank">画像 🎜 情報は表示されますが、(X) HTML コードを表示すると、画像の実際の内容は表示されません。別の例として、<input> 入力ボックス、またはラジオ ボタン🎜 など。ここから引用🎜🎜🎜🎜非置換要素: p a span p など、つまり、コンテンツはクライアント (ブラウザなど) に直接表示されます。 🎜そのため、インライン要素は、インライン置換要素 img input と、インライン非置換要素 span a に分割されます。この 2 つは CSS の変更に違いがあります。 🎜🎜🎜🎜 インラインの非置換要素: 幅と高さの設定は無効です。内側と外側のマージンと境界線を設定できますが、垂直方向の設定はドキュメント フロー レイアウトに影響しないため、垂直方向の内側と外側のマージンを設定しても効果はありません。垂直方向 境界線は見えますが、垂直方向の境界線は文書の流れを占めません。したがって、上記のインライン要素は幅 10px の境界線を設定します。これにより、下の要素が下に移動することはありません。 🎜🎜🎜🎜インライン置換要素は、インライン要素を並置する機能に加えて、ドキュメント フロー レイアウトに影響を与える内側と外側の余白、幅と高さを設定することもできます。 高さの設定は行の高さの設定と同じであり、垂直方向の中央に配置されます🎜🎜🎜🎜line-高さ🎜 インライン非置換 要素には幅と高さがありませんが、line-height を使用して高さを設定できます。ただし、奇妙なことに、行の高さは文書の流れに影響を与える可能性があります。インライン要素のレイアウトでは、その境界線は行の高さによる上下のマージンを無視してコンテンツを包み込みます。 🎜🎜🎜🎜margin インライン要素のマージン。マージされません (置換されません)。ブロックレベルの要素とは異なり、上下左右のマージンが結合されます。 🎜🎜🎜🎜ブロックレベル要素の高さと幅を設定でき、境界線、内側と外側の余白も設定でき、設定結果はドキュメントフローのレイアウト効果に影響します。 🎜width🎜を変更しても、その下のインライン要素は上に移動しないことに注意してください。 🎜🎜🎜🎜インライン要素、インライン要素の高さは設定できますか?もちろん違います！もちろん、この答えは絶対的すぎます。 🎜要素は置換要素と非置換要素に分かれています。置換される要素のほとんどはインライン要素です。 🎜🎜🎜🎜🎜インライン要素とブロックレベル要素間の変換🎜

• display:none; は要素を表示せず、要素が元々占めていたドキュメント フローの位置も保持しません。

• display:block;ブロックレベルの要素に変換します。

• display:inline; インライン要素に変換します。

• display:inline-block;インラインブロックレベルの要素に変換します。
  上記の 4 つは私がよく使うものですが、実際には他にもたくさんあります

  display:block; と display:inline; を使用すると、2 種類の要素実現形式を簡単に変換できます。
  ただし、インライン要素またはブロックレベルの要素を変換するために、display:inline-block; を使用する必要がある場合がよくあります。ただし、この要素はcss2の新たに追加された属性であり、IE7未満のバージョンではサポートされていないため、何らかの互換性のあるメソッドが必要です。近いうちに記事を書きます

• display

  ブロックレベル要素のデフォルトは、display:block; インライン非置換要素 (a、span) のデフォルトは、display:inline;; (入力) デフォルトは、display:inline-block;display
  块级元素默认display:block;行内非替换元素(a,span)默认为display:inline;；行内替换元素(input)默认为display:inline-block;

• <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>
  当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白，

• <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>
  

<a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>
code>
• Dang インライン要素を float に設定します:left

  /right
  、インライン要素の表示属性にはブロック値が割り当てられ、フローティング 機能。インライン要素間の不可解な空白が削除されます。

  <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>

  インライン要素を配置する場合は、position:absolute、position:fixed を使用します。元のインライン要素がブロックレベルの要素になります。

【注意】上記の設定により、インライン非置換要素の幅、高さ、内外マージンを設定できます。ただし、置換する場合は、ブロック レベルの要素への変換は、float とposition の副作用にすぎず、それら自体の効果もレイアウト効果に干渉することに注意する必要があります。

以前ブロックレベル要素を紹介したとき、ブロックレベル要素の幅はその親要素を

継承すると言いました。ただし、この効果は、display:block が inline 要素に設定されている場合にのみ発生します。他の変換では、デフォルトではこの効果は発生しません。

お友達が自分で エディタ に入力して比較することをお勧めします。そうすると、彼らは感銘を受けるでしょう。

【関連おすすめ】🎜🎜1. 🎜無料のHTMLオンラインビデオチュートリアル🎜🎜🎜2. 🎜php.cnオリジナルのHTML5ビデオチュートリアル🎜🎜

以上がインライン要素とブロックレベル要素間の変換に関する詳細なチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。