계산에서 크기 값을 표현하기 위해 CSS3의 calc() 속성을 사용하는 방법에 대한 설명

이 글에서는 CSS3의 calc() 속성을 사용하여 계산에서 크기 값을 표현하는 방법을 설명합니다

calc()를 사용하면 우리처럼 수식을 나열할 수 있습니다. 학교의 수학 문제. 길이, 너비 및 기타 값을 계산하여 어느 정도 적응형 레이아웃을 달성합니다. 아래에서는 CSS3의 calc() 속성을 사용하여 수식에서 크기 값을 표현하는 방법을 소개합니다

페이지의 적응형 레이아웃을 구현하려는 경우 일반적으로 여백이 있기 때문에 더 번거롭지만 때로는 너비 적응형 입력 상자를 구현하려는 경우에도 여백이 있기 때문에 상당히 번거롭습니다. 패딩 또는 여백과 동시에 브라우저 호환성으로 인해 최종 효과가 일관되지 않습니다. CSS3에 추가된 새로운 속성인 box-sizing은 위의 문제를 어느 정도 해결해 줍니다. 오늘 글에서는 새로 추가된 CSS3의 또 다른 속성인 calc()를 사용하여 적응형 레이아웃을 구현하겠습니다.

calc()는 CSS3에 새로 추가된 속성으로, 산술식을 사용하여 길이 값을 표현할 수 있습니다. 즉, p의 너비를 정의하고 여백, 패딩, 테두리를 설정할 수 있습니다. , 등.
Calc() 연산 규칙:
1. "+", "-", "*", "/" 4가지 연산을 사용합니다.
2. 백분율, px 등의 단위를 사용할 수 있습니다. , em, rem 등 ;
3. 다양한 단위를 혼합하여 계산할 수 있습니다.

사용법
calc() 문법은 우리가 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)을 배웠을 때처럼 아주 간단합니다. 우리가 어렸을 때 수학 표현을 사용하여

.haorooms {   
  width: calc(expression);   
}

이렇게 패딩, 여백, 백분율을 함께 사용하면 문제를 해결할 수 있습니다.

예를 들어 여백은 20px입니다. 그런 다음 여백이 있는 페이지의 A 블록 요소처럼 작성할 수 있습니다

.haorooms{   
  width: calc(100% - 20px);  //注：减号前后要有空格，否则很可能不生效！！   
}

예 2: 컨테이너에도 적용되는 자동 크기 조정 양식

.box {   
    background: #f60;   
    height: 50px;   
    padding: 10px;   
    border: 5px solid green;   
     width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);   
    width:-webkit-calc(100% - (10px + 5px) * 2);   
    width: calc(100% - (10px + 5px) * 2);   
}

으르르

위 내용은 계산에서 크기 값을 표현하기 위해 CSS3의 calc() 속성을 사용하는 방법에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!