移动端搜索框界面设计知识点

实现效果

               

 

用到的知识点：

1.box-sizing: border-box; 因为在移动端我们常用百分比布局，所以元素的宽度一般都是百分比，然后边框宽度都是用固定的像素，所以，当我们设置box-sizing: border-box这个属性以后，元素的真正宽度就等于width = border + padding + 内容的  width。

2.CSS 选择器

上边列举的几个就是选择指定的类名对它进行一些公共的样式设置

3.精灵图缩小尺寸，设置 background-size，有时候美工给的是2倍图，但是在移动端显示可能会变得很大，所以这时候我们只需要设置backg-size将图片缩小就可以保证二倍图不会失真。