您的位置：首页 > Web前端 > HTML

HTML 块级、内联、替换、非替换元素的区别

2019-01-15 09:44 197 查看

块级元素

块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如

<div>

、

<p>

、

<form>

等。

<form>

这个块元素比较特殊，只能容纳其它块元素。

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可设置。

块级元素会独占一行，其宽度自动填满其父元素宽度，就算设置了width宽度属性后仍然是独占一行

常见的块级元素

<div></div>

、

<img />

、

<ul></ul>

、

<form></form>

、

<p></p>

、

<h1></h1>

行内元素

行内元素：也叫做内联元素，允许其他内联元素与其位于同一行，一般都是语义级别的基本元素，内联元素通常只能容纳文本或者其他内联元素。

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，所以宽度(width)、高度(height)都不可设置

行内元素的水平方向的 padding-left 和 padding-right 都会产生边距效果，但是竖直方向上的 padding-top 和 padding-bottom 都不会产生边距效果

常见的内联元素

<a></a>

、

<strong></strong>

、

<br />

、

<input />

、

<img />

、

<em>强调文本</em>

、

<textarea></textarea>

替换元素

替换元素是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

比如，只写一个

<img />

标签，而不对齐添加属性，页面上是显示不出来任何东西的，只有往

<img />

标签里面添加 src 属性，这时候页面上才能显示出你要的图片，src 不同，页面上显示出来的内容也就不同。又比如

<input />

标签， value 属性不同，页面上所加载的内容也不相同。

非替换元素

非替换元素，则不通过标签和属性，决定元素的具体显示内容。而是将标签所包围的具体内容告诉浏览器，并在页面上直接显示出来。

比如我们常用的

<p></p>

标签，浏览器直接会将

<p></p>

标签里面的东西显示出来，而不是通过属性。

行内替换元素

行内元素设置 width、height 以及垂直方向的 padding 与 margin 是无效的，但 行内替换元素 可以设置 width、height、padding、bottom，效果等于块元素。

常见的行内替换元素

<img />

、

<input></input>

、

<textarea></textarea>

块级元素和内联元素转换

但是行内元素和块级元素一样，都拥有盒子模型，当加了css控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。

值	类别	描述
display: block	块元素	可以设置宽高以及内外边距，且都换行。
display: inline	内联元素	高度，行高以及底边距不可改变，且都在同一行
display: inline-block	块元素+内联元素	能设置宽高、内外边距，也能在同一行，可以通过vertical-align:top 属性顶部对齐

如何设置 vertical-align 属性的对齐方式

该属性定义 行内元素的基线 相对于 该元素所在行的基线 的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.inline-block{
border: dashed;
}
.inline-block div{
display: inline-block;
background: gray;
height: 50px;
vertical-align: top; /* 与同一行中的最高元素对齐*/
}
.inline-block p{
display: inline-block;
background-color:green ;
width:100px;
padding:10px;
vertical-align: middle;  /* 相对外框 div 居中对齐*/
}
</style>
</head>
<body>
<div class="inline-block">
<div>
相对外框 div 顶部对齐
</div>
<p>相对外框 div 居中对齐</p>
</div>
</body>
</html>

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的底端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

reference

CSS vertical-align 属性

行内元素、块级元素、替换元素和非替换元素

img、input到底是行内还是块级元素？

display:inline-block，block，inline的区别与用法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航