HTML表单和媒体查询

1.我们在写表单的时候都会遇到选中表单他的周围有黑色的框，我们叫他轮廓，如下图：

这种情况我们通常会用 outline: none;来去除轮廓

  .input {
            width: 400px;
            height: 30px;
            border: 1px solid gainsboro;
            outline: none;
            padding-left: 20px;
        }

去除后的效果：

 2.input框里面的图，如上图所示input里面有一个小的搜索图片，其实加这个图片非常简单，首先给input一个icon的类名，在使用这个类名给input加背景图就可以了

 .icon {
            background: url(img/search.png) no-repeat 5px center;
            background-size: 3%;
        }
        /*background里面的5px表示左边，center表示居中，
         background-size: 3%;表示图片的大小*/

 3.我们在使用textarea（文本域）时都会有一个问题就是他可以随意拖动大小，这样会使页面的格式变化，我们只要加上  resize: none;， 如下图：

textarea {
            width: 400px;
            height: 80px;
            resize: none;
        }

效果：

 

 4.媒体查询

1.语句： @media screen and (表达式如：（max-width:600px）){

css语句

}

这个是缩小到一定程度就会变格式

大于600px效果图：

小于600px效果图：