萝三画室

仿网易云音乐PC-总结Part2(CSS)

发表于

本篇是仿网易云音乐PC-总结的第二部分，Part2-CSS，内容比较零散，多数为过程中遇到的坑，留此记录加深印象。
仿网易云音乐PC全部项目请戳->>>>> https://github.com/love3forever/gogo3

同一行之内的inline-block元素之间水平方向有有缝隙。

这个问题是在某一次显示转换元素的display属性后发现的。明明同一行内两个inline-block元素盒子的width之和等于父元素内容区width，但是第二个元素依然被挤到下一行中，这让我百思不得其解。后来通过度娘才知道缝隙这回事。缝隙出现的原因在于标签段之间的的空格。去除缝隙目前有以下几种方法：

  1. 移除空格，兄弟元素紧挨着彼此
1
2
3
4
5
6
7
8
9
10
11
12
<div>
	<a href="">
	第一名</a><a href="">
	第二名</a><a href="">
	第三名</a>
</div>
<div>
	<a href="">第一名</a><!--
	--><a href="">第二名</a><!--
	--><a href="">第三名</a>
</div>
  1. 标签不闭合
    1
    2
    3
    4
    5
    <div>
    	<a href="">第一名
    	<a href="">第二名
    	<a href="">第三名</a><!--最后一个元素加了闭合是为了向下兼容，h5可不加-->
    </div>

3.font-size：0
4.尽量避免同一行使用inline-block
以上方法属于比较常用的方法，各自也有优缺点。w本项目中我用的是3、4方法。1、2方法无须改变CSS，仅仅调整HTML书写格式，但这会使得代码可读性差，并且对动态增删的元素产生效果，美团之前用过;3方法经常让人忘记指定了font-size为0，并且需要为子元素指定font-size。如果这个inline-block元素并不包含元素标签而包含文本标签时，显然不能用这种方法。4.方法主要通过浮动和绝对定位实现与Inline-block一样的布局，结构和思路更清晰。在仿站的时候，我也研究了下官网的布局思路，发现官网用4的情况更多。然而这种方法的缺点是，由于浮动和绝对定位会导致元素脱离文档流，这对性能会有一定影响。

垂直居中

  1. 垂直居中首先想到的是vertical-align，然而这货的表现太不稳定，对此我并没有深入的学习和理解(butw后续一定会好好理解一下)。只明确的一点是，vertical-align只对inline或inline-block元素生效。block元素垂直居中另height===line-height。如果这样不起作用，我就立刻放弃这个方法。
  2. 通过盒子模型
    在既定的情况下，通过为元素显示的指定margin、padding值也可以实现居中效果。
  3. flex布局
    弹性盒子布局，不仅方便的实现垂直居中，还可以定义排序、换行方式等。flex教程详见 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

SEO优化

SEO优化有个最基础的步骤：标签内加入文字而页面上不显示。实现“文字隐藏”效果只需text-indent:-9999;(文本缩进)

a标签的href属性的神奇效果

a标签的href=”#”属性，可以让页面滚动条滚回顶部，可以应用到网页中“回到顶部”按钮。
a标签的href=”javascript:;”属性，可以让元素保持mouseover则光标变为手指，mouseclick不生效的效果。

父元素hover时触发子元素样式改变

背景：一个登录按钮(#logBtn)，鼠标hover到按钮，其下方出现一个包含多种登录方式的div(#logDiv)，鼠标移开，div隐藏。
问题：原本的想法是，将登录按钮的hover与否存为一个变量(vue)，通过变量控制div的display属性。然而这种方法实现后发现，当Hover到登录按钮，下一步进入div选择登录方式时，div消失了。这是事件冒泡的问题，虽然div是子元素，但是JS认为已经hover出了登录按钮，变量变为FALSE，因此div就被隐藏了。本想通过阻止事件冒泡来解决这个问题，后来发现是我把简单的事情想复杂了。
解决办法：无需将登录按钮的hover与否存为一个变量，只需加入如下新的css样式即可。

1
2
3
#logBtn:hover #logDiv{
  display: none;
}

这样实现，完美解决了上面的问题，而且极其简单- -于是我到底是啥脑回路能第一时间想到上面的方法啊╮(╯▽╰)╭吐槽下自己