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


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

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>

==============================================

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

position:fixed;

 

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

/* 一定要写四个位置,否则无法居中显示 */
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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM