CSS에서 "계산된 속성"이란 무엇입니까?

우선, 이 글에서 다룰 계산 속성은 vue의 계산 속성과 아무런 관련이 없습니다.

(추천 튜토리얼: CSS 튜토리얼)

개발 중에 이 문제에 직면했다고 생각합니다.

저는 스타일을 디자인하고 주로 백분율 레이아웃을 사용하므로 다양한 해상도에서 특히 큰 편차가 발생하지 않습니다. px와 같은 고정 단위를 적용하지 않는 것은 어쩔 수 없는 일인데, 부모 요소를 두 부분으로 나누고 머리 부분은 픽셀 px를 사용하는데 바닥 부분은 나머지 크기를 모두 가져야 한다면 어떻게 될까요? Flexbox는 실제로 이 문제를 해결할 수 있지만 실제로 더 좋은 방법은 없을까요?

또 다른 예를 들어, 요소를 옮겨야 하는 경우, 예를 들어 요소를 가운데에 배치해야 하지만 상위 요소가 상대적으로 배치되지 않은 경우 위치를 지정하고 가운데에 맞출 수 없습니다. margin-left:50%를 설정하면 문제가 발생합니다. 자신의 폭의 절반만큼 벗어나서 다시 돌아와야 하는데, 귀찮습니다.

다음은 계산된 속성입니다.

calc(percent - pixel)

예 1:

// 父元素
.box{
    width:100%;
    height:100;
}
// 子元素左边
.boxLeft{
    width:50px;
    height:100%;
}
// 子元素右边
.boxRight{
    width:calc(100% - 50px);
    height:100;
}

예 2:

// 需要居中的盒子
.box{
    width:500px;
    height:400px;
    margin-left:calc(50% - 250px);
    margin-top:calc(50% - 200px);
}

위 내용은 CSS에서 "계산된 속성"이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!