CSS calc() 函数的使用
在此代码中，我们可以找到一些示例，其中我们使用 CSS calc() 函数计算元素的宽度。
正如我们所知，这个函数允许我们做简单的计算并在 CSS 中确定 CSS 属性的值。
calc() 函数在我们需要混合单位时特别有用。
在我们的示例中，我们将混合百分比和像素。
让我们看看正在使用的 calc() 函数。
使用 calc() 函数的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.content-container {
display: flex;
padding: 40px 0;
background-color: #d7dade;
}
.right {
width: 100px;
background-color: #759ac9;
}
.left {
width: calc(100% - 100px);
background-color: #7cd47b;
}
</style>
</head>
<body>
<div class="content-container">
<div class="left">Some text</div>
<div class="right">Some text</div>
</div>
</body>
</html>
在上面的例子中，我们将容器的显示属性设置为“flex”。
对于右侧的 <div> 元素，我们指定了宽度，而对于左侧的 <div> 元素，我们使用了 calc() 函数来计算其宽度。
将 calc() 函数用于具有 CSS display 属性的 <div> 元素的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
border: 1px solid #0011ff;
}
.content-container {
padding: 20px 0;
}
.content-container div {
display: inline-block;
}
.right {
width: 90px;
}
.left {
width: calc(100% - 100px);
}
</style>
</head>
<body>
<div class="content-container">
<div class="left">Some text</div>
<div class="right">Some text</div>
</div>
</body>
</html>
让我们再看一个例子，我们为每个单独的 <div> 指定浮动属性。
然后，我们将带有“both”值的 clear 属性添加到“content-container”类中。
将 calc() 函数用于带浮点数的 <div> 元素的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.content-container {
clear: both;
content: "";
display: table;
width: 100%;
padding: 40px 0;
background-color: #d1d2e3;
}
.right {
width: 100px;
background-color: #4b89b8;
float: right;
}
.left {
width: calc(100% - 100px);
background-color: #42d46d;
float: left;
}
</style>
</head>
<body>
<div class="content-container">
<div class="left">Some text</div>
<div class="right">Some text</div>
</div>
</body>
</html>
日期：2020-06-02 22:14:58 来源：oir作者：oir