ホームページ >ウェブフロントエンド >htmlチュートリアル >インライン要素とブロックレベル要素について学ぶ_html/css_WEB-ITnose
インライン要素とブロックレベル要素について学ぶ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:39:221879ブラウズ
インライン要素とブロックレベル要素の学習
@(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
初期値: 匿名値、依存「direction」の値。「direction」が「ltr」の場合は「left」、「direction」が「rtl」の場合は「right」です。
継承: はい
计算后的值：初始值或指定值
这个特性描述了如何使一个块元素的行内内容对齐。
注意一点，标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。
解释一下，行内内容是说由行内元素组成的内容，比如 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。
假如有不足或者错误的地方，欢迎指正哟。-------妙瞳