【小5聊】巩固基础知识从模仿开始之搜索框前端布局以及交互

本文链接：https://blog.csdn.net/lmy_520/article/details/108736552

【1】模仿CSDN里的搜索框布局和交互效果

【2】分析下大概的思路

1）整体看过去，分为左右结构，然后外层使用一个父级div包着，父级背景设置灰色#f0f0f5

2）左边使用input标签，右边使用a标签，a标签嵌套一个img标签，搜索图标

或者左边使用input标签，右边使用button标签，button背景就是搜索图标图片

3）input和a标签都有一定的圆角边框

4）点击input进入焦点时，input宽度会变大，右边区域的菜单会变小，需要一个动态宽度效果，这里可以使用calc样式函数来实现

5）点击input进入焦点时，右边的图标按钮区域渐变出现红色背景

6）点击input进入焦点时，加载热门下拉框列表

【3】实现过程探索

1）点击查看初始化样式文章

2）变身，布局和样式修饰

最外层固定宽度500px，高度32px，一般高宽度固定都是PC端布局方式，弹性布局样式display:flex，表示内部所有元素按占满一行的宽度进行布局，各个元素的宽度各种自身动态显示
块元素：默认情况下占据一行，比如：div标签
行内元素：和块元素相反，默认有一定的宽度，不会占一行
两者可以通过样式来相互转换
float：浮动后的元素，很显然是变成了行内元素，同时默认情况下高宽度失效，所以上级没有设置高宽度时会变成0
flex:1，放大、缩小、空间，是三个属性的简写
弹性布局：display:flex，可以用这个来实现，进入焦点后改变弹性布局内的宽度，结合calc函数来实现放大缩小输入框的效果
背景图和大小样式前后渲染问题：background-size样式一定要放在background:url之后，否则不起作用
calc计算函数：width:calc(100% - 150px)，这里要特别注意减号左右两边一定要加空格，否则无效

    <div style="padding:30px;">

        <div style="width:500px;height:32px;display:flex;">
            <div style="float:left;width:150px;height:32px;"></div>
            <input placeholder="输入搜索内容" style="width:calc(100% - 3-182px);height:32px;float:left;border:none;padding-left:16px;outline:none;border-radius:5px 0 0 5px;-ms-flex: 1;-webkit-box-flex: 1;flex:1;" />
            <button style="display:inline-block;cursor:pointer;outline:none;width:40px;height:32px;float:left;border:none;border-radius:0 5px 5px 0;background: url(https://g.csdnimg.cn/common/csdn-toolbar/images/csdn-black-search.png) no-repeat center center #e4e4e5;background-size:70%;"></button>
        </div>

    </div>

3）弹性布局实现input输入框伸缩效果

使用display:flex来实现，进入焦点后改变弹性布局内的宽度，结合calc函数来实现放大缩小输入框的效果

进入输入框焦点，输入框边长
离开输入框焦点，输入框恢复原长度

<script type="text/javascript">
    $(function () {

        $("#div").click(function () {

            return false;
        });

        $("input").click(function () {

            $("#div1").animate({ width: 0 }, 200);
            return false;
        });

        $(document).click(function () {

            $("#div1").animate({ width: 150 }, 200);
        });
    });
</script>