html 水平レイアウト_html/css_WEB-ITnose

HTML のブロックレベル要素はデフォルトで垂直に配置され、インライン要素は基本的にレイアウトで使用されます (div やその他の一般的なブロックレベルのタグ)。ブロックレベルの要素 要素が水平方向にも配置されている場合はどうなるでしょうか?

ここでは 5 つの方法を要約し、これら 5 つの方法の具体的な実装と考えられる問題について簡単にまとめます。

方法１：display: inline-block

まず、ブロック要素(block要素)、インライン要素(inline要素)、インラインブロック要素(inline-block要素)を理解する必要があります

ブロックレベル要素 : ブロックレベル要素には、width height、padding、border、margin が含まれます。一般的なブロックレベル要素には、div、p、form、ul などが含まれます。その他のブロックレベル要素については、を参照してください。 MDN を確認してください https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

インライン要素: 高さと幅はコンテンツによって決まり、固定サイズを設定することはできませんそれら自体は存在しません。インライン要素は、a、span、label、button、img、input など、水平方向に配置されます。その他のインライン要素については、を確認してください。 MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

ここで疑問を持たれた方もいるかもしれませんが、「Button、img、input タグでは幅と高さ、マージンとパディングを設定できます。それはなぜですか? インライン要素はどうですか? 「実は、html 要素を分ける方法は主に 2 つあり、「ブロックレベル要素とインライン要素」と「置換可能な要素と置換不可能な要素」です。最初の分割方法は上で紹介され、2 番目の分割方法は以下で紹介されています。

置換要素: 一般的な理解は、幅と高さの属性を持つ要素です。置換要素は、display:block 要素に似ており、高さ、幅、内側と外側のマージンを設定できます。これには、主に img、input、textarea、select、object、audio、および Canvas が含まれます。交換要素。より正式な定義 https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

Non-replaceable elements: 置換された要素を除き、残りは置換不可能な要素です (O(∩) _∩ )O)

たくさん話し合った結果、display: inline-block は要素を水平に配置できることがわかりましたが、このレイアウトにはいくつかの小さな問題がある可能性があります。たとえば、次のとおりです。 2 つの div の間にギャップがあるのはなぜですか? 2 つのタグの間に改行があるため、ブラウザは 2 つの div の間に改行を表すスペースを追加します。このスペースのサイズは font-size/2 です。 div2 の margin-left:-font-size/2 を設定することも、2 つの div の親タグの font-size:0 を設定することもできます。これは単なる紹介です。具体的な詳細については、Zhang Xinxu の記事ブログ http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4 をご覧ください。 %E9%97%B4%E8%B7%9D /

方法 2: float: left/right

float 属性を使用すると、要素を通常のドキュメント フローから切り離して、左側または右側に沿って水平に配置できます。コンテナの。

この方法は最もよく使われる方法と言えますが、アダプティブ レイアウトでは一般に要素の高さと幅が固定されず、コンテンツのサイズに応じて自動的に調整されるという問題があります。要素はすべて浮動要素です。高度な崩壊が発生します。 A栗

<style>        div{            display:inline-block;    width:200px;    height:200px;        }        .div1{            background:green;        }        .div2{            background:red;        }</style><div class = "div1">左边</div><div class = "div2">右边</div>

まず第一に、前の栗の div を意図的に span に変更しています。実際、float が要素をブロック要素 (position:absolute/fixed も) に暗黙的に変換できることを表現したいのです。はい）、幅と高さを自然に設定できます。

それでは、ボックスを水平に並べた後、何が問題になるのでしょうか?はい、親コンテナは高度に折りたたまれています。このとき、親コンテナの div の高さは 0 です。これは、フローティング要素が通常のドキュメント フローから外れ、親コンテナが高さを計算するときに無視するためです。これは私たちが見たくないものです

解決策は当然、親 div で overflow:hidden を設定するか、最後の子要素の後に空のタグを追加して、そのスタイルをクリアに設定することです。 ：両方。 float をクリアするその他の方法については、Baidu「css clear floats!!!!!!」を参照してください。

方法 3: テーブル レイアウト

このレイアウト方法は、さまざまな問題があるため、実際にはあまり使用されません。

・レンダリング速度が遅い ・HTMLのコード量が増え、メンテナンスが大変になる

・ラベルの名前がHTMLのセマンティクスに準拠していない テーブルは本来テーブルに使用されるものなので不適切です。レイアウトに使用するため

・ラベル構造が比較的小さい くそー、後の修正コストが高い

など、ここではあまり詳しく説明しません。つまり、テーブル レイアウトを使用しないでください

方法 4: 絶対配置

この方法は日常の開発でもよく使われます。前述したように、Float は要素を通常のドキュメント フローから切り離すことができます。この処理方法も、Float レイアウトで説明したとおりです。ここに移動します。

ここで、position:absolute の絶対位置決めについてお話したいと思います。位置決めは最初の親と、position:absolute/relative/fixed で位置決めされた要素に基づいて行われます。それが見つからない場合は、ルート要素に基づいて配置されます。一般に、親要素のposition:ralativeは、子要素のposition:absoluteと組み合わせて使用​​されます。

方法 5: CSS3 Flexible Layout

HTML5 の新機能は、機能が強力すぎて互換性が悪すぎるため、今は制御できませんので、あえて恥をさらすつもりはありませんが、ただし、w3cplus にはそれに関する記事があります。興味がある場合は、http://www.w3cplus.com/css3/using-flexbox-today.html を参照してください。

柔軟なレイアウトは互換性のせいであまり広く認識されていませんが、私が楽観視している HTML ビデオ プレーヤーと同じように、将来的には間違いなくトップに立つと思います。遅かれ早かれ Flash を倒すことになるでしょう。時間の問題だ！ ！ ！

上記は私が知っている水平レイアウトを実装する 5 つの方法です。実際、各方法は氷山の一角を説明して説明しており、ブラウザーの互換性についてはあまり考慮していませんでした。それがあなたの役に立つことを。

間違いがあれば修正してください、ありがとうございます