模仿豆瓣首页练习-笔记

行块盒上方莫名的空白

豆瓣首页的顶部由logo、搜索框、以及一些列导航图标组成。要达到的是下面这种效果：
于是想到用几个行块盒来做，然后定高，排好就行了，没想到在放置搜索框的时候出了问题、实际效果如下：
先忽略整体的上下留白，这一步的目的是让三个行块盒对齐，外围div的高度定为30px，然后里面每一个div的高度也设定为30px，但是可以发现，搜索框上方有一段不应该出现的空白（margin-top已经设置为0)，实际上，搜索框底部到页面顶部的距离是大于30px的。经过观察发现，搜索框内部的文字baseline是和左边图片底部、右边文字的baseline对齐的，于是马上想到是对齐的问题，查阅mdn文档，将vertical-align设置为top解决问题
参考：vertical-align doc

隐藏a标签的文字

搜索框右边的a标签在网页上显示是用的雪碧图来做的图标，但其本质是a标签，出于语义化的考虑，还是要保留a标签的文字内容，常规情况下采用这种操作：

a{
	text-indent : -100px;
	overfloat : hidden;
}

image-set

使用image-set可以让浏览器根据不同的分辨率适配图片

.img{
	background-image : image-set("url1" 1x,
								"url2" 2x,
								"url3" 600dpi);
}

calc()

这个函数可以在为css属性赋值的时候执行一些运算。例如，想要取得宽度的一半往左偏移50px的值，那么可以传入calc(50% - 50px)