HTML行内元素与块级元素有哪些及区别详解
|
想起之前事变口试时，口试官问的一个题目：行内元素有哪些，和块级元素有什么区别？这是一道蛮基本的口试题，可是许多初学者平常只注重标签语义，忽视了标签行内和块级的特征， 因此对付上述题目很有也许答不上来可能答不全。 HTML常见的行内元素有： <span>、<a>、 <img>、 <input>、<textarea>、<select>、<label> 尚有包罗一些文本元素如：<br> 、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。 要是只答复<span>和<img>那就说不外去了吧。 HTML常见的块级元素有： <div>、<table>、<form>、<p>、<ul>、 <h1>......<h6>、<hr> 、<pre>、<address>、<center>、<marquee> 、<blockquote> 等。 要是只答复<div>那就说不外去了吧。 那它们之间的区别是什么呢？ ·块级元素 1.老是重新的一行开始，即各个块级元素独有一行，默认垂直向下分列； 2.高度、宽度、margin及padding都是可控的，配置有用，有边距结果； 3.宽度没有配置时，默以为100%； 4.块级元素中可以包括块级元素和行内元素。 ·行内元素 1.和其他元素都在一行，即行内元素和其他行内元素城市在一条程度线上分列； 2.高度、宽度是不行控的，配置无效，由内容抉择。 配置margin阁下有用，有边距结果； 配置margin上下会撑大空间可是不会发生边距结果（即盒模子margin-top/bottom有值，但页面上没有边距结果）。 配置padding阁下有用，配置padding上下会撑大空间可是不会发生边距结果（同上）。 padding结果如下展示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <style> span{ border:1px solid red; padding:10px; } div{ border:1px solid blue; } </style> <body> <div>块级元素</div> <span> 行内元素</span> <span> 行内元素</span> <div>块级元素</div> </body> </html> 3.按照标签语义化的理念，行内元素最好只包括行内元素，不包括块级元素。 转换 虽然块级元素与行内元素之间的特征是可以彼此转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。 行使display属机可以或许将三者恣意转换： (1)display:inline;转换为行内元素； (2)display:block;转换为块状元素； (3)display:inline-block;转换为行内块状元素。 行内块状元素综合了行内元素和块状元素的特征： (1)不自动换行，与其他行内元素城市在一条程度线上分列； (2)高度、宽度、margin及padding都是可控的，配置有用，有边距结果； (3)默认分列方法为从左到右。 到此这篇关于HTML行内元素与块级元素有哪些及区别详解的文章就先容到这了,更多相干HTML行内元素与块级元素内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
