块状元素、内联元素、内联-块状元素的区别

最新推荐文章于 2024-08-25 22:20:40 发布

夏末_前端有意思

最新推荐文章于 2024-08-25 22:20:40 发布

阅读量1.9k

点赞数

分类专栏： css布局文章标签： css样式

本文链接：https://blog.csdn.net/xiamocsdn/article/details/89875898

版权

css布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

块状元素

块状元素最大的特点是可以独占一行。div是html中典型的块状元素。我们可以给块状元素设置宽度（width）、高度（height）、外间距（margin）、内间距（padding）。
我们在一个html文件里写入块状元素、内联元素、内联-块状元素，并给它们分别设置样式来看一看效果：

<!DOCTYPE html>
<html>
<head>
	<title>前端试题</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="前端试题.css">
</head>
<body>
	<div>块状元素</div>
	<span>内联元素span</span>
	<input type="text" name="" value="内联-块状元素">
	<a href="#">这是一个内联元素a，表示链接</a>
	<div>这是一个块状元素</div>
</body>
</html>

块状元素的css样式：

div{
	margin: 20px;
	padding: 10px;
	width: 100px;
	height: 100px;
	background-color: yellow;
}

在这里插入图片描述

在不设置位置的情况下，每个块状元素都是独占一行，在它后面的元素都是另起一行。
如果要把块状元素设置为内联元素，可以用display:inline来进行转换。

内联元素

内联元素和块状元素最大的区别，就是内联元素和其他元素是在同一行显示的，所以也被称为“行内元素”。
内联元素不能设置宽度、高度。但是如果我们给内联元素设置margin和padding会怎么样呢？我们可以试一试：
我们在一个html文档里写入了块状元素、内联元素、内联-块状元素。css文件里我们给内联元素span设置margin、padding和背景颜色：

div{
	margin: 20px;
	padding: 10px;
	width: 100px;
	height: 100px;
	background-color: yellow;
}
span{
	margin: 50px;
	padding: 120px;
	background-color: orange;
}

结果显示：内联元素的左右margin、左右padding可以像块状元素那样设置和显示；但是上下margin不可设置；上下padding看上去可以设置，实际上也不占据空间。如果有背景色可以显示出来上下padding，但是会覆盖掉位于它上下文的内容。
在这里插入图片描述

内联-块状元素

内联-块状元素同时具有内联元素和块状元素的特征：可以设置宽度、高度、margin 值和padding值，但是又不单独占据一行。
input和image是典型的内联-块状元素。

input{
	margin: 50px;
	padding: 50px;
	width: 100px;
	height: 100px;
	background-color: grey;
}

在这里插入图片描述

总结一下

块状元素：

独占一行；
width、height、margin、padding都可以设置；
可以通过display:inline来转换成内联元素；display:inline-block转换成内联-块状元素；

内联元素：

和其他元素在同一行；
width、height不可设置；
上下margin、padding不可设置，但是如果设置了上下padding，会看起来像是占据了空间（其实并没有）；
左右margin、padding可以设置；
可以通过display:block来转换成块状元素；display:inline-block转换成内联-块状元素；