1、如何让行内元素设置宽高呢,这里又有一个方法,先引入一个普通的行内元素,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位特殊特性</title>
<style>
span {
width: 200px;
height: 200px;
background-color: chartreuse;
}
</style>
</head>
<body>
<span>我是一个行内元素</span>
</body>
</html>
运行结果如下:
此时我加个绝对定位试试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位特殊特性</title>
<style>
span {
position: absolute;
width: 200px;
height: 200px;
background-color: chartreuse;
}
</style>
</head>
<body>
<span>我是一个行内元素</span>
</body>
</html>
运行结果如下:
2、如何让块级元素取消宽高呢,先来一个普通的块级元素,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位特殊特性</title>
<style>
span {
position: absolute;
width: 200px;
height: 200px;
background-color: chartreuse;
/* 因为绝对定位的盒子是不占有位置的,会与div盒子重叠,我们让这个span盒子距离远点 */
margin-top: 300px;
}
div {
background-color: chocolate;
}
</style>
</head>
<body>
<span>我是一个行内元素</span>
<div>我是一个块级元素</div>
</body>
</html>
运行结果如下:
此时我如果加了绝对定位在块级元素上,我们看看效果:
先看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位特殊特性</title>
<style>
span {
position: absolute;
width: 200px;
height: 200px;
background-color: chartreuse;
/* 因为绝对定位的盒子是不占有位置的,会与div盒子重叠,我们让这个span盒子距离远点 */
margin-top: 300px;
}
div {
background-color: chocolate;
position: absolute;
}
</style>
</head>
<body>
<span>我是一个行内元素</span>
<div>我是一个块级元素</div>
</body>
</html>
运行结果如下:
总结:
1、行内元素添加绝对定位或者固定定位就可以直接接设置高度和宽度。
2、块级元素添加绝对定位或者固定定位,如果不给宽度和高度,默认大小就可以变为内容你那个的大小啦。
另外:
脱标的盒子不会触发外边距塌陷,因为绝对定位或者固定定位的元素不会触发外边距合并的问题