行内元素高度对齐问题

心已赠人 2023-01-19 12:50 10阅读 0赞

### 文章目录 ###

*   *  1、什么是行内元素
     *  2、行内元素高度对齐问题
     *  3、行内块元素
     *  4、实例
     *  总结

## 1、什么是行内元素 ##

行内元素也称为内联元素，行内元素的特点：

*  总是和相邻的行内元素在同一行上（物以类聚）
 *  设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
 *  默认宽度是他自身内容的宽度。
 *  行内元素只能容纳其他行内元素或者文本。

## 2、行内元素高度对齐问题 ##

有这样一个场景，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>行内元素高度对齐问题</title>
        <style>
        </style>
    </head>
    <body>
        <img src="1.png" />
        <span><label>姓名</label><input type="text"></span>
        <select>
            <option>你好</option>
            <option>我好</option>
        </select>
        <input type="submit" name="button" id="button" value="提交" />
        <button type="button" onclick="alert('Hello World!')">取消</button>
    </body>
    </html>

显示的效果图如下：  
![在这里插入图片描述][20210510151851178.png]

> 代码里，对于所有行内元素都没有加入任何的样式，从效果图可以看出，行内元素在一行显示，高度不统一。而行内元素的特性告诉我们，设置宽度、高度无效，但是我们如果想修改的话，怎么去处理呢？向下看……

## 3、行内块元素 ##

> 普遍的规则里总有那么几个不一样的，在行内元素中就有那么几个特殊标签，比如`input、img、button、select、td>`,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。

行内块元素的特点：

*  和相邻行内元素在同一行，但是之间会有空白缝隙。
 *  默认宽度是他本身内容的宽度。
 *  宽度、高度、行高、外边距以及内边距都可以手动设置。

## 4、实例 ##

我们先为每个行内标签添加统一的高度：30px

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>box-sizing属性是什么作用？</title>
        <style>
            html,body{ 
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            .main{ 
                height: 100%;
                padding: 1rem;
                box-sizing: border-box;
            }
            .icon{ 
                height: 30px;
                width: 30px;
            }
            .item{ 
                height: 30px;
            }
            input{ 
                height: 30px;
            }
            .blue{ 
                width: 30px;
                vertical-align:middle;
            }
            select{ 
                height: 30px;
            }
            button{ 
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <img class="icon" src="1.png" />
            <span class="item"><label class='blue'>姓名</label><input type="text"></span>
            <select>
                <option>你好</option>
                <option>我好</option>
            </select>
            <input type="submit" name="button" id="button" value="提交" />
            <button type="button" onclick="alert('Hello World!')">取消</button>
        </div>
    </body>
    </html>

看看效果：  
![在这里插入图片描述][20210510154651370.png]  
我们为input、img、button、select等标签都统一加入了高度：30px，可以看出，高度设置都生效了。**但是为什么输入框的高度比下拉框和按钮的高度都大呢？**

看看盒子模型：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]

我们发现输入框的显示区域就是30，加上内外边距，总体高度就是33了。那么有出现一个疑问：为什么按钮的高度是正常的呢？第一个按钮也是用的input啊？我们继续分析一下按钮的盒子模型  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 1]  
我们发现，内置的样式中，对于type=submit的样式中，增加了box-sizing的设置，而这个属性就是是否把边距计算在高度范围内的作用

怎么解决input 类型是text的高度和其他一致呢？两种方案修改input 类型是text的样式，一个是：修改高度为27px; 第二种就是增加box-sizing: border-box; 属性即可；  
看看修改之后的效果图：  
![在这里插入图片描述][20210510160558336.png]  
**还是有问题：** 图片怎么这么靠上？

两种方式：  
第一种：设置中线对齐：vertical-align: middle  
第二种：img标签的align属性可控制图片与文字的对齐方式，增加属性：align='AbsBottom ’

再看看效果：  
![在这里插入图片描述][20210510161727764.png]

正常了！

## 总结 ##

涉及的知识点有：

*  行内块元素默认的box-sizing属性值不一致；
 *  行内块元素默认的中线对齐值不一致；

[20210510151851178.png]: /images/20221021/85f586aac5e8400fbdbff9a0455ffef0.png
[20210510154651370.png]: /images/20221021/6f5a4924b380490a89670dd0e0e42c00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70]: /images/20221021/4afe25a5d2ff404a878a4787da40cd53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70 1]: /images/20221021/699721484d56405eade6f8d1ab9bd8ba.png
[20210510160558336.png]: /images/20221021/7426480d63b348ba8771198376be18b9.png
[20210510161727764.png]: /images/20221021/aa3ac1c4be49412e96f7df3c7c4339c8.png