web内联样式
Previously I’ve discussed what I called “the two kinds of element”: inline
and block
. That was an oversimplification for the purpose of instruction: in reality, HTML elements can have over a dozen different display
values. inline
and block
were the first and simplest values added to the CSS spec. display: table
and its related values are almost as old, while flex
and grid
are the latest. Somewhere in the middle is inline-block
.
之前,我已经讨论了所谓的“ 两种元素 ”: inline
和block
。 出于指示目的,这过于简单:实际上,HTML元素可以具有十几种不同的display
值。 inline
和block
是添加到CSS规范的第一个也是最简单的值。 display: table
及其相关值几乎是旧的,而flex
和grid
是最新的。 中间的某个地方是inline-block
。
Using inline-block
can solve many common frustrations and limitations in web design, although not without introducing a few of its own.
使用inline-block
可以解决Web设计中的许多常见问题和局限性,尽管并非没有引入一些固有的缺陷。
Perhaps the easiest way to understand the properties of these display
values is to compare them side-by-side:
理解这些display
值的属性的最简单方法可能是并排比较它们:
内联元素 (Inline Elements)
Following the spec, inline elements only respect horizontal padding and margin values; margin-top
and padding-top
are ignored, as are margin-bottom
and padding-bottom
.
按照规范, 内联元素仅考虑水平填充和边距值 ; margin-top
和padding-top
会被忽略, margin-bottom
和padding-bottom
也会被忽略。
border
can be applied to the left
and right
of inline elements, but border-top
and border-bottom
won’t work. The content of an inline element determines its size (padding-left
and right
aside), it cannot take explicit width
or height
values.
border
可以应用于内联元素的left
和right
,但是border-top
和border-bottom
无效。 内联元素的内容确定其大小( padding-left
和right
padding-left
right
),它不能采用显式的width
或height
值。
块元素 (Block Elements)
By default, a block element is the full width of its container, no matter how little content it has. A block element’s height is determined by its content, by default. Explicit and implicit widths and heights can be applied via CSS, as can padding
, margin
and border
on all sides.
默认情况下, 块元素是其容器的整个宽度,无论其内容多么少。 默认情况下,块元素的高度由其内容确定。 可以通过CSS来应用显式和隐式的宽度和高度,在所有边上都可以使用padding
, margin
和border
。
Block tags are “on their own line” by default: think of heading and paragraph elements. That means getting block elements lined up side by side on a web page can be tricky.
默认情况下,块标记是“一行一行”:考虑标题和段落元素 。 这意味着将块元素并排排列在网页上可能很棘手。
内联块 (Inline-Block)
inline-block
is a hybrid of both display values: tags with inline-block
can take explicit widths and heights, as well as border
, margin
and padding
on all sides. However, inline-block elements remain inline; that is, they appear side-by-side with other inline
or inline-block
elements. For all intents and purposes, inline-block
tags behave much like replaced elements, such as images.
inline-block
是两种显示值的混合 :具有inline-block
标签可以采用显式的宽度和高度,以及所有侧面的border
, margin
和padding
。 但是, 内联块元素保持内联 ; 也就是说,它们与其他行inline
元素或行inline-block
元素并排出现。 出于所有目的和目的, inline-block
标记的行为与被替换的元素 (例如images)非常相似。
内联块的实际使用 (Real-World Uses of Inline-Block)
A good example of how inline-block
can be used in modern web design is a simple site navigation bar:
一个简单的站点导航栏就是一个很好的例子,说明如何在现代网页设计中使用inline-block
:
<nav>
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">About</a>
<a href="#">Help</a>
</nav>
Applying the following CSS:
应用以下CSS:
nav {
background: #222 url(debut_dark.png);
}
nav a {
font-family: Proxima Nova, sans-serif;
color: #fff;
text-decoration: none;
transition: .4s;
}
nav a:hover {
background: rgba(255,0,0,0.5);
}
The result will look like this:
结果将如下所示:
Trying to get space between the links should be relatively easy:
试图在链接之间获取空间应该相对容易:
nav a { padding: 1rem; }
This certainly spaces the links apart, but not in the way you might expect. Try hovering over the links in the example below:
当然,这会将链接分隔开,但并非您期望的那样。 尝试将鼠标悬停在以下示例中的链接上:
You can see that the hover effect “slops over” the top and bottom edges of the <nav>
bar. As inline elements, the links will take padding
on the left and right; but padding
on the top and bottom won’t contribute to the computed height of the elements.
您会看到悬停效果“倾斜”在<nav>
栏的顶部和底部边缘。 作为内联元素,链接将在左侧和右侧进行padding
; 但顶部和底部的padding
不会影响元素的计算高度。
There are ways around this: adding a calculated top and bottom padding
to the <nav>
element to balance out the changes will work, for example. But a far better and simpler solution is to alter the display quality of the links themselves:
可以采用以下方法:例如,将计算出的顶部和底部padding
到<nav>
元素以平衡更改将起作用。 但是,更好,更简单的解决方案是更改链接本身的显示质量:
nav a {
display: inline-block;
padding: 1rem;
}
Now padding
influences the links evenly on all sides, as one would expect:
正如人们所期望的那样,现在padding
均匀地影响了各个方面的链接:
不满 (Discontents)
There is one downside of inline-block
: it automatically inserts spaces between elements on the same line.
inline-block
有一个缺点:它会自动在同一行的元素之间插入空格。
The fact that the browser inserts spaces actually makes a certain kind of sense: you would normally want spaces to appear between words. But in this case, it’s a really annoying behavior.
浏览器插入空格的事实实际上具有某种意义:您通常希望单词之间出现空格。 但是在这种情况下,这是一个非常烦人的行为。
As always, Chris Coiyer has some excellent solutions to this issue. My personal favorite in this case is to remove the carriage returns in the HTML code, thus eliminating the spaces:
与往常一样, 克里斯·科耶尔 ( Chris Coiyer)对这个问题有一些出色的解决方案 。 在这种情况下,我个人最喜欢的是删除HTML代码中的回车符,从而消除空格:
<nav>
<a href="#">Home</a><a href="#">Products</a><a href="#">About</a><a href="#">Help</a>
</nav>
This approach also has the very minor advantage of slightly reducing file size, as any bytes saved in your code mean faster downloads. An alternative and slightly trickier approach is to do the work of removing the spaces solely via CSS, “sucking out” the gaps by reducing font-size
to 0 for the parent element:
这种方法还有一个很小的优点,就是稍微减小了文件大小,因为代码中保存的任何字节都意味着下载速度更快。 另一种略微棘手的方法是仅通过CSS来删除空格,通过将父元素的font-size
为0来“消除”间隙:
nav { font-size: 0; }
Of course, this has to be countered by increasing the font-size
of the child elements; otherwise, everything will be shrunk to infinity:
当然,这必须通过增加子元素的font-size
来解决。 否则,一切都会缩小到无穷大:
nav a { font-size: 1rem; }
You can use whatever technique you wish, although I would suggest trying them out and then sticking to one for the sake of consistency.
您可以使用所需的任何技术,尽管我建议您尝试一下然后为了一致而坚持使用。
将内联块与Flexbox结合 (Combining Inline-Block With Flexbox)
It’s worthwhile noting that inline-block
can be handily associated with flexbox layout and other values of display. For example, after grouping three of the links in a <div>
container:
值得注意的是, inline-block
可以方便地与flexbox布局和其他显示值相关联。 例如,在<div>
容器中将三个链接分组之后:
<nav>
<div>
<a href="#">Home</a><a href="#">Products</a><a href="#">About</a>
</div>
<a href="#">Help</a>
</nav>
…we can apply flexbox controls to the <nav>
element to separate the first group from the “Help” link:
…我们可以将flexbox控件应用于<nav>
元素,以将第一组与“帮助”链接分开:
nav {
display: flex;
justify-content: space-between;
}
The result:
结果:
You can also play with the code for this menu bar example on CodePen.
您还可以在CodePen上使用此菜单栏示例的代码 。
支持 (Support)
Support for inline-block
is excellent: all browsers respect the CSS value, including IE8+.
inline-block
支持非常出色:所有浏览器都尊重CSS值,包括IE8 +。
结论 (Conclusion)
inline-block
is a very, very useful tool to have in your web development arsenal: if you understand the purposes and limitations of inline
and block
, you can deploy the hybrid value where it is needed in your designs.
inline-block
是Web开发工具库中非常有用的工具:如果您了解inline
和block
的目的和局限性,则可以在设计中需要的地方部署混合值。
翻译自: https://thenewcode.com/857/Using-Inline-Block-In-Web-Development
web内联样式