Outline，Input样式的设置，小米官网搜索框

在做小米项目右上角的搜索框的时候，发现了该问题，现总结如下：

outline

outline和border类似，只不过outline不占用空间，而border占用空间

	#box1{
	width: 300px;
	height: 300px;
	margin: 0px auto;
	background-color: #bfa;
	outline: 10px solid green;
	border: 5px solid red;
	}
	#box2{
	width: 300px;
	height: 300px;
	background-color: orange;
	margin: 0 auto;
	}

如果将上方盒子的outline去掉，下方盒子的位置不移动，可见outline确实不占用空间。

效果展示

input样式设置

关键是三步：

1. 设置outline:none
2. 添加border
3. 设置focus状态下的border-color

浏览器默认会为input添加黑色的outline，focus状态下会有一个加粗的outline，这样的效果并不美观，所以要去除。如果只加border而不去除outline，就更不美观了。
（如果有button，也需要去除outline）

小米官网右上角搜索框

focus效果

换行

在做项目时，容器层层叠叠，极其容易弄晕，我的做法是：在脑海中模拟容器的嵌套情况。
如果父元素宽高没有设置，子元素就把它撑开；
如果父元素宽高设置了，子元素如果在水平方向超了，就换行（像字超出换行），这和overflow没有关系。对于文字换行排列，由white-space:normal 控制，normal是默认值，改为nowrap后就可以排列在一行；而盒子的换行，不知道是什么属性控制，暂且认为子元素的宽度超出父元素必定换到下一行。
在做右上角的搜索框时，当我把button宽度设置大后，会被挤到下一行，这是容器不够宽所致，只需增大容器宽度。

input和button间的空隙

只需要让两者都浮动，就能贴在一起，避免了空隙问题

浮动后脱离文档流，需要设置margin-top来调整位置

高度不一致

对input和button设置相同的高度50px，测量后却发现input比button要高6px
解决方案：对input设置box-sizing:border-box 即可

hover设置

因为button是input的下一个元素，可以hover结合兄弟选择器：
input:hover + button

字体大小设置

font-size 可以设置input内的字体大小，也可以设置图标字体（font-awesome）大小

光标的位置

对input设置padding即可