行内元素进行绝对(absolute)，固定(fixed)定位后会变成块级元素·

最新推荐文章于 2023-05-23 19:15:00 发布

转载

最新推荐文章于 2023-05-23 19:15:00 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Knowledge-is-infinite/p/11112085.html

当行内元素设置`position: absolute;`或`position: fixed;`后，它们的行为会转换为类似块级元素，允许设置宽度、高度以及四个边缘的位置，从而影响布局。示例代码展示了如何通过这种方式实现元素的居中显示。

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

行内元素进行绝对定位后会变成块级元素·

position:absolute;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* *{
padding: 0;
margin: 0;
} */
span{
position: absolute;

/* 一定要写四个位置，否则无法居中显示 */
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 400px;
height: 400px;
background: rgba(255, 0, 255, .6);
margin: auto;
}
</style>
</head>
<body>
<span>行内元素进行绝对定位后会变成块级元素</span>
<a href="#">行内元素进行绝对定位后会变成块级元素</a>
<a href="#">样式，先写width,height,position,top,right,bottom,left确定位置</a>
<a href="#">再写不影响布局的color,background,font-size,font-family等等</a>
</body>
</html>