CSS3 상자 크기 : margin-box; 왜 안돼?

왜 없어 box-sizing: margin-box;? 일반적으로 box-sizing: border-box;스타일 시트를 넣을 때 실제로 전자를 의미합니다.

예:

2 열 페이지 레이아웃이 있다고 가정 해 봅시다. 두 열의 너비는 50 %이지만 거터가 없기 때문에 추악한 것처럼 보입니다 (중간 간격). 아래는 CSS입니다.

.col2 {
    width: 50%;
    float: left;
}

거터를 적용하기 위해 두 열 중 첫 번째 열에 올바른 여백을 설정할 수 있다고 생각할 수 있습니다. 이 같은:

.col2:first-child {
    margin-right: 24px;
}

그러나 이것은 다음과 같은 사실 때문에 두 번째 열을 줄 바꿈으로 만듭니다.

50% + 50% + 24px > 100%

box-sizing: margin-box;계산 된 요소 너비에 여백을 포함 시켜이 문제를 해결할 것입니다. 보다 유용하지 않다면 이것이 매우 유용 할 것 box-sizing: border-box;입니다.

당신 width: calc(50% - 24px);은 당신의 동료 를 위해 사용할 수 없습니다 ? 그런 다음 여백을 설정하십시오.

나는 우리가 가질 수 있다고 생각합니다 box-sizing: margin-box. CSS 상자 모델은 프레임의 여백 위치를 정확하게 보여줍니다.

마진 상자가 겹칠 수있는 사소한 문제가 있지만 해결하기는 어렵지 않습니다.

테이블 셀의 절대 위치 div, 상자 크기와 최소 / 최대 너비의 조합 등으로 overflow-x& overflow-y조합으로 볼 수 있듯이 상황은 동일하다고 생각 합니다.

브라우저 개발자가 개발하지 않은 기능, 정말 간단한 기능이 있습니다.

IMHO box-sizing: margin-box는 매우 유용한 기능이었습니다. 또 다른 유용한 기능은입니다. box-sizing: padding-box적어도 표준에는 있지만 주요 브라우저에서는 구현되지 않았습니다. 최신 크롬조차도!

참고 : @Oriol의 의견 : Firefox는 box-sizing : padding-box를 구현했습니다. 그러나 다른 사람들은 그렇지 않았으며 사양에서 제거되었습니다. Firefox는 버전 50에서 제거합니다. 슬픈.

상단의 사람은 패딩 및 테두리를 포함하여 전체 너비에 여백을 추가하는 것에 대해 묻고 있습니다. 문제는 상자 외부에 여백이 적용되고을 사용할 때 패딩과 테두리가 적용되지 않는다는 것 border-box입니다.

나는 border-margin아이디어 를 달성하려고 노력했다 . 내가 찾은 것은 margin을 사용 .last하면 마지막 항목에 클래스를 추가 할 수 있습니다 (margin을 사용하여 margin을 0으로 적용하거나을 사용할 수 있음 :last-child/:last-of-type). 또는 주위의 여백을 모두 추가하십시오 (위의 패딩 버전과 유사).

여기 예를 참조하십시오 : http://codepen.io/mofeenster/pen/Anidc

border-box요소의 너비 + 패딩 + 테두리를 총 너비로 계산합니다. 따라서 div너비가 50 % 인 2 초가 있으면 인접 해 있습니다. 8px패딩을 추가 하면 거터가 나타납니다 16px. 패딩 기능이있는 래핑 요소와 결합 8px하면 모든 홈에 동일한 홈통이있는 격자가 멋지게 배치됩니다.

여기이 예제를 참조하십시오 : http://codepen.io/mofeenster/pen/vGgje

후자는 내가 가장 좋아하는 방법입니다.

나는이 모든 것이 명백하다는 것을 확신하지만 어쨌든 그것을 입력 할 것이다. 다음 결과는 효율적인처럼하지 않을까요 box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizing패딩 및 경계가 요소의 전체 크기로 평가되는 지점을 제어하는 ​​데 사용됩니다. 따라서 너비가 보통 인 px여백 을 포함하는 것은 좋지 않지만 %(정상적으로 항상 그렇듯이) 패딩과 테두리를 정의 된 너비에 포함시킬 필요가 없기 때문에 상대적 백분율 양을 계산하는 것이 더 쉽습니다.

상자 크기 속성은 주어진 차원 별 값 (패딩, 경계)을 계산 한 후 요소의 크기를 참조하기 때문입니다. "상자 크기 : border-box"는 요소의 높이 / 너비를 설정하고 패딩과 테두리 너비를 고려합니다. 요소의 여백 범위는 요소 자체보다 큽니다. 즉, 페이지와 주변 요소의 흐름을 수정하므로 요소가 형제 요소에 비해 부모 내에서 요소가 맞는 방식을 직접 변경합니다. 궁극적으로 "margin-box"속성 값은 주요 문제를 야기하며 본질적으로 요소 높이 / 너비를 직접 설정하는 것과 같습니다.

에 Codrops 오버 플로우 강제 마진과 행의의 효과의 주제에 대한 좋은 기사 몇있다. 모든 브라우저에서 글꼴 크기를 100 %로 설정하는 노멀 라이저 CSS와 함께 rem 또는 em 단위를 사용하는 것이 좋습니다. 너비와 여백을 설정할 때 단순히 주석에 메모를 작성하여 행 너비에 대한 영향을 쉽게 추적 할 수 있습니다 총 폭 16px에서 1em으로 변환하는 것은 대상 뷰포트의 총 witdh를 계산하는 방법입니다.

최소한 dev 단계에서 그런 식으로 작업 한 다음 '응답 성있는'템플릿을 원하면 여백 너비를 포함하여 너비를 %로 변환 할 수 있습니다.

그들이 거터를 처리하도록 제안하는 다른 간단한 방법은 의사가 content: '';잘 작동하는 각 열에 의사를 사용하는 것입니다. end와 같이 정의 된 마지막 열인 div 클래스를 설정하면 그 뒤에 의사가 없거나 더 넓은 클래스가 없도록 해당 클래스를 대상으로 지정할 수 있습니다. 어떤 레이아웃에 가장 적합합니다.

이 유사 요소 방법을 사용하면 추가로 그림자 모니터를 제공하여 판독기 모니터의 평평한 이미지에 3D 효과와 깊이를 더할 수 있습니다. 버튼에 사용되는 효과를 스케일 업하고 그라디언트를 왜곡하고 z- 인덱스를 사용 하여이 효과를 실험하고 있습니다.

정상 흐름에서 대체되지 않은 블록 레벨 요소의 치수 는 다음을 충족해야합니다.

여백-왼쪽 + 테두리-왼쪽-폭 + 패딩-왼쪽 + 너비 + 패딩-오른쪽 + 테두리-오른쪽 너비 + 여백-오른쪽 = 포함 블록의 너비

제한이 크면 브라우저는 왼쪽 또는 오른쪽 여백을 조정해야합니다. 나는 그것이 마진 박스의 너비 가 포함하는 블록 (즉 100 %)의 폭과 동일.

귀하의 경우 투명 테두리가 box-sizing: border-box여백과 매우 유사하게 작동 할 수 있습니다 .

RGBA를 사용하여 테두리를 0 % 불투명도로 설정하고 테두리를 여백으로 사용합니다.

상자 크기를 사용할 때 흥미로운 상황본문 있습니다.

내용 없음 테두리 상자가 없으면이 두 상자 다시 계산 알고리즘의 왼쪽 오른쪽 여백 % 계산에 값이 없습니다.

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

57 이전의 Firefox 버전은 상자 크기 조정을위한 padding-box 값도 지원했지만이 값은 브라우저의 스펙 및 이후 버전에서 제거되었습니다.

마진 박스조차 계획되지 않았습니다 ...