内联元素和块级元素的定位区别

最新推荐文章于 2024-05-03 00:29:17 发布

原创最新推荐文章于 2024-05-03 00:29:17 发布 · 647 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#内联元素和块级元素的定位方法

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文详细解析了内联元素和块级元素在网页布局中的不同特性，包括大小设定、定位方法以及如何利用这些特性进行元素的对齐与样式调整。通过实例展示了它们在实际应用中的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内联元素和块级元素的区别

内联元素——是没有宽和高的

1、其大小是由自己本身的字体大小决定，若要进行上下对齐时，用行高（line-height）设置

2、还可以运用定位的方法进行设置：

float定位（left、right）

postion定位（static、relative、absolute、fixed）

图片与文字对齐的方法：（在图片中定义）vertical-align：middle；

border-radius：属性值；（设置圆角，其值越大，更圆）

例如：border-bottom-right-raius：50px；（是将右下角进行圆角化）

<strong> </strong> 强调元素

<button> <button> 按钮元素

块级元素——有自定义的宽与高

其定位方法有很多种，方法如下：

1、 padding定位

2、 border定位

3、 float定位

4、 position定位

下面这个例子就是用来说明其区别

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	.mian{
		width: 300px;
		height: 50px;
		background-color: #faa;
		text-align: center;
	}
	.mian-sp1,
	.mian-sp2{
		width: 100px;
		height: 20px;
		background-color: #eee;
		/*margin-top: 100px;*/
		/*float: left;*/

	}
	.mian-sp2{
		background-color: #de1;
		margin-top: 100000px;
		/*margin-left: 10px;*/
		/*line-height: 50px;*/

		/*vertical-align: middle;*/
	}
	</style>
</head>
<body>
	<div class="mian">
<!--  		<div class="mian-sp1">div1</div>
		<div class="mian-sp2">div2</div> -->
		<span class="mian-sp1">123</span>
		<span class="mian-sp2">2345</span>
	</div>
</body>
</html>

内联元素的结果：不管如何的设置margin或是padding都无效。