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

浅浅的花香味﹌ 2022-10-24 13:18 128阅读 0赞

**1、如何让行内元素设置宽高呢，这里又有一个方法,先引入一个普通的行内元素，代码如下:**

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]  
此时我加个绝对定位试试：

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]**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>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 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;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <span>我是一个行内元素</span>
        <div>我是一个块级元素</div>
    </body>
    
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]  
总结：  
**1、行内元素添加绝对定位或者固定定位就可以直接接设置高度和宽度。  
2、块级元素添加绝对定位或者固定定位，如果不给宽度和高度，默认大小就可以变为内容你那个的大小啦。  
另外：  
脱标的盒子不会触发外边距塌陷，因为绝对定位或者固定定位的元素不会触发外边距合并的问题**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/4393d367ddb7480c8910df6e9259768a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/4760a609568849b88acd8a355e8c5d07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 2]: /images/20221024/b66f696ac4d64bb7bc4436be413bf01f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 3]: /images/20221024/656f3cb338a64c92a6b1ea844e17a32a.png