インライン要素とブロックレベル要素について学ぶ_html/css_WEB-ITnose
インライン要素とブロックレベル要素の学習
@(css)[Miaotong]
CSS標準ドキュメントフロー:
「標準フロー」と呼ばれ、配置に関連する他の要素の使用を指しますCSSを使用しない配置と配置 CSSの特殊ルールとは、各種要素の配置ルールのことです。 HTML ドキュメント内の要素は、ブロック レベルの要素とインライン要素に分類できます。
ブロックレベルの要素: それらは常にブロックの形式で表現され、同じレベルの兄弟とともに垂直に配置され、左側と右側を埋めます。
インライン要素: インライン要素は別のスペースを占有せず、ブロックレベルの要素にアタッチされます。インライン要素には独自の領域がありません。これは DOM ツリー内のノードでもあります。この時点では、インライン要素とブロックレベル要素の間に違いはありません。インライン要素の幅と高さは設定できませんが、他のインライン要素と同じ行に配置できます。通常、インライン要素にはブロック レベルの要素を含めることはできません。インライン要素の高さは通常、要素内のフォント サイズによって決まり、幅はコンテンツの長さによって制御されます。一般的なインライン要素には、a、em、strong などが含まれます。
標準フローでボックスを配置する原則 (前回の記事を参照: ボックスモデルについて話しましょう)
(1) インライン要素間の水平方向のマージン
2 つのインライン要素が隣り合っている場合、間のマージンはそれらの距離は、最初の要素の右マージンに 2 番目の要素の左マージンを加えたものです。
(2) ブロックレベル要素間の垂直マージン
2 つのブロックレベル要素がすぐに隣接する場合、それらの距離は margin-bottom と margin-top の合計ではなく、2 つの大きい方になります。
(3) 入れ子のボックス間のマージン
div ブロックが別の div ブロックに含まれる場合、典型的な親子関係が形成されます。子ブロックのマージンは、親ブロックの内容に基づきます。
(4) マージンを負の値に設定します
マージンを負の値に設定すると、負の値に設定されたブロックは逆方向に移動したり、他のブロックを覆ったりします。
コードのデモは次のとおりです:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS</title> <style> ul{ border:1px solid red; } li{ border:1px solid green; } strong{ border:1px solid #000; } </style></head><body> <ul> <li>第1个列表的第1个项目内容</li> <li>第1个列表的第2个<strong>项目内容</strong>,内容更长一些， 目的是演示自动折行的效果。</li> </ul> <ul> <li>第2个列表的第1个项目内容</li> <li>第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行 的效果。</li> </ul> </body></html>ページ効果:
如上代码所示，其内容是body中有两个列表（ul），ul列表中又各有两个列表项目（li）。一共有四层，顶层为body，第二层为ul，第三层为li，第四层为文本。ul和li都为块级元素，而strong则为行内元素，从 DOM 的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点，而从 CSS 的角度来看，二者就有很多的区别，块级元素有属于自己的区域，而行内元素没有！就如页面效果图所示。标准流就是 CSS 规定的默认的块级无素和行内元素的排列方式。从body标记开始，依次把其中的子元素放到适当的位置。如果一个html更为复杂，层次更多，那么也和这个一样，直至所有的元素被检查一遍，分配到相应的区域。在这个过程，一个一个的盒子自然地形成一个序列，同级别的盒子依次排列在父级盒子中，就像一条河流有干流和支流一样，这就是被称为“流”的原因。
インライン要素の特徴:
ブロックレベル要素の特徴:
strong{ border:1px solid #000; line-height:50px; }ページ効果:
上記のように、line-heightの設定により、インライン要素の高さが大きく変化します。
strong の高さを設定すると、効果は次のようになります:
strong{ border:1px solid #000; height:50px; }ページ効果:
上記のように、インライン要素 Strong の高さは、高さの設定によって変更されていません。
コード:
li{ border:1px solid green; margin-left:20px; margin-right:20px; margin-top:20px; margin-bottom:20px; } strong{ border:1px solid #000; margin-left:20px; margin-right:20px; margin-top:20px; margin-bottom:20px; }ページレンダリング:
上記からわかるように、inline 要素strong では、margin-left と margin-right は有効ですが、margin-top と margin-bottom は無効です。ブロックレベル要素 li の場合、上下左右のマージンはすべて有効です。
コード:
li{ border:1px solid green; padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; } strong{ border:1px solid #000; padding-left:20px; padding-right:20px; padding-top:30px; padding-bottom:20px; }ページ画像:
上記のように、inline 要素strong の場合、padding-left と padding-right は有効ですが、padding-top と padding-bottom は無効で、upper と lower のみです。範囲は拡大されますが、他の要素の内容は変更されません。ブロックレベル要素 li の場合、上下左右のパディングは有効です。
インライン要素はすべて同じ行上に直線に配置され、水平に配置されます。
インライン要素の幅は無効、高さは無効（line-heightは設定可能）、上下のマージンが設定されていますは無効、上下のパディングは無効、ブロック レベル要素は有効です。
值： left | right | center | justify | inherit
継承: はい
计算后的值：初始值或指定值
这个特性描述了如何使一个块元素的行内内容对齐。
注意一点，标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。
解释一下，行内内容是说由行内元素组成的内容，比如 SPAN 元素，IFRAME元素和元素样式的 ‘display : inline’ 的都是行内元素；块级内容跟则是由块级元素构成，DIV 是最常用的块级元素。块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。
这样，我们对这个特性的认识应该就清楚了。但是，虽然标准里这么规定，那么是不是所有浏览器都遵守呢？答案是否定的。
IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
解决上面的问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 "text-align:center;"。若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> body{ width:800px; border:1px solid #000; } div.wrapper{ /*margin:0 auto;*/ width:500px; border:1px solid red; text-align: center; } div.box1{ border:1px solid red; } div strong{ border:1px solid green; } </style> </head> <body> <div class="wrapper"> <div class="box1"> <strong>我是行内元素</strong> </div> <p>我是块级元素</p> </div> </body> </html>页面：
IE8/Firefox/Chrome/Safari/Opera:
IE6/IE7:
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> body{ width:800px; border:1px solid #000; } div.wrapper{ margin:0 auto; width:500px; border:1px solid red; } div.box1{ border:1px solid red; text-align:center; } div strong{ border:1px solid green; } </style> </head> <body> <div class="wrapper"> <div class="box1"> <strong>我是行内元素</strong> </div> <p>我是块级元素</p> </div> </body> </html>IE8/Firefox/Chrome/Safari/Opera:
IE6/IE7：
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS</title> <style> body{ width:800px; border:1px solid #000; } div.wrapper{ margin:0 auto; width:500px; border:1px solid red; text-align:center; } div.box1{ border:1px solid red; } div strong{ border:1px solid green; } </style></head><body> <div class="wrapper"> <div class="box1"> <strong>我是行内元素</strong> </div> <p>我是块级元素</p> </div></body></html>IE6/IE7/IE8/Firefox/Chrome/Safari/Opera:
块级元素、行内元素分别汇总如下：
Examples of block level elements
block level elements|Element Description<address> information on author<blockquote> long quotation<button> push button<caption> table caption<dd> definition description<del> deleted text<div> generic language/style container<dl> definition list<dt> definition term<fieldset> form control group<form> interactive form<h1> heading<h2> heading<h3> heading<h4> heading<h5> heading<h6> heading<hr> horizontal rule<iframe> inline subwindow<ins> inserted text<legend> fieldset legend<li> list item<map> client-side image map<noframes> alternate content container for non frame-based rendering<noscript> alternate content container for non script-based rendering<object> generic embedded object<ol> ordered list<p> paragraph<pre class="brush:php;toolbar:false"> preformatted text<table> table<tbody> table body<td> table data cell<tfoot> table footer<th> table header cell<thead> table header<tr> table row<ul> unordered list
Examples of inline elements
inline elements | Element Description<a> anchor<abbr> abbreviated form<acronym> acronym<b> bold text style<bdo> I18N BiDi over-ride<big> large text style<br> forced line break<button> push button<cite> citation<code> computer code fragment<del> deleted text<dfn> instance definition<em> emphasis<i> italic text style<iframe> inline subwindow<img> Embedded image<input> form control<ins> inserted text<kbd> text to be entered by the user<label> form field label text<map> client-side image map<object> generic embedded object<q> short inline quotation<samp> sample program output, scripts, etc.<select> option selector<small> small text style<span> generic language/style container<strong> strong emphasis<sub> subscript<sup> superscript<textarea> multi-line text field<tt> teletype or monospaced text style<var> instance of a variable or program argument
块级元素列表
<address> 定义地址<caption> 定义表格标题<dd> 定义列表中定义条目<div> 定义文档中的分区或节<dl> 定义列表<dt> 定义列表中的项目<fieldset> 定义一个框架集<form> 创建 HTML 表单<h1> 定义最大的标题<h2> 定义副标题<h3> 定义标题<h4> 定义标题<h5> 定义标题<h6> 定义最小的标题<hr> 创建一条水平线<legend> 元素为 fieldset 元素定义标题<li> 标签定义列表项目<noframes> 为那些不支持框架的浏览器显示文本，于 frameset 元素内部<noscript> 定义在脚本未被执行时的替代内容<ol> 定义有序列表<ul> 定义无序列表<p> 标签定义段落<pre class="brush:php;toolbar:false"> 定义预格式化的文本<table> 标签定义 HTML 表格<tbody> 标签表格主体（正文）<td> 表格中的标准单元格<tfoot> 定义表格的页脚（脚注或表注）<th> 定义表头单元格<thead> 标签定义表格的表头<tr> 定义表格中的行
行内元素列表
<a> 标签可定义锚<abbr> 表示一个缩写形式<acronym>定义只取首字母缩写<b> 字体加粗<bdo> 可覆盖默认的文本方向<big> 大号字体加粗<br> 换行<cite> 引用进行定义<code> 定义计算机代码文本<dfn> 定义一个定义项目<em> 定义为强调的内容<i> 斜体文本效果<img> 向网页中嵌入一幅图像<input> 输入框<kbd> 定义键盘文本<label> 标签为 input 元素定义标注（标记）<q> 定义短的引用<samp> 定义样本文本<select>创建单选或多选菜单<small> 呈现小号字体效果<span> 组合文档中的行内元素<strong>语气更强的强调的内容<sub> 定义下标文本<sup> 定义上标文本<textarea>多行的文本输入控件<tt> 打字机或者等宽的文本效果<var> 定义变量
可变元素素列表--可变元素为根据上下文语境决定该元素为块级元素或者内联元素
<button> 按钮<del> 定义文档中已被删除的文本<iframe> 创建包含另外一个文档的内联框架（即行内框架）<ins> 标签定义已经被插入文档中的文本<map> 客户端图像映射（即热区）<object> object对象<script> 客户端脚本
行内元素转换为块级元素
display:block; (字面意思表现形式设为块级) display:inline; display:inline-block;
可以通过修改样式display属性改变元素是以块级还是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。
如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。
假如有不足或者错误的地方，欢迎指正哟。-------妙瞳
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7694
15
1640
14
1393
52
1287
25
1229
29
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
WebアノテーションにY軸位置の適応レイアウトを実装する方法は？
Apr 04, 2025 pm 11:30 PM
Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？
Apr 05, 2025 am 06:15 AM
画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...
