CSS3 보석 : calc () 함수

CSS3 calc () 기능의 자세한 설명 : 유연한 레이아웃을위한 강력한 도구

코어 포인트

CSS3 함수는 길이, 숫자, 각도, 전환/애니메이션 시간 또는 사운드 주파수를 계산하고 다른 단위 유형을 혼합하는 지원을 허용합니다. 이 기능은 유체 또는 반응 형 레이아웃에서 정확한 너비 계산을 허용하기 때문에 레이아웃 설계에 특히 유용합니다.

기능의 브라우저 지원은 현재 제한되어 있습니다. Internet Explorer 9 및 Firefox (접두사) 기본 지원이지만 WebKit (Chrome 및 Safari) 및 Opera는 아직 구현되지 않았습니다. 그러나 스타일 시트에서 점진적 향상을 사용하여 다른 브라우저의 호환성을 보장 할 수 있습니다.
• css3의 calc() 및
함수는 둘 이상의 쉼표로 구분 된 값의 최소 또는 최대 값을 반환하며 상대 글꼴 크기를 제어하는 ​​데 사용되지만 현재 최신 브라우저에서 지원하지 않습니다.
• calc() CSS3의 모듈 식 사양에는 많은 보물이 숨겨져 있습니다. 이 기사는 레이아웃 설계를 처리하는 방식을 바꿀 수있는 매우 유용한 속성을 소개합니다. CSS3 기능은 주로 길이, 숫자, 각도, 전환/애니메이션 시간 또는 사운드 빈도를 계산하는 데 사용됩니다. 그러나 CSS의 강력한 개념 인 측정 유형을 혼합 할 수 있습니다. 두 개의 떠 다니는 요소가 포함 된 웹 사이트 레이아웃을 고려하십시오. 이 두 요소의 너비가 동일하고 60px의 수평 마진으로 분리되기를 원합니다. 간단하게 들리나요? 고정형 설계에서는 문제가되지 않습니다. 그러나 유체 또는 반응 형 레이아웃은 어떻습니까? 페이지 너비를 결정할 수 없으므로 대부분의 개발자는 각 요소가 45%로 설정됩니다. 페이지가 600px 인 경우에만 여백의 10%가 60px 또는 더 좁은 브라우저 Windows가 확대되거나 확대됩니다. 다행스럽게도 새로운 함수를 사용하면 너비를 계산할 수 있습니다. 이 경우 두 요소 모두 50% 뺀 30px가되기를 원합니다.
• 어쩌면 당신은 글꼴 크기에 대한 여백을 원할 것입니다 - 예를 들어 4em? 문제 없음 : min() max() 또는 두 요소 주위에 2px 테두리를 추가하고 싶을 수도 있습니다.
계산을 간단하게 유지하는 것이 좋습니다. 그러나 와 같은 복잡한 공식을 사용할 수 있습니다. 브라우저 지원

기능은 W3C 권장 사항이므로 어떤 브라우저가 기본 지원을 제공합니까? 잘못된. 글을 쓰는 시점에는 Internet Explorer 9 만 있습니다. Firefox는 또한 접두사로 지원합니다. WebKit (Chrome and Safari) 또는 Opera에는 구현되지 않았지만 매우 유용하며 너무 오래 기다릴 필요가 없습니다. 다행스럽게도 스타일 시트에서 진보적 인 향상을 사용할 수 있습니다 : calc() calc() 예를 들어 다음과 같은 마진을 조정해야한다는 것을 기억하십시오. calc()

css3

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

및

를 좋아한다면 및

함수를 좋아할 것입니다. 그들은 둘 이상의 쉼표 분리 된 값을 받아들이고 그에 따라 최소 또는 최대 값을 반환합니다. calc() 이 기능은 상대 글꼴 크기를 사용하여 텍스트가 너무 크거나 작지 않도록하는 경우 특히 유용합니다. 불행히도, min() 및 max()는 현재 최신 브라우저에서 지원되지 않습니다. 그들이 곧 나타나기를 바랍니다.

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

(자주 묻는 질문 섹션은 여기에서 생략됩니다.이 부분의 내용은 원래 텍스트와 매우 반복적이기 때문에 의사 원리 성이 더 어렵고 길이가 길어서 기사를 능률화하는 데 도움이되지 않습니다.)

위 내용은 CSS3 보석 : calc () 함수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!