적응형 CSS를 구현하는 방법

CSS에서는 calc() 함수를 사용하여 요소에 "Element:calc(100%-pixel size);"만 추가하면 됩니다. calc() 함수는 CSS3의 새로운 함수로 요소의 길이를 지정하기 위해 계산을 사용하므로 여백이나 테두리 추가로 인해 발생하는 문제에 대해 걱정할 필요가 없습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

적응형 레이아웃의 등장으로 페이지를 만들 때 요소의 너비가 100%인 상황에 자주 직면하게 됩니다. 박스 모델을 아는 친구들은 이 요소에 margin, padding, border가 있으면 이때 요소의 전체 너비가 상위 요소의 너비보다 커져 일련의 레이아웃 문제가 발생할 것이라고 쉽게 상상할 수 있습니다. 무질서한 페이지 구조 등. 이 문제를 해결하기 위해 calc()를 사용할 수 있습니다.

calc()란 무엇입니까

먼저 calc는calculate의 약자이고 두번째로 함수처럼 생겼는데, 요소의 길이를 지정하는데 사용되는 CSS3의 새로운 함수입니다. 계산을 통해 지정되므로 여백이나 테두리 추가에 대해 걱정할 필요가 없습니다.

calc() 사용법

calc()는 계산을 통해 요소의 길이를 설정할 수 있는데 어떻게 구현하나요?

우리는 요소의 높이와 너비가 백분율, px 등과 같은 단위로 정의될 수 있고 calc()가 높이와 너비를 계산할 수 있다는 것을 알고 있습니다. 다음과 같습니다:

width: calc(100% - 10px);

• 계산에는 "+", "-", "*", "/" 연산자를 사용할 수 있습니다.

• 퍼센트, em, px, rem 및 기타 단위를 혼합하여 사용할 수 있습니다. 계산을 위해

• 연산자 앞과 뒤의 공백 사용에 주의하세요

calc() 예

위의 사용법이 매우 간단합니까? 완전한 예를 살펴보겠습니다.
참고: 다음 예는 다음과 같습니다. calc의 사용법과 효과만 보여줍니다. 실제 프로젝트는 필요에 따라 이를 달성할 수 있는 최선의 방법을 찾습니다.

html code snippet

<div class="warpper">
    <div class="box1"></div>
    <hr>
    <div class="box2"></div>
</div>

css code snippet

.warpper {
    width: 200px;
    margin: 0 auto;
    padding: 15px 0;
    background-color: #f00;
}
.box1,
.box2 {
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 10px;
    border: 5px solid #000;
    background-color: #ff0;
}
.box1 {
    width: 100%;
}
.box2 {
    width: calc(100% - (10px + 5px) * 2);
}

box1과 box2의 차이는 너비 정의에 있다는 것을 쉽게 알 수 있습니다. 패딩과 테두리의 가로 너비 값을 제거한 후 calc()에서 계산된 너비가 우리가 원하는 값이 됩니다.

추천 학습: css 비디오 튜토리얼

위 내용은 적응형 CSS를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!