css实现行内元素设置宽高，块级元素取消宽高

最新推荐文章于 2022-11-06 10:45:10 发布

原创最新推荐文章于 2022-11-06 10:45:10 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#定位 #css #html

CSS 专栏收录该内容

21 篇文章

订阅专栏

本文探讨了如何为行内元素设置宽高，通过添加绝对定位使其生效。同时，展示了如何使块级元素在添加绝对定位后取消默认宽高，变为内容大小。此外，还提到了绝对定位的元素不会触发外边距塌陷，避免了外边距合并问题。

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、块级元素添加绝对定位或者固定定位，如果不给宽度和高度，默认大小就可以变为内容你那个的大小啦。
另外：
脱标的盒子不会触发外边距塌陷，因为绝对定位或者固定定位的元素不会触发外边距合并的问题