칼슘을 어떻게 사용하나요? CSS3 calc() 함수 사용 요약

칼슘은 무슨 뜻인가요? 사용하는 방법? 이 글에서는 CSS3의 calc() 함수가 무엇인지, 어떤 용도로 사용되는지, 어떻게 사용하는지 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. calc()函数是什么，有什么用，如何使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

css3中的calc()是什么？可以做什么？

calc()从字面看我们可以把它理解为一个function函数。其实calc就是英文单词calculate(计算)的缩写；它是一个css3新增的功能，可以用来指定元素的长度，动态计算长度值。（推荐学习：CSS3手册）

在CSS3中calc()函数可以允许我们对属性值执行数学运算。

例如，我们可以使用calc()函数指定宽度值为两个或更多数值相加的结果，而不是把元素宽度值声明为一个静态像素值。

.demo {
    width: calc(100px + 50px);
}

为什么要使用calc()？

如果你使用过像sass这样的css预处理器的话，那么你可能会遇到如下的例子：

.demo{
    width: 100px + 50px;
}

// 使用SASS变量
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

然而，calc()函数提供了一个很好的解决方案，它有两个好处。首先，我们可以组合不同的单位。具体来说，就是我们可以混合使用各种单位来进行计算，如百分比、px、em、rem等单位都可以混在一起使用。例如，我们可以创建一个表达式，它将从百分比值中减去像素值。

.demo {
    width: calc(100% - 50px);
}

在此示例中，.demo元素的宽度始终小于其父宽度的100％。

其次，使用calc()后，计算值是表达式本身，而不是表达式的结果值。这样在使用css预处理器执行数学表达式时，给予浏览器的值是表达式的结果值。

// 在SCSS中指定值
.demo {
    width: 100px + 50px;
}
// 浏览器中编译的CSS及其计算值
.demo {
    width: 150px;
}

使用calc()函数，浏览器解析的值是实际的calc()表达式。

// 在CSS中指定值
.demo {
    width: calc(100% - 50px);
}
//浏览器的计算值
.demo {
    width: calc(100% - 50px);
}

这意味着浏览器中的值可以更加动态，并且可以随着视图的变化而改变。我们可以有一个元素(值为：视图高度减去绝对值)，它会随着视图的变化而改变。

<span style="font-size: 20px;"><strong>calc()</strong></span>函数的使用

calc()函数可以使用数字属性值来执行加、减、乘、除，四则运算。具体而言，它可以被使用在，，，，，等数据类型中。

这里有一些例子 ：

.demo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

注：

使用“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；

使用“*”和“/”时，其前后可以没有空格，但建议留有空格。

calc()嵌套使用

calc()函数可以嵌套使用。但是，内部函数将被视为简单的括号表达式。举例来说，以下嵌套表达式 ：

.demo  {
    width: calc( 100% / calc(100px * 2) );
}

相当于：

.demo  {
    width: calc( 100% / (100px * 2) );
}

下面我们通过一个简单的例子来看看calc()函数的使用

示例：居中元素（假设.demo盒子的高度和宽度都为300px）

.demo {    
     position: absolute    
     top: calc(50% - 150px);    
     left: calc(50% - 150px);
}

这就相当于：

.demo {    
     position: absolute;   
     top: 50%;    
     left: 50%;    
     marging-top: -150px;    
     margin-left: -150px;
}

calc()函数的兼容性

可以看出浏览器对于calc()

CSS3의 calc()는 무엇입니까? 무엇을 할 수 있나요?

calc() 말 그대로 함수로 이해할 수 있습니다. 실제로 calc는 영어 단어 계산의 약어입니다. 요소의 길이를 지정하고 길이 값을 동적으로 계산하는 데 사용할 수 있는 CSS3의 새로운 기능입니다. (추천 학습: CSS3 매뉴얼

)

CSS3의 calc() 함수를 사용하면 속성 값을 계산할 수 있습니다. 수학 연산을 수행합니다.

예를 들어 요소 너비 값을 정적 픽셀 값으로 선언하는 대신 calc() 함수를 사용하여 너비 값이 두 개 이상의 값을 더한 결과임을 지정할 수 있습니다.

.demo{
width: 90%; /*非支持浏览器设置静态值*/
width: calc(100% - 50px);
}

calc()를 사용하는 이유는 무엇인가요?

sass와 같은 CSS 전처리기를 사용한 경우 다음 예를 접했을 수 있습니다. rrreee 그러나 calc() 함수는 두 가지 이점이 있는 좋은 솔루션 구성표를 제공합니다. 첫째, 다양한 단위를 결합할 수 있습니다. 구체적으로 계산을 위해 백분율, px, em, rem 등 다양한 단위를 혼합할 수 있으며 기타 단위도 함께 혼합할 수 있습니다. 예를 들어, 백분율 값에서 픽셀 값을 빼는 표현식을 만들 수 있습니다.
rrreee

이 예에서 .demo 요소의 너비는 항상 상위 요소 너비의 100%보다 작습니다. 🎜🎜둘째, calc()를 사용한 후 계산된 값은 표현식의 결과 값이 아니라 표현식 자체입니다. 이와 같이 CSS 전처리기를 사용하여 수식을 실행할 때 브라우저에 전달되는 값은 해당 수식의 결과 값이 됩니다. 🎜rrreee🎜calc() 함수를 사용하면 브라우저에서 파싱된 값이 실제 calc() 표현식입니다. 🎜rrreee🎜이는 브라우저의 값이 보기 변경에 따라 더 동적이고 변경될 수 있음을 의미합니다. 뷰가 변경됨에 따라 변경되는 요소(값: 뷰 높이에서 절대값을 뺀 값)를 가질 수 있습니다. 🎜🎜<span style="font-size: 20px;"><strong>calc()</strong></span>함수 사용법 calc() 함수는 숫자 속성 값을 사용하여 덧셈, 뺄셈, 곱셈, 나눗셈의 네 가지 산술 연산을 수행할 수 있습니다. 구체적으로는 , , , , , 등의 데이터 유형에 사용할 수 있습니다. 🎜🎜다음은 몇 가지 예입니다. 🎜rrreee🎜참고: 🎜🎜"+" 및 "-"를 사용할 때는 "widht: calc(12%+5em)"와 같이 앞뒤에 공백이 있어야 합니다. 공백이 없습니다. ; 🎜🎜"*" 및 "/"를 사용할 때 앞뒤에 공백이 있으면 안 되지만 공백을 두는 것이 좋습니다. 🎜🎜calc() 중첩 사용🎜🎜calc() 함수는 중첩 방식으로 사용할 수 있습니다. 그러나 내부 함수는 간단한 대괄호 표현식으로 처리됩니다. 예를 들어, 다음 중첩 표현식: 🎜rrreee🎜은 다음과 동일합니다: 🎜rrreee🎜 간단한 예를 통해 calc() 함수의 사용을 살펴보겠습니다🎜🎜예: 중앙 요소(.demo 상자의 높이와 너비를 가정) 둘 다 300px)🎜rrreee🎜이것은 다음과 동일합니다:🎜rrreee🎜calc() 함수 호환성🎜🎜🎜🎜프로세서의 브라우징을 볼 수 있습니다 calc() 함수에 대한 지원이 꽤 좋습니다. 🎜🎜지원하지 않는 브라우저의 경우 calc() 함수는 전체 표현식을 무시합니다. 이는 이를 지원하지 않는 브라우저에서 사용할 정적 값을 제공해야 함을 의미합니다. 🎜rrreee🎜요약: calc() 함수는 다양한 상황에서 매우 유용합니다. 직접 사용해 보고 모든 사람의 학습에 도움이 되기를 바랍니다. 🎜🎜관련 추천: 🎜🎜1. PHP 중국어 웹사이트 비디오 튜토리얼: 🎜CSS3 튜토리얼🎜🎜🎜🎜2. PHP 중국어 웹사이트 특수 효과 다운로드: 🎜css3 특수 효과 코드🎜🎜🎜

위 내용은 칼슘을 어떻게 사용하나요? CSS3 calc() 함수 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!