css实用技巧——absolute绝对布局的妙用：表单校验提示信息,制作角标

表单校验提示信息

实现思路要点：

• label和input对齐，需给label添加样式  vertical-align: middle;
• 为避免动态显示隐藏的的必填 * 和校验提示信息影响页面布局，都使用absolute进行布局，通过margin调整位置

技术要点：

• absolute布局的元素都会变成块级元素，可以设置margin
• 只添加absolute，不设置left、right、top、bottom属性时，元素会悬浮在原来的位置，并不会飘到页面的左上角。

<template>
    <div style="padding: 20px">
        <div class="formItem">
            <label class="formLabel"><span class="requireMark">*</span>邮 箱</label>
            <input>
            <span class="warnTips">邮箱格式不正确</span>
        </div>
        <div class="formItem">
            <label class="formLabel"><span class="requireMark">*</span>手机号码</label>
            <input>
            <span class="warnTips">手机号码格式不正确</span>
        </div>
    </div>
</template>
<style scoped>
    .formItem {
        width: 300px;
        margin: 0px auto 10px auto;
    }

    .formLabel {
        width: 80px;
        display: inline-block;
        vertical-align: middle;
    }

    .warnTips {
        position: absolute;
        margin: 4px 0 0 10px;
        font-size: 12px;
        color: orange;
    }

    .requireMark {
        position: absolute;
        margin: 4px 0 0 -10px;
        color: red;
    }
</style>

制作角标

<template>
    <div style="padding: 20px">
        <p><span>右上角角标</span><i class="myIcon rightTop"></i></p>
    </div>
</template>
<style scoped>
    .myIcon {
        background: url("https://demo.cssworld.cn/images/6/new.png") no-repeat center;
        width: 12px;
        height: 13px;
    }

    .rightTop {
        position: absolute;
        margin: -6px 0 0 2px;
    }
</style>

带输入建议的输入框

<template>
    <div style="padding: 20px">
        <div class="search-box">
            <input class="search-input" placeholder="搜索">
            <i class="search-btn"></i>
            <div class="search-suggest">
                <p>搜索建议1</p>
                <p>搜索建议2</p>
                <p>搜索建议3</p>
                <p>搜索建议4</p>
                <p>搜索建议5</p>
            </div>
        </div>
    </div>
</template>
<style scoped>
    /* 搜索按钮的无依赖绝对定位 */
    .search-btn {
        width: 24px;
        height: 19px;
        background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3241362042,118478454&fm=26&gp=0.jpg) no-repeat center;
        background-size: 100% 100%;
        position: absolute;
        margin: 3px 0 0 -26px;
    }

    /* 搜索列表的无依赖绝对定位 */
    .search-suggest {
        position: absolute;
        background: white;
        border: 1px solid #e6e8e9;
        width: 142px;
        padding:0 10px;
        display: none;
    }

    /*当输入框获得焦点时，显示搜索下拉列表*/
    .search-input:focus ~ .search-suggest {
        display: block;
    }
</style>