css计算器按钮布局_使用CSS进行布局数学：理解计算

css计算器按钮布局

Over the last two decades layout on the web has evolved from fixed-width designs to responsive, modular pages. CSS’s declarative “a box this wide in pixels, always” has become much more fluid and subtle. Site stylesheets often feature a mixture of units, all interacting with each other to create a design. Designers and developers need to understand the role of each CSS measurement system, but they also require a method of binding and adding these units together in stylesheets.

在过去的二十年中，Web的布局已从固定宽度的设计演变为响应式的模块化页面。 CSS的声明式“像素总是如此宽的盒子”变得更加流畅和微妙。 网站样式表通常包含单元的混合，所有单元相互交互以创建设计。 设计人员和开发人员需要了解每个CSS测量系统的角色 ，但他们还需要一种将这些单元绑定并添加到样式表中的方法。

Into this role steps the powerful calc. For all it’s usefulness, the application of calc isn’t always obvious; its best appreciated through example. I’ll start with a simple one:

这个角色几步强大的calc 。 尽管有很多用处，但calc的应用并不总是很明显。 通过示例获得最大的赞赏。 我将从一个简单的例子开始：

示例1：垂直齐平边距 (Example 1: Vertical Flush Margins)

Take this lovely photograph of a waterfall by Stian Klo. The image has been floated, with a 2rem margin placed on its right side.

为Stian Klo拍摄这张瀑布的可爱照片。 图像已浮动，并在其右侧放置了2rem边框。

The image has been made fluid, set to 50% of the width of its parent. For reference, the HTML:

图像变得流畅，设置为其父级宽度的50％。 作为参考，HTML：

<img src="kirkjufellsfoss.jpg" alt style="width:50%; margin-right: 2rem; float: left;">

<p>Det er et velkjent faktum...

For this design, we want that margin to continue vertically, visually focussing the image via the negative space beneath it. The problem is that the fluidity of paragraphs means that the text will eventually creep under the image as the viewport narrows:

对于此设计，我们希望该边距垂直连续，通过图像下方的负空间在视觉上聚焦图像。 问题在于段落的流畅性意味着当视口变窄时，文本最终将在图像下方爬行：

While there are many ways of treating this, we basically want a solution that states the following:

尽管有很多方法可以解决此问题，但我们基本上需要一种解决方案，该解决方案陈述以下内容：

“Paragraphs following an image should have a left margin of 50% plus 2rem”

“图像后的段落的左边距应为50％ 加 2rem”

Using calc with a general sibling selector, that would be stated as:

将calc与一般的同级选择器一起使用，将表示为：

img ~ p { 
	margin-left: calc(50% + 2rem); 
}

The result:

结果：

Note that, contrary to expectations, the margin on the image and paragraphs do not combine, but overlap, due to the vagaries of float, making the margin on the image now redundant.

请注意，与预期相反，由于float的变化，图像和段落上的页边距不会合并，而是重叠 ，从而使图像上的页margin现在变得多余。

calc allows us to combine very different measurements – percentages and rem – into one result, making the margin fixed but the image fluid.

calc使我们能够将非常不同的测量值(百分比和rem )组合为一个结果，从而使边距固定但图像流畅 。

示例2：填充容器中的全宽元素 (Example 2: Full-Width Elements In Padded Containers)

It’s not uncommon for pages to have full-width elements displayed above padded content:

在填充内容上方显示全角元素的页面并不少见：

<article>
	<header>
		<img src="fredvang.jpg" alt>
	</header>
	<p>Det er et velkjent faktum at lesere distraheres av lesbart innhold på en side når man ser på dens layout...
</article>

The CSS:

CSS：

* { 
	box-sizing: border-box; 
}
body {
	background: #000;
	font-family: Edelsans, sans-serif;
	line-height: 1.5; 
}
article { 
	width: 80%; margin: 0 auto;
	background: #fff;
	padding: 0 2rem; 
	color: #000; 
}
article header img { 
	width: 100%; height: auto; 
}

The problem is that padding on the <article> will also force the <header> content inwards:

问题在于<article>上的填充还会迫使<header>内容向内：

We can fix that by adding a declaration for the <header> that uses calc:

我们可以通过为使用calc的<header>添加一个声明来解决此问题：

article header { 
	width: calc(100% + 4rem); margin-left: -2rem; 
}

The 4rem added to the width of the <header> makes up for the 2rem padding on the left and right of the <article>:

所述4rem加入的宽度<header>弥补了2rem在左侧和右侧的填充<article> ：

运作方式 (Operations)

calc can do all the basic mathematical operations you’re familiar with:

calc可以执行您熟悉的所有基本数学运算：

Operations in calc()

symbol	operator
+	addition
-	subtraction
*	multiplication
/	division

calc()中的操作

符号	算子
+	加成
--	减法
*	乘法
/	师

One important point to remember is that the addition and subtraction operators must have spaces either side of them, while calc must sit directly next to the opening parenthesis. So this works:

要记住的重要一点是，加法和减法运算符的两侧必须有空格，而calc必须直接位于圆括号的旁边。 所以这有效：

width: calc(20% - 1rem);

But this does not:

但这不是 ：

width: calc(20%-1rem);

Neither does this:

这也没有：

width: calc (20% - 1rem);

This is for the simple reason that a minus sign directly in front of a value will result in it being interpreted as a negative. Multiplication and division operators do not require spaces, but they are recommended regardless, if only for the sake of consistency.

这是出于简单的原因，直接在值前面的减号将导致该值被解释为负数。 乘法和除法运算符不需要空格，但是无论如何，无论是出于一致性考虑，还是建议不要使用空格。

支持与限制 (Support & Limitations)

All modern browsers support calc for length units in CSS. In theory, calc should be applicable anywhere a number unit is used, which makes for some very interesting possibilities:

所有现代的浏览器均支持CSS中长度单位的calc 。 从理论上讲， calc应该适用于使用数字单位的任何地方，这带来了一些非常有趣的可能性：

.box { 
	background: rgba(255, 0, 0, calc(.3 * 2)); 
}

Or this:

或这个：

.box { 
	transform: rotate(calc(45deg - 2.31rad)); 
}

If the examples above are a rotated and partially transparent red box, congratulations: you have a browser that supports calc in different declarations. Most browsers carry caveats when it comes to calc in these kinds of edge-case implementations:

如果上面的示例是一个旋转的且部分透明的红色框，那么恭喜您：您的浏览器在不同的声明中支持calc 。 大多数浏览器进行警告，当谈到calc在这类边缘的情况下实现的：

• Chrome and Opera support all uses of calc, but prior to Chrome 38 / Opera 25, calculations with angle units won’t work.

  Chrome和Opera支持所有calc用法，但在Chrome 38 / Opera 25之前 ，使用角度单位的计算将无法进行。

• Currently, Firefox supports calc used in length units and percentages only.

  当前， Firefox仅支持以长度单位和百分比使用的calc 。

• Android 4.4 only supports addition and subtraction operations, and earlier versions do not support calc at all. Chrome 38 on Android offers the same support as its fully-fledged desktop version.

  Android 4.4仅支持加减运算，而早期版本完全不支持calc 。 Android上的Chrome 38提供与其完全成熟的桌面版本相同的支持。

• Internet Explorer 9+ (desktop and mobile) offers good support of calc for length units. IE9 will crash if calc is used in association with the background-position property.

  Internet Explorer 9+ (台式机和移动版)为长度单位的calc提供了良好的支持。 如果将calc与background-position属性关联使用，则IE9将崩溃。

Thankfully, the vast majority of supportive browsers don’t require vendor prefixes.

值得庆幸的是，绝大多数支持浏览器都不需要供应商前缀。

Many thanks to Ana Tudor for doing the research for this; more information on browser compatibility at caniuse.com.

非常感谢Ana Tudor为此进行了研究； 有关浏览器兼容性的更多信息，请访问caniuse.com 。

calc can also be used to position color stops in CSS gradients and more; future articles will contain further examples.

calc还可以用于在CSS渐变等中定位色标； 以后的文章将包含更多示例。

结论 (Conclusion)

Mathematical operations have been one of the features that preprocessors like Sass have held over traditional CSS. While preprocessors still retain a number of advantages, functions like calc are narrowing the gap.

数学运算已成为像Sass这样的预处理器保持在传统CSS之上的功能之一。 尽管预处理器仍然具有许多优势，但诸如calc类的功能正在缩小差距。

翻译自: https://thenewcode.com/953/Layout-Math-with-CSS-Understanding-calc

css计算器按钮布局