HTML中块级元素与内联元素

HTML中块级元素与内联元素


我刚开始了解块级元素和内联元素的时候傻傻分不清,不知道它俩是干啥的,区别在哪。今天就一起来了解一下吧

1.首先先来了解一下块级元素
什么叫块级元素呢?块级元素块级元素,它就像是一个冰块一样可以设置他的宽度和高度(冰块挖挖就好了)。既然有宽度有高度就可以设置他的marage值和padding值。在默认情况下占据一行。 他的宽度自动填充满父亲的宽度,(意思就是说它父亲有多宽它就有多宽)

对应的是display:block

看看下面这个demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p style="background-color: aqua;">我是一个小小的文本啊…………</p>
	</body>
</html>

在这里插入图片描述
然后我们设置他的高度

我是一个小小的文本啊…………

HTML中块级元素与内联元素_第1张图片
这样他的高度就有了。。。


2.接下来了解内联元素
什么是内联元素呢??内联元素就像是冰块融化了的水一样,它们不会独自占据一行,会和其他的兄弟(兄弟也是内联元素,并且它的父亲元素够宽时)一起共聚一行

  1. 内联元素正好与块级元素相反,它没有宽度没有高度,也不能设置宽度和高度,设置了也无效。

  2. 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right,其它属性不会起边距效果。

  3. 对应display:inline

看demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<big style="background-color: pink">我是一个大号字</big>
	</body>
</html>

在这里插入图片描述
接下来我们给他一个高度看他变不变?

我是一个大号字

看结果:还是没变。
在这里插入图片描述


3.行内块元素
当然凡是都不是绝对的,在HTML中还有另一种奇葩的存在。那就是行内块元素,见名知意。就是既具有块级元素的特性又具有行内元素的特性的元素,

  1. 具有行内元素的可设置宽度和高度。
  2. 又具有行内元素的可以和其他行内元素在一行显示。
  3. 对应display:inline-block

是不是觉得行内块元素特别流弊呢??,我也这么觉得 ^_ ^

kan demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="" id="" value=""/>
	</body>
</html>

就像这样
在这里插入图片描述
是不是觉得像行内元素
再看:

HTML中块级元素与内联元素_第2张图片
是不是觉得有点神奇呢??
其实每个元素都可以设置它的 display
可以设置为

display: inline-block;

display: block;

display: inline;

比如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="" id="" value="" style="height: 50px;"/>
		<p style="display: inline-block; background-color: aqua;">我是文本啊</p>
	</body>
</html>

在这里插入图片描述
看上面的栗子文本不应该是一行显示的吗??
我们在这里对它的display进行的修改。改为了内联元素。

你们也可以试试。

你可能感兴趣的:(html)