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

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

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

块级元素与行内元素

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

其默认css样式

块级元素其高度为其内容高度，宽度会扩展到与父元素同宽。所以导致块级元素会独占一行，无法在其后容纳其他块级元素与行内元素。
行内元素其高度为其内容高度，宽度会收缩包裹其内容。奇怪的一点：行内元素之间有一定的距离，使用控制台看的时候，并没有把这段距离算作盒子模型。我使用<a href="//m.sbmmt.com/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="//m.sbmmt.com/wiki/931.html" target="_blank">margin🎜:0;padding:0</a> を使用していますが、これはクリアされません段落の距離、? ?私にお知らせください！ 🎜🎜🎜🎜🎜cssの変更🎜🎜

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="//m.sbmmt.com/wiki/919.html" target="_blank">float</a>
当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白，
<a href="//m.sbmmt.com/wiki/902.html" target="_blank">position</a>