基础学习第一天(关于css搜索框制作)

搜索框制作有二种方案:
思路:都是通过一个div包含input标签,使得宽高一致。这里div、input都要使用怪异盒子box-sizing: border-box;从而让内边距不影响整个盒子大小。
第一种:
通过给div设置背景颜色,利用padding内边距使input盒子向下压缩从而显示边框为padding值的大小。
代码如下:
在这里插入图片描述
第二种:
通过给div设置边框

代码如下:
在这里插入图片描述
这里可以把宽高设置为398px和28px,那么就不需要用到怪异盒子了,只不过修改由于宽高是定死的,所以比较麻烦。
在这里插入图片描述
建议使用第二种写法更简便。

猜你喜欢

转载自blog.csdn.net/qq_48784569/article/details/107087294