CSS 박스 모델 관리

CSS 박스 모델 : 웹 레이아웃을 이해하는 키 CSS를 이해하는 데있어 가장 중요한 것은 다음과 같습니다. 보다 구체적으로, 문서의 각 요소는 상자를 생성합니다. 이 상자는 블록 레벨 박스 또는 인라인 레벨 상자 일 수 있습니다. 상자 유형은 요소가 페이지 레이아웃에 어떤 영향을 미치는지 결정합니다. CSS 박스 모델은 HTML 요소의 레이아웃과 크기를 설명하는 데 사용되는 개념입니다. 각 요소에는 내용, 채우기, 테두리 및 여백에 대한 상자가 포함되어 있습니다. 이 상자는 요소의 내용의 레이아웃과 인접 요소가 그들과 나란히 나타나는 방법을 결정하기 위해 결합됩니다.

요소가 상자를 생성하는지 여부와 생성 된 상자 유형은 마크 업 언어에 따라 다릅니다. CSS는 HTML 문서를 스타일링하는 방법으로 발전 했으므로 많은 CSS 시각 렌더링 모델은 블록 레벨과 인라인 요소를 구별하는 HTML에서 비롯됩니다. 기본적으로 및 와 같은 요소는 블록 레벨 상자를 생성하지만 , 및 인라인 상자를 만듭니다. 반면에 SVG는 박스 모델을 사용하지 않으므로 대부분의 레이아웃 관련 CSS 속성은 SVG와 함께 사용할 수 없습니다.

블록 레벨 박스는 그림 4.1과 같이 새로운 컨텐츠 블록을 만듭니다. 블록 레벨 박스의 렌더링은 수직이며 소스의 순서대로 배열되며 (테이블을 제외하고) 포함 된 요소의 사용 가능한 너비를 채우도록 확장됩니다. 이것을 일반 스트림이라고합니다. 블록 레벨 박스의 , ,

또는 )입니다.

<.> 그림 4.1. 요소 내에 H1, P, UL 및 테이블 요소를 포함하는 블록 레벨 박스 (회색 영역). 대조적으로, 인라인 레벨 박스는 새로운 컨텐츠 블록을 형성하지 않습니다. 대신,이 상자는 블록 레벨 상자 내에서 행을 형성합니다. 그들은 상자의 너비를 수평으로 표시하고 채우고 그림 4.2와 같이 필요한 경우 랩핑됩니다. 인라인 레벨 박스의 , ,

<section></section> <.> 그림 4.2. 마진이있는 인라인 상자의 예 : 1em 및 패딩 : 5px 적용 <a></a>. 하지만 상자의 크기는 어떻게 계산됩니까? 이것은 상황이 더 복잡해지는 곳입니다. 그림 4.3에서 볼 수 있듯이 박스 크기는 상자 내용 영역, 충전 너비 및 테두리 너비의 합입니다. 마진 너비는 요소에 대한 마진 상자를 생성하고 문서의 다른 요소에 영향을 미칩니다. 마진 너비는 상자 자체의 크기에 영향을 미치지 않습니다. <span></span> <em></em> <.> 그림 4.3예를 들어, , 및 width: 300px 인 요소는 360 픽셀의 계산 너비를 갖는다. 이것은 너비, 왼쪽 및 오른쪽 충전 및 왼쪽 및 오른쪽 테두리 너비 속성의 합입니다. 너비의 300 픽셀, 20 픽셀 채우기 및 10 픽셀 경계를 가진 요소를 만들려면 너비를 240px로 설정해야합니다. 이것이 대부분의 주류 브라우저가 폭을 계산하는 방식입니다. 브라우저 간의 경쟁 모델의 일부 문제를 해결하기 위해 CSS 실무 그룹은 <code>padding: 20px 속성을 ​​도입했습니다. 좋아하는 박스 모델 구현을 선택하고 반응 형 디자인을 처리 할 때 계산을 크게 단순화 할 수 있습니다. border: 10px 사용 <p></p> 선택 상자 모델을 선택하십시오 속성은 CSS 기본 사용자 인터페이스 모듈 레벨 3 사양에 정의되어 있습니다. 두 가지 가능한 값이 있습니다. 처음에 box-sizing 및 속성을 ​​설정하면 콘텐츠 영역의 크기에 영향을 미칩니다. 이것은 CSS 2.1 사양에 정의 된 동작과 일치하며 현대식 브라우저의 기본 동작입니다 (그림 4.4와 같이). 의 값을

로 설정하면 몇 가지 마법 효과가 발생합니다.

및 box-sizing의 값은 이제 컨텐츠 영역 대신 외부 경계 가장자리에 적용됩니다. 테두리와 채우기는 원소 상자 안에 그려져 Old Internet Explorer 5.5 동작과 일치합니다. 비율과 PX 단위를 사용하여 충전과 경계의 혼합 예를 살펴 보겠습니다.

우리의

및 box-sizing 요소는 다음 CSS를 모두 적용합니다.이 CSS는 그림 4.5에 표시된 레이아웃을 제공합니다. 여기서 첫 번째 요소는 폭이 60%이고 두 번째 요소의 너비는 60% 40%입니다. > content-box border-box <.> 그림 4.5 기본적으로 box-sizing 및 content-box 값은 둘 다 width입니다. height 및 에 box-sizing 및 border-box 요소를 추가합시다 : width height 그림 4.6의 변화를 볼 수 있습니다. 요소의 너비는 동일하지만

는 폭에 경계와 패딩이 포함되어 있음을 의미합니다. 속성은 내용 영역이 아닌 테두리 에지에 적용되므로 요소는 이제 나란히 배열됩니다.

<code class="language-html"><div class="wrapper">
  <article>
    <h2>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div></code>

<.> 그림 4.6 프로젝트에서

를 사용하는 것이 좋습니다. 충전 및 경계의 값을 고려하기 위해 폭 값을 계산할 필요가 없기 때문에 생명이 더 쉬워지며 상자 동작이 더 예측 가능합니다. 를 적용하는 가장 좋은 방법은 재설정 규칙을 사용하는 것입니다. 다음 예제는 Chris Coyier의 CSS- 트릭 기사 "상자 크기 상속이 약간 더 나을 수 있습니다-모범 사례": 에서 나옵니다. box-sizing: border-box 이것은 프로젝트의 기존 부분의 box-sizing: border-box 동작에 영향을 미치지 않으면 서 기본적으로

크기를 기본적으로 적용합니다.

<code class="language-html"><div class="wrapper">
  <article>
    <h2>This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2>This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div></code>

동작에 의존하는 타사 또는 레거시 구성 요소가 없다는 것을 알고 있다면 다음 규칙을 단순화 할 수 있습니다.

관리 박스 모델은 복잡한 레이아웃을 만드는 방법을 이해하는 데있어 하나의 요소 일뿐입니다. border-box CSS 박스 모델에 대한 FAQ (FAQ) box-sizing (FAQ 부분은 기사가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기서 생략됩니다. FAQ 부품을 필요에 따라 추가하거나 수정할 수 있습니다.)

위 내용은 CSS 박스 모델 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!