在做小米项目右上角的搜索框的时候,发现了该问题,现总结如下:
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确实不占用空间。
![](https://i-blog.csdnimg.cn/blog_migrate/25610ee26aba6fe3d7c842791e2f8fad.jpeg)
效果展示
input样式设置
关键是三步:
- 设置outline:none
- 添加border
- 设置focus状态下的border-color
浏览器默认会为input添加黑色的outline,focus状态下会有一个加粗的outline,这样的效果并不美观,所以要去除。如果只加border而不去除outline,就更不美观了。
(如果有button,也需要去除outline)
小米官网右上角搜索框
![](https://i-blog.csdnimg.cn/blog_migrate/36a31c5ced7d940c7d95daa19198aedb.jpeg)
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即可