CSS의 수식 calc()에 대한 자세한 소개

수학적 표현 calc()는 CSS의 함수로 주로 수학적 연산에 사용됩니다. calc()를 사용하면 페이지 요소 레이아웃에 대한 편리함과 새로운 아이디어가 제공됩니다.

정의

수학적 표현 calc()는 계산의 약자입니다. +, -, *, /라는 네 가지 연산자를 사용할 수 있으며 %, px, em, rem 및 기타 단위를 혼합하여 계산할 수 있습니다

호환 성능: IE8-, safari5.1-, ios5.1-, android4.3-은 지원되지 않으며 android4.4-4.4.4는 덧셈과 뺄셈만 지원합니다. IE9는 backround-position을 지원하지 않습니다

(권장 튜토리얼: CSS 튜토리얼)

참고: + 및 - 연산자 양쪽에 공백 문자가 있어야 합니다

예는 다음과 같습니다:

<style>
.test1{
    border: calc( 1px + 1px ) solid black;
    /* calc里面的运算遵循*、/优先于+、-的顺序 */
    width: calc(100%/3 - 2*1em - 2*1px);
    background-color: pink;
    font-style: toggle(italic, normal); 
}
.test2{
    /* 由于运算符+的左右两侧没有空白符，所以失效 */
    border: calc(1px+1px) solid black;
    /* 对于，不能小于0的属性值，当运算结果小于0时，按0处理 */
    width: calc(10px - 20px);
    padding-left: 10px;
    background-color: lightblue;
}
</style>
<div class="test1">测试文字一</div>    
<div class="test2">测试文字二</div>

Application

수학 표현식 calc()는 레이아웃의 다양한 단위에서 수치 연산에 자주 사용됩니다.

<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;margin-right: 20px;}    
.right{float: left;width: calc(100% - 120px);}
</style>
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

추천 관련 비디오 튜토리얼: css 비디오 튜토리얼

위 내용은 CSS의 수식 calc()에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!