Question

CSS样式中的h1#logo a{ display:block; width:100%; height:100%; text-indent:-9999px}

#header{ margin:15px auto; width:700px; overflow:hidden}
/* DIVCSS5设置布局居中，宽度和具有清除浮动功能overflow:hidden，不设置高度 */
h1#logo{ float:left; height:70px; background:url(logo.jpg) no-repeat; width:174px}
h1#logo a{ display:block; width:100%; height:100%; text-indent:-9999px}
/* DIVCSS5设置text-indent隐藏文字， display:block; 让a形成块以便同时设置宽度高度生效 */
.right-ad{float:right}
/* 只需要设置靠右即可 */
这个是教程中的整段，它给出的解释真心看不懂，有没有能给个通俗点解释的朋友，谢谢了

Answer 1

这个对应的HTML代码应该是
<!-- #header 宽700像素，居中 -->
<div id="header">
<!-- h1#logo logo向左浮动 宽174像素 并设置一张名为logo.jpg的背景图片-->

<h1 id="logo">
<!-- h1#logo a 宽高为100%，即h1有多宽它就有多宽，h1有多高它就有多高-->

<!--由于a标签是行内元素，需要设置display:block使它成为块级元素，才能使宽高生效 -->

<!-- text indent 表示a标签里面的文字像左偏移9999个像素，相当于隐藏文字 -->

<a href="#"></a>
</h1>

<!-- 右侧广告位 设置向右浮动-->

<div class="right-ad"></div>

</div>

Answer 2

Vue实践-CSS样式position/display/float属性对比使用

Answer 3

你是哪句不明白？还是都不明白？如果是都不明白那就没办法了，只能慢慢的看基础，如果是那句不知道那就单独的说出来，我给你解释

追问

就说标签为什么要用block值设置成块，跟宽 和高 有什么关系？block这个值不是把新元素换行用的吗？ 至于缩进text-indent属性的属性值，负的就是向左，正值就是向右，如果想隐藏的话，向左向右都可以，是不是？谢谢了，麻烦回答一下

追答

至于为什么要设置成块这个和元素的属性是一样的，对于a标签来说，如果不把他设置成块元素的话那你设定宽高也是没有用的，如果想在一行显示那就只需要用display:inline-block；也可以用display：blcok；float：left；这两个是等价的，都是让他们在同一行显示，不过也是有区别的，前者间隔的，但是后者没有，至于text-indent这个为什么要用负值也很容易理解，如果是很大的正值或者负值根本看不出来效果，但是如果不是很大呢？你也说了正值是向右的，如果你用一个text-indent：20px; 那这个怎么能隐藏呢？当然如果向左用小值也是不行的，这就是一个习惯问题，正值和负值都是一样的

追问

谢谢你，这么有耐心的回答了我的问题，很明白； 还想再问下，这段代码的意思是网站上面（一般左上角）放置一个公司LOGO（h1背景图），但是处于SEO优化的原因，这里有一个文字（例如公司名字）的 标签，通过缩进并进行隐藏了，现在不明白的是这个标签隐藏都隐藏了，设置高度和宽度干嘛？这不是多余的吗

追答

这个隐藏的不是a标签，他隐藏的只是a里面的文本，标签的隐藏只能用display:none；或者是 visibility:hidden