CSS3에서 calc() 속성을 사용하여 치수를 표현하는 방법

이 글은 CSS3에서 calc() 속성을 사용하여 크기를 표현하는 방법을 주로 소개합니다. 이는 특정 참조 값을 가지고 있습니다. 이제 도움이 필요한 친구들이 참고할 수 있습니다. 학교에서 수학 문제를 풀 때처럼 수식을 사용하여 길이와 너비를 계산하여 어느 정도 적응형 레이아웃을 구현합니다. 다음으로 CSS3에서 calc() 속성을 사용하는 방법을 소개합니다. 수식으로 크기 값을 표현하려면

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

calc()는 CSS3에 새로 추가된 속성으로, 산술 표현식을 사용하여 길이 값을 표현할 수 있습니다. 즉, 이를 사용하여 p의 너비를 정의하고 여백, 패딩, 테두리 등을 설정할 수 있습니다.

calc() 연산 규칙:

1. "+", "-", "*" 및 "/" 4가지 산술 연산을 사용합니다.
2 백분율, px, em, rem 등의 단위를 사용할 수 있습니다. .;
3. 혼합 가능 다양한 단위를 사용하여 계산합니다.

Usage

calc() 구문은 마치 우리가 어렸을 때 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)을 배웠던 것처럼 수학 표현식을 사용하여 다음과 같이 표현하는 매우 간단합니다.

.haorooms {   
  width: calc(expression);   
}

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

예를 들어 여백은 20px입니다. 그런 다음

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

라고 쓰거나 다음과 같이 사용할 수 있습니다.

.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);   
}

Example

예 1: 여백을 포함하는 페이지에 배치된 블록 요소

.banner {   
  position:absolute;   
  left: 40px;   
  width: -moz-calc(100% - 80px);   
  width: -webkit-calc(100% - 80px);   
  width: calc(100% - 80px);   
  border: solid black 1px;   
  box-shadow: 1px 2px;   
  background-color: yellow;   
  padding: 6px;   
  text-align: center;   
}

예 2: 자동으로 양식 크기 조정, 다음에 적응 콘테이너

input {   
  padding: 2px;   
  display: block;   
  width: -moz-calc(100% - 1em);   
  width: -webkit-calc(100% - 1em);   
  width: calc(100% - 1em);   
}     
#formbox {   
  width: -moz-calc(100%/6);   
  width: -webkit-calc(100%/6);   
  width: calc(100%/6);   
  border: 1px solid black;   
  padding: 4px;   
}

<form>
  <p id="formbox">
  <label>Type something:</label>
  <input type="text">
  </p>
</form>

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

프레임별 애니메이션 효과를 얻기 위한 CSS3 애니메이션 정보

CSS3 상자 반사를 사용하여 반사 효과를 만드는 방법

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