기본적으로 블록 요소는 자동 너비를 사용합니다. 이는 요소가 원래 크기만큼 정확하게 수평으로 늘어남을 의미합니다. 자유 공간. 블록 요소의 기본 높이는 자동으로 설정됩니다. 브라우저는 모든 콘텐츠가 표시되도록 콘텐츠 영역을 수직으로 늘립니다. 요소의 콘텐츠 영역에 대한 맞춤 크기를 설정하려면 너비 및 높이 속성을 사용할 수 있습니다.

CSS의 width 속성을 사용하면 요소의 콘텐츠 영역 너비를 설정할 수 있으며, height 속성을 사용하면 콘텐츠 영역의 높이를 설정할 수 있습니다.

너비와 높이 속성은 콘텐츠 영역의 크기만 결정합니다. 블록 요소의 전체 너비를 계산하려면 콘텐츠 영역의 너비, 왼쪽 및 오른쪽 패딩, 왼쪽 및 오른쪽 너비를 더해야 합니다. 오른쪽 테두리. 요소의 전체 높이도 마찬가지이며 모든 값만 수직으로 계산됩니다.

이 단락에서는 너비와 높이만 설정하겠습니다.

이 단락에는 너비와 높이 외에도 내부 패딩, 테두리 및 외부 패딩이 포함되어 있습니다.

노력하다 "

이 예에서는 두 번째 요소가 첫 번째 요소보다 더 많은 공간을 차지한다는 것을 명확하게 보여줍니다. 공식을 사용하여 계산하면 첫 번째 문단의 크기는 150x100픽셀이고 두 번째 문단의 크기는 다음과 같습니다.

전체 높이:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	높은 액자		높은 들여 쓰기		키		낮추다 들여 쓰기		낮추다 액자

즉, 180x130픽셀입니다.

요소 오버플로

요소의 너비와 높이를 결정한 후에는 한 가지 중요한 사항에 주의해야 합니다. 요소 내부에 있는 콘텐츠가 지정된 블록 크기를 초과할 수 있다는 것입니다. 이 경우 일부 콘텐츠가 요소의 경계를 벗어나게 되므로 이러한 불쾌한 순간을 방지하려면 CSS 오버플로 속성을 사용할 수 있습니다. 오버플로 속성은 블록의 내용이 크기를 초과하는 경우 수행할 작업을 브라우저에 알려줍니다. 이 속성은 다음 네 가지 값 중 하나를 사용할 수 있습니다.

• visible - 브라우저가 사용하는 기본값입니다. 이 값을 설정하면 오버플로 속성을 설정하지 않는 것과 동일한 효과가 있습니다.
• 스크롤 - 요소에 수직 및 수평 스크롤 막대를 추가합니다.
• 자동 - 필요한 경우 스크롤 막대를 추가합니다.
• 숨겨진 - 블록 요소의 경계를 넘어 확장되는 콘텐츠의 일부를 숨깁니다.

블라드 메르제비치

모든 블록 요소는 서로 겹쳐진 양배추 잎과 같은 일련의 속성으로 구성됩니다. 블록의 기본은 콘텐츠(텍스트, 이미지 등일 수 있음)이며 너비는 width 속성으로 지정되고 높이는 height 로 지정됩니다. 콘텐츠 주변에 패딩이 있으면 콘텐츠에서 테두리 내부 가장자리까지 빈 공간이 생성됩니다. 그런 다음 테두리 자체(border)가 나타나고 블록은 테두리 외부 가장자리의 보이지 않는 빈 공간인 여백(margin)으로 완성됩니다. 블록 너비는 복잡한 값이며 여러 속성 값으로 구성됩니다.

• 너비 - 콘텐츠 너비, 즉 블록 내용;
• padding-left 및 padding-right - 콘텐츠의 왼쪽과 오른쪽 여백;
• border-left 및 border-right - 왼쪽 및 오른쪽 테두리의 두께입니다.
• margin-left 및 margin-right - 왼쪽 및 오른쪽 여백.

일부 속성이 누락될 수 있으며, 이 경우 너비는 영향을 받지 않습니다. 전체 너비는 그림 1에 나와 있습니다. 1 검은 점선으로 표시됩니다.

쌀. 1. 블록 폭

너비를 지정하지 않으면 기본값은 auto 입니다. 이 경우 여백, 테두리 및 패딩 값을 유지하면서 블록의 너비는 사용 가능한 전체 너비를 차지합니다. 이 경우 사용 가능한 너비는 상위 블록의 콘텐츠 너비를 의미하고, 상위 블록이 없는 경우 브라우저 콘텐츠의 너비를 의미합니다.

레이어에 대해 다음 스타일이 작성되었다고 가정해 보겠습니다.

너비: 300px; /* 레이어 너비 */ margin: 7px; /* 패딩 값 */ border: 4px solid black; /* 테두리 옵션 */ padding: 10px; /* 텍스트 주변의 여백 */

이 항목에 따른 레이어 너비는 342픽셀과 같습니다. 이 값은 콘텐츠 너비에 왼쪽 패딩, 왼쪽 테두리 및 왼쪽 여백, 오른쪽 여백, 오른쪽 테두리 및 오른쪽 패딩을 더한 값을 더한 값입니다. 모든 숫자를 요약해 봅시다.

너비 = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

너비가 형성된 블록 모델에는 많은 불편함이 따른다는 점에 유의해야 합니다. 특정 블록 너비를 설정해야 할 때 끊임없이 계산을 수행해야 합니다. 결합할 때도 문제가 시작됩니다. 다른 단위측정값, 특히 백분율과 픽셀. 콘텐츠 너비가 90%로 설정되어 있다고 가정하고 픽셀 단위로 지정된 여백과 테두리를 추가하면 백분율이 픽셀로 직접 변환되지 않으므로 블록의 전체 너비를 계산할 수 없습니다. 이로 인해 블록의 전체 너비가 웹 페이지 너비를 초과하여 가로 스크롤 막대가 나타날 수 있습니다. 이 상황을 해결하는 방법에는 두 가지가 있습니다. 블록 모델 알고리즘을 변경하고 중첩 레이어를 사용하는 것입니다.

블록 모델 알고리즘

앞서 언급한 것처럼 블록 너비는 콘텐츠의 너비와 margin, border, padding 값으로 구성됩니다. 브라우저에서 인터넷 익스플로러알고리즘은 자동으로 변경되며 전체 블록의 너비는 너비와 동일하게 설정됩니다. 다른 브라우저는 알고리즘을 그렇게 쉽게 변경하지 않으며 게다가 호환성 모드가 나쁘다는 것을 알고 있습니다. CSS3에는 우리에게 유용할 훌륭한 상자 크기 조정 속성이 있습니다. border-box로 설정하면 너비에 여백과 테두리가 포함되기 시작하지만 안쪽 여백은 포함되지 않습니다. 따라서 box-sizing과 border-box 값을 스타일에 연결하면 너비를 백분율로 설정하고 블록 너비가 변경될 염려 없이 안전하게 테두리와 패딩을 지정할 수 있습니다. 불행히도 이 속성에는 일반적으로 브라우저의 경우와 마찬가지로 작은 문제가 있습니다. 모든 브라우저가 이를 이해하는 것은 아닙니다. 브라우저가 최소한 브라우저별 속성을 지원한다는 점이 기쁘네요. 테이블에 1은 브라우저 지원을 보여줍니다.

테이블 1. 상자 크기 속성에 대한 브라우저 지원

브라우저	인터넷 익스플로러	크롬	오페라	원정 여행	파이어폭스
버전	8.0+	2.0+	7.0+	3.0+	1.0+
재산	상자 크기 조정	-웹킷 상자 크기 조정	상자 크기 조정	-웹킷 상자 크기 조정	-moz-박스 크기 조정

표에서 볼 수 있듯이 속성에 혼란과 동요가 있으므로 하이브리드를 만들어 세 가지 속성을 모두 표시해야 합니다(예1).

예시 1: 블록 너비

HTML5 CSS3 IE Cr Op Sa Fx

이 예는 표에 나열된 모든 브라우저에서 작동합니다. 1. 그러나 -moz 및 -webkit으로 시작하는 비표준 속성을 사용하기 때문에 CSS3에서는 유효하지 않습니다. 블록 너비는 패딩 값을 포함하여 100%입니다. 상자 크기 조정 속성이 없으면 브라우저에 가로 스크롤 막대가 나타납니다.

중첩된 레이어

box-sizing 속성을 사용하는 것은 이전 버전의 IE에서는 작동하지 않는다는 점을 제외하면 모든 사람에게 좋습니다. IE7 및 IE6을 기반으로 웹사이트를 디자인하는 경우, 오래되고 입증된 레이어 중첩 방법이 적합합니다. 아이디어는 간단합니다. 외부 블록 요소에는 필요한 너비만 설정되고 중첩 블록에는 여백, 테두리 및 패딩 등 다른 모든 것이 설정됩니다. 블록의 기본 너비는 상위 블록의 사용 가능한 너비와 동일하므로 블록은 어떤 의미에서는 서로 겹치지만 결합된 요소의 실제 너비는 명확하게 정의됩니다. 예제 2에서는 중첩된 레이어를 사용하는 방법을 보여줍니다.

예 2: 중첩된 레이어

HTML5 CSS 2.1 IE Cr Op Sa Fx

결과 이 예그림에 표시됩니다. 2.

쌀. 2. 블록 너비(%)

중첩된 레이어의 장점은 들여쓰기 사용(상자 크기 조정에서는 이를 고려하지 않음), 방법의 다양성, 원할 경우 배경을 하나 또는 다른 레이어에 추가할 수 있다는 점입니다. 이게 좀 바뀌네요 모습요소의 경우 배경 이미지를 포함할 때 특히 그렇습니다. 이 방법의 단점 중 하나는 추가 블록이 포함되어 코드 구조가 복잡하다는 점입니다. 특히 해당 방법을 자주 사용하는 경우 더욱 그렇습니다. 하지만 이는 이점에 비하면 작은 일이라고 볼 수 있다.

설명

블록 수준 또는 교체 가능한 요소(예: 태그)의 너비를 설정합니다. ). 너비에는 요소 주위의 테두리 두께, 패딩 또는 여백 값이 포함되지 않습니다.

브라우저는 너비를 동일한 방식으로 처리하지 않으며 표시 결과는 사용된 브라우저에 따라 다릅니다.. 테이블에 1개가 주어진다 가능한 옵션 그리고 결과 너비.

테이블 1. 브라우저의 너비 동작

	인터넷 익스플로러	오페라 10+, 파이어폭스, 크롬, 사파리	오페라 9
지정되지 않음(호환 모드)	콘텐츠가 지정된 너비를 초과하면 콘텐츠에 맞게 블록 크기가 조정됩니다. 그렇지 않은 경우 블록의 너비는 너비 값과 같습니다.	모든 경우에 브라우저는 CSS 사양에 따라 작동합니다. 즉, 블록의 너비는 width, padding, margin 및 border 값을 추가하여 얻습니다. 블록의 내용이 지정된 치수에 맞지 않으면 블록 위에 표시됩니다.	너비는 너비 값과 같습니다.
전환 HTML
엄격한 HTML	너비는 너비, 패딩, 여백 및 테두리 값을 추가하여 구성됩니다. 블록의 내용이 지정된 크기에 맞지 않으면 맨 위에 표시됩니다.		너비는 너비 값에 padding, margin 및 border를 더한 값과 같습니다. 블록의 내용이 지정된 크기에 맞지 않으면 맨 위에 표시됩니다.
HTML5
XHTML

통사론

너비: 값 | 관심 | 자동 | 상속하다

가치

CSS에서 허용되는 모든 길이 단위는 값으로 허용됩니다(예: 픽셀(px), 인치(in), 포인트(pt) 등). 백분율 표기법을 사용할 때 요소의 너비는 요소의 너비에 따라 계산됩니다. 부모 요소. 상위 항목을 명시적으로 지정하지 않으면 브라우저 창이 그 역할을 합니다.

자동 요소 유형 및 콘텐츠에 따라 너비를 설정합니다. 상속 상위 값을 상속합니다.

HTML5 CSS2.1 IE Cr Op Sa Fx

Safari 브라우저에 나타나는 이 예의 결과는 그림 1에 표시됩니다. 1.

쌀. 1. 블록 폭

객체 모델

document.getElementById("elementID ").style.width

브라우저

Internet Explorer 6에서는 너비를 min-width 로 잘못 정의합니다. 특수 모드에서 8.0 이하의 Internet Explorer 버전은 패딩, 여백 또는 테두리 값을 추가하지 않고 요소의 너비를 잘못 계산합니다.

Internet Explorer 버전 7.0 이하에서는 상속 값을 지원하지 않습니다.

아마도 테이블 형식 레이아웃에 비해 div 레이아웃의 장점에 대해 아무에게도 말할 필요가 없을 것입니다. 모두가 오랫동안 이것을 이해하고 테이블에서 레이아웃으로 전환했습니다. 전환하지 않은 사람들은 곧 자신의 실수를 이해하고 그렇게 할 것입니다. 그러나 모든 교훈 - 여기에는 함정도 있습니다. 디바가 제대로 작동하지 않거나 특정 구조를 배치하는 것이 불가능하고 장애물이 많지만 레이아웃 디자이너는 항상 한 명뿐입니다...

이 게시물은 초보자를 대상으로 작성되었지만 전문가도 여기에서 흥미로운 내용을 발견할 수 있습니다. 그럼 사업을 시작합시다!

이것은 항상 기억할 가치가 있습니다

가능한 한 자주 그리고 정확하게 따라야 하는 레이아웃 접근 방식이 하나 있습니다. 이것이 DOM 트리의 광물화입니다. 여기에는 몇 가지 확실한 장점이 있습니다. 즉, 레이아웃 프로세스 자체를 단순화하고 잠재적인 오류 수를 최소한으로 줄이며 코드 투명성을 향상시킵니다. 우리는 항상 이것을 기억하고 구조를 계획할 때 특별한 주의를 기울여야 합니다.

기본 원칙은 다음과 같습니다. 들여쓰기를 위해 필요에 따라 패딩과 여백만 사용합니다. 별도의 20픽셀 div를 만들 필요가 전혀 없으며 중첩을 최소한으로 제한하고 위치를 과도하게 사용하지 않습니다. : 상대 및 후속 블록 오프셋(잘못 사용하면 전체 코드를 편집하는 데 30분이 걸릴 수 있음), 원하는 효과를 얻기 위해 Z-인덱스를 적극적으로 사용합니다.

자주하는 질문

- div를 하나씩 배치하는 방법은 무엇입니까?이를 위해 float: left(또는 필요에 따라 오른쪽) 속성을 사용하여 이러한 대체 div 뒤의 다음 div가 그 아래에 있도록 하고 이를 명확한 속성(예: Clear: left)으로 설정합니다.

- div를 중앙에 배치하는 방법은 무엇입니까?하나의 솔루션은 다음과 같습니다 다음과 같은 방법으로- margin-left 및 margin-right를 자동으로 설정합니다(또는 더 간단하게 - margin:0 auto;).

- div의 요소를 수직으로 배치하는 방법은 무엇입니까?요소에 따라 다릅니다. 예를 들어 텍스트의 경우에는 Vertical-align:middle만 지정하면 충분하지만, 이미지의 경우에는 line-height:Npx를 지정해야 합니다.

- 여백이나 패딩을 사용하여 들여쓰기하시겠습니까?기본적으로 여백은 블록 사이의 들여쓰기 역할을 합니다. 패딩은 "내부" 들여쓰기이고 예를 들어 텍스트 주변의 들여쓰기를 구성하는 데 가장 자주 사용되기 때문에 "외부" 들여쓰기입니다. 단순한 일인 것 같지만 때로는 여기에서 언급하지 않을 수 없을 만큼 방화벌레와 같은 보석을 발견할 수도 있습니다.

- 수평 및 수직 오프셋과 함께 여백 또는 위치:상대를 사용하여 블록을 이동하시겠습니까?물론 이러한 경우에는 마진을 사용해야 합니다. 사실, 다른 곳과 마찬가지로 모두 특정 사례에 따라 다르지만 일반적으로 여백을 사용해야 합니다.

- 블록의 내용에 맞게 div를 늘리는 방법은 무엇입니까?이렇게 하려면 height: auto;를 지정해야 합니다.

div를 상위 div의 높이까지 늘리는 방법은 다음과 같습니다. 그러면 상위 div는 첫 번째 div 옆에 있는 div 콘텐츠의 높이까지 늘어납니다. 콘텐츠 div를 height: auto로 설정하고 다른 두 div는 height: 100% 및 display: table;로 설정합니다.

- div를 보이지 않게 만드는 방법은 무엇입니까?표시 속성을 조작하여. 숨기려면 없음으로 설정하세요.

- 정적 높이를 사용하여 div에서 콘텐츠 스크롤을 만드는 방법은 무엇입니까?속성에서 Overflow:scroll을 설정했습니다.

- 예를 들어 "a" 태그를 div(블록)로 표시하는 방법은 무엇입니까?속성에서 높이와 너비를 설정하고 디스플레이:블록을 설정합니다.

이것이 바로 div를 쉽게 입력하기 위해 알아야 할 전부입니다. 사실. 다른 질문이 나타나면 여기에 답변이 즉시 표시됩니다! 그러나 일반적으로 두려워할 것은 없습니다. 30분 동안 훈련하면 '이미 프로입니다. 따라서 이러한 오래된 테이블을 제쳐두고 새로운 진화 단계로 나아가십시오!

태그: 자주 묻는 질문, div, 레이아웃, 튜토리얼

다음 프로젝트를 레이아웃할 때(또는 레이아웃 그리드를 디자인할 때) 많은 사람들이 딜레마에 직면했습니다. 즉, 고정된 레이아웃 너비를 사용하거나 브라우저 창 크기에 맞춰 조정되는 "고무" 그리드를 사용해야 하는 것입니다.

이러한 솔루션 각각에는 고유한 장단점이 있습니다. 일반적으로 두 가지 악 중에서 선택해야 하는 것은 이러한 결정의 단점을 정확하게 반영하기 때문에 단점에 초점을 맞추고 싶습니다.

고정 레이아웃 그리드 너비

레이아웃은 960-980픽셀의 수평 크기로 강제 설정되어(대부분의 해상도에서 대부분의 장치에 모든 것이 포함되도록) 큰 수평 창 크기를 사용하면 다소 쌀쌀해 보입니다. 유용한 페이지 콘텐츠의 얇은 수직 스트립과 거대한 쓸모 없는 필드입니다. 측면의 사용되지 않은 공간.

창 너비에 걸쳐 있는 "고무" 레이아웃 그리드

다시 말하지만, 가로 창 크기가 크면 또 다른 문제가 있습니다. 텍스트 줄이 매우 길어지고 텍스트를 읽는 것이 원하는만큼 편안하지 않습니다.
이 솔루션의 또 다른 일반적인 문제는 수평 창 크기가 큰 측면 여백이 더 이상 요소의 수평 크기와 시각적으로 일치하지 않는다는 것입니다. 이는 또한 레이아웃을 볼 때 편안함을 더해 주지 않습니다.

저는 간단한 해결책을 제안하고 싶습니다. 최소 수평 크기를 픽셀 단위의 고정 값으로 제한하고 최대 크기를 창 너비의 백분율로 설정합니다. 이것은 매우 사소한 해결책이다 간단한 방법으로 CSS 사양의 2가지 추가 버전.

업데이트:우리는 고전적인 고무 효과와 절대적으로 모든 해상도에 대한 적응에 대해 이야기하는 것이 아니라 레이아웃이 설계된 특정 합리적인 해상도 범위에 대해서만 이야기하고 있음을 유보하고 싶습니다. 아래 예에서 이는 수평 해상도 크기가 1024픽셀인 클래식 데스크탑 해상도 범위입니다.

다시 강조하겠습니다.이 게시물은 모든 유형의 장치와 모든 해상도 범위에 대한 솔루션에 대해 이야기하는 것이 아닙니다. 이 문제는 원칙적으로 하나의 레이아웃 프레임워크 내에서 해결될 수 없습니다., 어떤 식으로든 해결하려면 여러 레이아웃이 필요합니다. 별도로 날아가고, 커틀릿은 별도로 날아갑니다.

레이아웃 컨테이너를 만듭니다.
...
간단한 스타일 코드로 장식합니다.
div.page-container( 최소 너비: 960px; 최대 너비: 75%; 여백: 0 자동; 패딩: 0; )
그러나 수평 창 크기가 매우 크면 선 길이 문제가 다시 나타나기 때문에 일부 사람들에게는 이 솔루션이 충분하지 않은 것처럼 보일 수 있습니다. 이 문제는 똑같이 간단한 추가 기술로 해결할 수 있습니다. 이미 설명한 컨테이너 내부에 추가 외부 컨테이너를 만들고 최대 너비를 고정 값으로 제한하는 것입니다(주관적으로 1400-1600픽셀 범위의 값은 가장 적합합니다). 다시 우리는 단지 CSS 도구 2.0. 이 솔루션은 첫 번째 의견에서 제안한 대로 단순히 원래 컨테이너의 너비를 백분율로 추가하는 대신 값의 동시 표시를 이해하지 못하는 버전 9까지의 IE에서도 작동합니다.

HTML 추가:
...

그리고 CSS를 약간 변경하세요.
div.page-container(최대 너비: 75%; 최소 너비: 960px; 여백: 0 자동; 패딩: 0; ) div.page-container-inner(최소 너비: 960px; 최대 너비: 1600px; 여백 : 0 자동, 패딩: 0; )
보시다시피 솔루션은 매우 간단하고 보편적이며 모든 블록 요소에 사용할 수 있습니다.