CSS의 수학적 표현 calc()에 대한 심층 분석

【추천 튜토리얼: CSS 동영상 튜토리얼】

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

Definition

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

호환성: IE8-, safari5.1-, ios5.1-, android4.3-은 지원되지 않으며 android4.4-4.4.4는 덧셈과 뺄셈만 지원합니다. IE9는 역회전 위치를 지원하지 않습니다

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

예는 다음과 같습니다.

<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의 수학적 표현 calc()에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!