写真と言葉を交換するためのいくつかの方法とアイデア_交換体験

これは正しいですか?それでも機能しないのはなぜでしょうか? A がブロックレベルのタグではないことは誰もが知っています。つまり、A の高さと幅はコンテンツによって決定され、コンテンツが消滅したため、高さと幅の属性は存在しなくなります。 , ということでリンクは ホットゾーンのないリンクになってしまいました。点灯しない場合があります。上記のコードを再度変更する必要があります。


Note that the attribute of the A tag here must be added with display:block; to force it to be a block-level element. In this way, the A tag becomes a link form with a width of 300 and a height of 100, with a background and no text content. Everyone saw that a span tag was added to the A tag above, which seems a bit redundant. Can the effect be achieved without span? Yes, but the idea is different, it is the following position shifting method.

Position movement: that is, the content is moved out of the display area. Let’s look at the code to understand this method.

In CSS, #logo and A have an overflow hidden (overflow:hidden;), which means that if the size exceeds 300*100, it will be hidden. . We see that A is defined with a padding: 100px 0 0; This top padding just pushes the content outside the display area. So why does #logo also use overflow:hidden;? Because there will be a small bug under IE, the content of A cannot overflow and hide, so it is necessary to add an overflow:hidden on the parent tag;

The above are just two of my more commonly used methods. Of course, there are other methods, each of which has its own shortcomings, but the various methods are also complementary to each other. You can choose to use it according to the situation when applying.