行内元素和块级元素的学习
@(css)[妙瞳]
css标准文档流：
简称"标准流"，指的是在不使用其它的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。HTML文档中元素可以分为块级元素和行内元素。
块级元素：总是以一个块的形式表现出来，并且跟同级的兄弟一次竖直排列，左右撑满。
行内元素：行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。它同样是DOM树的一个节点，在这点上，行内元素和块级元素是没有区别的。行内元素不可以设置宽与高，但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a,em,strong等。
盒子在标准流中的定位原则（见我上篇文章：聊聊盒子模型）
（1）行内元素之间的水平margin
当两个行内元素紧邻时，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。
（2）块级元素之间的竖直margin
当两个块级元素紧邻时，它们的距离不是margin-bottom与margin-top的总和，而是两者中的较大者。
（3）嵌套盒子之间的margin
当一个div块包含在另一个div块中时，便形成了典型的父子关系。其中子块的margin将以父块的 content为参考。
（4）将margin设置为负值
当margin设置为负值时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。
代码演示如下：
<!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的line-height进行设置，效果如下：
strong{ border:1px solid #000; line-height:50px; } 页面效果：
由上所示，line-height的设置，行内元素strong的高度改变。
假如我们对strong的height进行设置，效果如下：
strong{ border:1px solid #000; height:50px; } 页面效果：
由上所示，height的设置，行内元素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; } 页面效果图：
由上可示，对于行内元素strong而言，margin-left和margin-right有效，但是margin-top和margin-bottom失效。对于块级元素li而言，上下左右的margin都有效。
代码：
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; } 页面图：
由上所示，对于行内元素strong而言，padding-left和padding-right有效，但是padding-top和padding-bottom失效,只是上下的范围扩大，可是对其他元素内容并没有改变。对于块级元素li而言，上下左右的padding都有效。
行内元素和块级元素的区别：
行内元素会在一条直线上排列，都是同一行的，水平方向排列，
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
行内元素与块级元素属性的不同，主要是盒模型属性上
text-align属性是两者表现的又以不同之处
在W3C CSS2.1规范第16.2节 对text-align 有详细地描述：
值： 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 alt="行内元素和块级元素的学习_html/css_WEB-ITnose" > 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 alt="行内元素和块级元素的学习_html/css_WEB-ITnose" > 向网页中嵌入一幅图像<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。
假如有不足或者错误的地方，欢迎指正哟。-------妙瞳
HTML: Die Struktur, CSS: Der Stil, JavaScript: Das VerhaltenApr 18, 2025 am 12:09 AMDie Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML definiert die Webseitenstruktur, 2. CSS steuert den Webseitenstil, und 3. JavaScript fügt ein dynamisches Verhalten hinzu. Zusammen bauen sie den Rahmen, die Ästhetik und die Interaktivität moderner Websites auf.
Die Zukunft von HTML: Evolution und Trends im WebdesignApr 17, 2025 am 12:12 AMDie Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.
HTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickApr 16, 2025 am 12:04 AMDie Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.
HTML: Ist es eine Programmiersprache oder etwas anderes?Apr 15, 2025 am 12:13 AMHtmlisnotaprogrammingLanguage; itiSamarkuplanguage.1) htmlstructuresandFormatswebcontentuses.2) itWorkswithCSSForstylingandjavaScriptForinteraktivität, EnhancingWebDevelopment.
HTML: Erstellen der Struktur von WebseitenApr 14, 2025 am 12:14 AMHTML ist der Eckpfeiler der Erstellung von Webseitenstruktur. 1. HTML definiert die Inhaltsstruktur und die Semantik und Verwendung usw. Tags. 2. Stellen Sie semantische Marker wie usw. zur Verfügung, um den SEO -Effekt zu verbessern. 3. Um die Benutzerinteraktion durch Tags zu verwirklichen, achten Sie auf die Verifizierung der Form. 4. Verwenden Sie fortschrittliche Elemente wie in Kombination mit JavaScript, um dynamische Effekte zu erzielen. 5. Zu den häufigen Fehlern gehören nicht abgegebene Bezeichnungen und nicht geeignete Attributwerte, und Überprüfungstools sind erforderlich. 6. Optimierungsstrategien umfassen das Reduzieren von HTTP -Anforderungen, die Komprimierung von HTML, die Verwendung semantischer Tags usw.
Von Text zu Websites: Die Kraft von HTMLApr 13, 2025 am 12:07 AMHTML ist eine Sprache, mit der Webseiten erstellt, die Webseitenstruktur und -inhalt über Tags und Attribute definiert werden. 1) HTML organisiert die Dokumentstruktur über Tags, wie z. B.. 2) Der Browser analysiert HTML, um das DOM zu erstellen und die Webseite zu rendern. 3) Neue Merkmale von HTML5, wie z. B. Multimedia -Funktionen. 4) Zu den häufigen Fehlern gehören nicht abgestimmte Bezeichnungen und nicht geeignete Attributwerte. 5) Die Optimierungsvorschläge umfassen die Verwendung semantischer Tags und die Reduzierung der Dateigröße.
HTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchApr 12, 2025 am 12:02 AMWebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
Die Rolle von HTML: Strukturierung von WebinhaltenApr 11, 2025 am 12:12 AMDie Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
Dreamweaver CS6
Visuelle Webentwicklungstools
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
