web内联样式_在Web开发中使用内联块

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:

结果将如下所示：

Home 首页 Products 产品 About 关于

Help 救命

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:

当然，这会将链接分隔开，但并非您期望的那样。 尝试将鼠标悬停在以下示例中的链接上：

Home 首页 Products 产品 About 关于

Help 救命

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均匀地影响了各个方面的链接：

Home 首页 Products 产品 About 关于

Help 救命

不满 (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:

结果：

Home 首页 Products 产品 About 关于

Help 救命

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内联样式