CSS3 박스 크기(box-sizing)

CSS를 사용하여3박스 크기 조정 기능을 사용하면 요소의 유효 너비를 지정할 수 있습니다.

사용자 정의 박스 크기(box-sizing) 박스 너비 다시 정의

기본적으로, 요소의 박스는 보이는 상태입니다/이 웹 페이지에 실제 너비나 높이를 결정합니다width또는height،padding와border속성 값입니다. 예를 들어, 너비가100%의<div>요소가 일부 내간격과 경계선을 적용하면 수평 스크롤이 나타납니다. 아래의 예시와 같습니다.

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　경계선:　5px solid #f08080;
}

이는 웹 디자이너가 오랫동안 직면한 매우 일반적인 문제입니다. 그러나, CSS3introduce-sizing 속성을 사용하여 이 문제를 해결하고 CSS 레이아웃을 더 간단하고 직관적으로 만들 수 있습니다. box-sizing 속성을 사용하여 기본 CSS 상자 모델을 변경하면 요소에 대한 패딩이나 경계선이 설정된 요소의 레이아웃과 그려지며, 요소의 렌더링 너비와 높이가 지정된 CSS width와 height 속성과 일치하게 합니다.

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　경계선:　5px solid #f08080;
　　　　box-sizing: 0;-box;
}

이 예제의 출력을 본 경우 스크롤바가 사라졌음을 발견할 수 있습니다.

Box-sizing을 사용하여-Sizing으로 레이아웃을 생성

CSS 상자-sizing으로 레이아웃을 생성-sizing 속성을 사용하여 백분율로 다 열 레이아웃을 생성하는 것이 매우 간단합니다. 지금부터는 요소의 최종 크기를 고려하지 않고, 그 위에 경계선이나 경계선을 추가할 필요가 없습니다.

아래의 예제는 두 열 레이아웃을 생성하며, 각 열은 동일한 너비를 가지고 있으며,float속성을 가로로 배치합니다.

.box　{
　　　　width:　50%;
　　　　padding:　20px;
　　　　background: 0;2f2f2;
　　　　float: 0;
　　　　box-sizing: 0;-box;
}

이와 같이, 이 간단한 기술을 사용하여 더 복잡한 레이아웃을 생성할 수 있습니다.

.box　{
　　　　width:　30%;
　　　　padding:　20px;
　　　　마진-left:　5%;
　　　　background: 0;2f2f2;
　　　　float: 0;
　　　　box-sizing: 0;-box;
}
.box:first-child　{
　　　　마진-left: 0;
}