インライン要素とブロックレベル要素とは何ですか? _html/css_WEB-ITnose

1. インライン要素とブロックレベル要素とは何ですか?

ブロックレベル要素

< ;hr>水平ルール挿入テキスト

fieldset legend

リストアイテム<地図>クライアント側イメージマップ<td> </td>非フレームベースレンダリング用の代替コンテンツコンテナ<td> </td> </tr> <tr><noscript><td> </td>非スクリプトベースレンダリング用の代替コンテンツコンテナ<td> </td> </tr> ;<tr> <td>汎用埋め込みオブジェクト</td> <td> </td><ol></tr> <tr>順序付きリスト<td> </td> <td> </td><p></tr> <tr>段落<td> </td> <td> </td><pre class="brush:php;toolbar:false"></tr> pre書式設定されたテキスト<tr> <td> </td> <td><表></td> </tr>テーブル<tr> <td> </td> <td><tbody></td> </tr>テーブル本体<tr> <td> </td> <td>&lt </td> gt;</tr> <tr>テーブルヘッダ<td> </td> <td> </td><tr></tr> <tr>テーブル行<td> </td> <td> </td><ul></tr> <tr>順序なしリスト<td> </td> <td> <p>行内元素</p> <table> <tr> </tr> <tr> <td><a></td> <td>アンカー</td> </tr> <tr> <td><abbr></td> <td>省略形</td> </tr> <tr> <頭字語><td> </td>頭字語<td> </td> </tr> <tr><b><td> </td>太字テキストスタイル<td> </td> </tr> <tr><bdo><td> </td>I18N BiDi オーバーライド<td> </td> </tr> <tr><big><td> </td>大きなテキストスタイル<td> </td> </tr> <tr><br><td> </td>強制改行<td> </td> </tr> <tr><ボタン&gt ;<td> </td>プッシュボタン<td> </td> </tr> <tr><cite><td> </td>引用<td> </td> </tr> <tr><code><td> </td>コンピュータコードの断片<td> </td> </tr> <tr><del><td> </td>削除されたテキスト<td> </td> </tr> <tr><dfn><td> </td>インスタンス定義<td> </td> </tr> <tr><em><td> </td>強調<td> </td> </tr> <tr><i><td> </td>斜体テキストスタイル<td> </td> </tr> <tr><iframe><td> </td>インラインサブウィンドウ<td> </td> </tr> <tr><img><td> </td>埋め込み画像<td> </td> </tr> <tr><input><td> </td>フォームコントロール<td> </td> </tr> <tr><ins><td> </td>挿入テキスト<td> </td> </tr> <tr><kbd><td> </td>ユーザー<td> </td> </tr> <tr><ラベル> <td> </td>フォームフィールドラベルテキスト<td> </td> </tr> <tr><map><td> </td>クライアントサイドイメージマップ<td> </td> </tr> <tr><object><td> </td>汎用埋め込みオブジェクト<td> </td> </tr> <tr><q&gt ;<td> </td>短いインライン引用<td> </td> </tr> <tr><samp><td> </td>サンプルプログラムの出力、スクリプトなど<td> </td> </tr> <tr><select><td> </td>オプションセレクター<td> </td> </select></tr> <tr><small><td> </td>小さいテキストスタイル<td> </td> </tr><スパン><tr> <td>汎用言語/スタイルコンテナ</td> <td> </td> </tr><strong><tr> <td>強い強調</td> <td> </td> </tr><sub><tr> <td>下付き文字</td> <td> </td> </tr><sup><tr> <td>上付き文字</td> <td> </td> </tr><テキストエリア></tr> <tr> <td>マルチ-line テキストフィールド</td> <td> </td> </tr><tt><tr> <td>テレタイプまたは等幅テキストスタイル</td> <td> </td> </tr><var><tr> <td>変数またはプログラム引数のインスタンス</td> <td> </td> <p><strong> 2. インライン要素とブロックレベル要素の違いは何ですか? </strong></p> <p><strong>1.</strong><strong>サイズ - ブロックレベル要素とインライン要素の重要な違い</strong></p> <p><strong>インライン要素と幅</strong></p> <p>W3C CSS2 標準では、width 属性はインライン要素と非要素には適用されないと規定しています。 -置換された要素。 </p> <p> 次の例では、width:200px がインライン要素 <a> に適用されていますが、まったく効果がありません。 </p> <p></p> <p><strong>インライン要素と高さ</strong></p> <p>W3C CSS2 標準では、インライン要素と非置換要素には height 属性が適用されないと規定されていますが、ボックスの高さは line-height で指定できます。 </p> <p>次の例では、インライン要素 <a> に height:50px を適用しています。効果がないことがわかります。 </p> <p></p> <p><strong>インライン要素とパディング</strong></p> <p>インライン要素にパディングを設定できますが、有効になるのはpadding-leftとpadding-rightのみです。 </p> <p>次の例では、padding:50px がインライン要素 <a> に適用されます。左右のコンテンツには影響しますが、上下には影響しないことがわかります。 </p> <p></p> <p><strong>インライン要素とマージン</strong></p> <p>margin 属性も、padding 属性と同じです。インライン要素の左右には有効で、上下には無効です。 </p> <p>以下の例では、margin:50px が <a> に適用されていますが、左端と右端は有効ですが、上下のコンテンツは無効であることがわかります。 </p> <p></p> <p> インライン要素の幅を設定 </p> <p> しても効果がないことに注意してください。 <br>高さの設定は無効ですが、line-height を通じて設定できます。 <br>マージンの設定は左右のマージンのみ有効で、上下のマージンは無効です。 <br>パディングを設定します。左右のパディングのみが有効で、上下のパディングは無効です。要素の範囲は増えていますが、要素の周囲のコンテンツには影響しないことに注意してください。写真を見るだけで効果がわかります </p> <p>上記の部分は http://www.maxdesign から翻訳されています。 com.au/presentation/inline/ </p> <p> </p> <p><strong>2. text-align 属性は、2 つのパフォーマンスの違いです </strong></p> <p> Text-align については、W3C CSS2.1 仕様のセクション 16.2 で詳しく説明されています。 ----- ----------------------------------<br>値: 左揃え | 中央揃え |継承<br>初期値: 「方向」の値によって決定される匿名値。「方向」が「ltr」の場合は「左」、「方向」が「rtl」の場合は「右」です。 <br>適用対象: ブロックレベル要素、テーブルセル、インラインブロック要素 <br>継承: あり <br>計算値: 初期値または指定された値<br>------ --- -----------------------<br><br> この機能では、ブロック要素の<br>インラインコンテンツ<strong>を配置する方法について説明します。 </strong> 標準では、この属性は <br>インライン コンテンツ <strong> を整列させるために使用されるため、ブロック レベルのコンテンツでは </strong> 機能しない<strong> とされていることに注意してください。 </strong> 説明すると、<br>インライン コンテンツ<strong> は、</strong> インライン要素<strong> で構成されるコンテンツを指します。SPAN 要素、IFRAME 要素、要素スタイルの 'display: inline' などのインライン要素はすべて </strong> ブロック レベルで構成されます。 DIV は最も一般的に使用されるブロック レベル要素です。ブロックレベル要素とインライン要素の違いは、ブロックレベル要素は 1 行に表示されるのに対し、インライン要素は 1 行に並べて表示できることです。 <strong> このようにして、この機能についての理解が明確になるはずです。ただし、標準ではこれが規定されていますが、すべてのブラウザがこれに準拠しているのかという疑問が生じます。答えは否定的です。どのブラウザがとてもユニークだと思いますか?いえ！ ！ </strong> <br> IE6/7 および IE8 混合モードでは、text-align:center はブロックレベルの要素を中央揃えにできます。他のブラウザでは、text-align:center はインライン コンテンツでのみ機能します。 <br><strong> この問題を解決するより良い方法は、親コンテナを基準にして中央に配置する必要があるすべてのブロックレベル要素に「margin-left:auto; margin-right:auto」を設定することです。ただし、IE6/IE7/IE8の混合モードではこの方法はサポートされていないため、親コンテナの「text-align:center;」を設定する必要があります。 </strong> <br> 中央揃えの子要素内のインライン コンテンツを中央揃えにする必要がない場合は、それに「text-align:left」を設定する必要もあります。 </p> <p></p> <p class="sycode"></p> </tr> </table> </td> </tr> </table></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="iPhone_html/css_WEB-ITnose の CSS3 メディア クエリ" href="https://m.php.cn/ja/faq/274961.html">iPhone_html/css_WEB-ITnose の CSS3 メディア クエリ</a></span><span>次の記事：<a class="dBlack" title="iPhone_html/css_WEB-ITnose の CSS3 メディア クエリ" href="https://m.php.cn/ja/faq/274963.html">iPhone_html/css_WEB-ITnose の CSS3 メディア クエリ</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>

<アドレス>	作者情報
	長い引用
<ボタン>	プッシュボタン
< ;caption>	表キャプション
	定義の説明
	削除されたテキスト
	汎用言語/スタイルコンテナ
lt;form>	インタラクティブフォーム
	見出し
	見出し
	見出し
	見出し
	見出し
	見出し