一、首先需要注意的是这里所说的display: block;是把它转换成块元素,display: none;是隐藏的意思,所以这里不会冲突的,接下来我们做一个测试代码如下(小米官网):
注释:左边是html样式,右边是css样式
因为a标签是一个行内元素鼠标点击的时候只是字体会出来链接显示,所以一般都会把超级链接换成块元素
因为小米官网点击到例如小米手机页面的时候全部商品分类字样会隐藏,所以我们采用display: none;来把它隐藏效果图如下
这里就会被隐藏掉,因为display: none;隐藏不占据空间所以字体会向前补充上,这里我们为了能让他占用空间会采取visibility: hidden;这种隐藏方法是会占据空间的。
二、为什么display: block;和display: none;会冲突
有的时候我们做页面的时候会忽略到权重值例如代码如下
我们要是把选中的元素删除的话display: none;就会不显示出效果,这里的原因不是display: block;和display: none;冲突了,而是权重是的问题,删除掉的话权重是会变小,这样的话执行顺序就不对了,所以不会显示出应有的效果。