行内元素高度对齐问题

最新推荐文章于 2024-06-28 23:37:34 发布

斌哥谈编程

最新推荐文章于 2024-06-28 23:37:34 发布

阅读量1k

点赞数 1

分类专栏： CSS3 前端文章标签： css

本文链接：https://blog.youkuaiyun.com/houpeibin2012/article/details/116596586

版权

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

CSS3

3 篇文章

订阅专栏

文章目录

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>

显示的效果图如下：
在这里插入图片描述

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

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>

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

看看盒子模型：
在这里插入图片描述

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