AtoZ CSS快速提示：使用悬停和高度

深藏阁楼爱情的钟 2022-12-03 01:50 174阅读 0赞

This article is a part of our AtoZ CSS Series. You can find other entries to the series [here][] View the full screencast and transcript for Hover [here][here 1].

本文是我们的AtoZ CSS系列的一部分。 你可以找到其他条目的一系列[这里][here]查看悬停全截屏和成绩单[这里][here 1] 。

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) beginning with a letter of the alphabet. We know that sometimes screencasts are just not enough, in this article we’ve added a new quick tip about Hover for you.

欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索以字母开头的不同CSS值(和属性)。 我们知道有时候视频广播还不够，在本文中，我们为您添加了一个有关悬停的新快速提示。

![1H-01][]

## H代表悬停和高度 **(**H is for Hover and Height**)** ##

There’s not too much more I can say about Hover that I haven’t already covered in the video about the letter H. However, there are some cool animations that you can apply for a hover state. Google “CSS hover effects” and you’ll find plenty.

关于悬停，我能说的还不多，关于视频H的视频我还没有介绍过。但是，有一些很酷的动画可以申请悬停状态。 Google的“ CSS悬停效果”，您会发现很多。

Here are a couple of sites that have some nifty effects:

这是几个具有不错效果的网站：

*  [Codrops: CSS transition hover effects][Codrops_ CSS transition hover effects]
    
    [Codrops：CSS过渡悬停效果][Codrops_ CSS transition hover effects]
 *  [Design Shack: Copy + Paste hover effects][Design Shack_ Copy _ Paste hover effects]
    
    [设计棚：复制+粘贴悬停效果][Design Shack_ Copy _ Paste hover effects]
 *  [CSS-Tricks: pop hovers][CSS-Tricks_ pop hovers]
    
    [CSS技巧：流行悬停][CSS-Tricks_ pop hovers]

Further to those, I recently produced [a video for Code School][], all about a library called [hover.css][].

除此之外，我最近还[为Code School][a video for Code School]制作[了一个视频][a video for Code School] ，内容涉及一个名为[hover.css][]的库。

Another CSS H (that I haven’t gone into much detail about on this site) is `height`.

另一个CSS H(在此站点上我没有详细介绍)是`height` 。

The height property is used to define the content height on a containing element. All the standard length units (like px, em, rem, %, vw, vh and others) can be used to control `height`.

height属性用于定义包含元素上的内容高度。 所有标准长度单位(例如px，em，rem，％，vw，vh等)均可用于控制`height` 。

If the height of an element is not specifically set, it’s calculated as the minimum height to hold all the containing elements (corresponding to the default value `auto`).

如果未特别设置元素的高度，则将其计算为容纳所有包含元素的最小高度(对应于默认值`auto` )。

It’s generally advisable to avoid explicitly setting a height on any elements as it restricts the flexibility of the element – meaning it can’t grow as the content changes. This is particularly risky when working on a responsive design when content needs to reflow vertically as the available width changes.

通常建议避免在任何元素上明确设置高度，因为它限制了元素的灵活性，这意味着它不能随着内容的更改而增长。 在响应式设计中，当内容需要随着可用宽度变化而垂直回流时，这特别危险。

As such, I tend to only set `height` on elements that have predefined dimensions – like images. Another use case is when using `absolute` or `fixed` position as `height` (and `width`) shrink wrap around positioned elements.

因此，我倾向于仅在具有预定义尺寸的元素(例如图像)上设置`height` 。 另一个用例是使用`absolute`或`fixed`位置作为`height` (和`width` )收缩包裹在定位的元素周围。

Here’s an example that demonstrates the problem with setting a fixed height.

这是一个示例，演示了设置固定高度的问题。

See the Pen [The height property][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参见[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )提供的Pen [height属性][The height property] 。

While the first set of text looks styled correctly, as soon as the text is shorter or longer than the styling no longer looks correct – the containing box appears too big, or the text flows outside the box.

虽然第一组文本的样式正确，但只要其短于或长于样式不再正确，则包含的框看起来太大，或者文本在框外流动。

A solution to the overflowing text could be to use the overflow property, but this cuts off the text and makes it unreadable.

解决溢出文本的方法可能是使用overflow属性，但这会截断文本并使之难以阅读。

This situation could be completely avoided by not specifying the height in the first place. If I can improve the flexibility of my code without doing anything at all, that gets my vote!

如果不首先指定高度，则可以完全避免这种情况。 如果我不做任何事情就可以提高代码的灵活性，那将赢得我的投票！

> 翻译自: [https://www.sitepoint.com/atoz-css-hover-height/][https_www.sitepoint.com_atoz-css-hover-height]

[here]: https://www.sitepoint.com/tag/atoz-css/
[here 1]: https://www.sitepoint.com/atoz-css-screencast-hover-pseudo-class
[1H-01]: /images/20221123/08cc0dbef92f4c97baa5dc4a5c8c5fa6.png
[Codrops_ CSS transition hover effects]: http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/
[Design Shack_ Copy _ Paste hover effects]: http://designshack.net/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste/
[CSS-Tricks_ pop hovers]: https://css-tricks.com/pop-hovers/
[a video for Code School]: https://www.codeschool.com/screencasts/hover-css
[hover.css]: https://github.com/IanLunn/Hover/blob/master/css/hover.css
[The height property]: http://codepen.io/SitePoint/pen/NRbwrA/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[https_www.sitepoint.com_atoz-css-hover-height]: https://www.sitepoint.com/atoz-css-hover-height/