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

高洛峰
풀어 주다: 2017-03-09 16:47:01
원래의
1947명이 탐색했습니다.

이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿