HTML 단락 서식 지정. 이론과 실습

설명

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

브라우저는 너비에 따라 다르게 작동하며 표시 결과는 사용된 브라우저에 따라 다릅니다.. 테이블에서. 1이 주어진다 가능한 옵션 결과 너비.

통사론

너비: 값 | 이자 | 자동 | 계승하다

가치

값은 픽셀(px), 인치(in), 포인트(pt) 등과 같은 모든 CSS 길이 단위를 허용합니다. 백분율 표기법을 사용할 때 요소의 너비는 부모 요소의 너비를 기준으로 계산됩니다. 부모가 명시적으로 지정되지 않은 경우 브라우저 창이 부모 역할을 합니다.

자동 요소의 유형과 내용에 따라 너비를 설정합니다. 상속 부모의 값을 상속합니다.

HTML5 CSS2.1 IE Cr Op Sa Fx

결과 이 예에 나타난 바와 같이 사파리 브라우저그림에 나와 있습니다. 1.

쌀. 1. 블록 폭

개체 모델

document.getElementById("요소 ID ").style.width

브라우저

Internet Explorer 6은 너비를 min-width 로 올바르게 정의하지 않습니다. 쿼크 모드에서 버전 8.0까지의 Internet Explorer는 패딩, 여백 및 테두리를 추가하지 않고 요소의 너비를 잘못 계산합니다.

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

이 방대한 튜토리얼 기사는 중요한 주제를 다룰 것입니다. 그 목적은 블록 요소로 작업하는 방법을 분류하고 요소의 너비와 높이에 대한 계산 모델의 변경 사항이 무엇인지, 제어 방법을 독자에게 설명하는 것입니다. 블록 요소의 오버플로, 최소 및 최대 요소 크기로 작업하는 방법.

CSS 박스 모델에 대해 알아보면서 우리는 width, height 속성이 요소 내부 영역의 너비와 높이를 설정한다는 것을 배웠습니다( 콘텐츠 영역), 텍스트, 이미지 및 기타 요소를 포함할 수 있습니다.

CSS 상자 모델에서 요소에 부여한 너비와 높이 값과 브라우저가 요소를 표시하기 위해 예약한 공간 사이에는 차이가 있습니다. 요소의 총 너비와 높이는 패딩, 테두리 및 지정된 사용자 지정 값의 너비와 높이로 구성된 브라우저 창의 영역입니다.

요소의 전체 너비는 다음 공식을 사용하여 계산됩니다.

우리의 경우 이것은 상황을 저장하고 계산을 수행할 필요가 없으며 앞으로 요소에 필요할 수 있는 변경 사항을 두려워합니다. 이러한 불필요한 계산은 브라우저 측에 남겨두고 예제의 결과를 살펴보겠습니다.

요소의 너비와 높이를 계산하는 이 모델을 최종적으로 이해하기 위해 다음 예에서 얻은 지식을 통합해 보겠습니다.

content-box 속성의 값은 기본값이며 클래식 체계에 따라 요소의 전체 너비와 높이를 계산합니다. 너비 예:

150px(맞춤 너비) + 10px(왼쪽 패딩) + 10px(오른쪽 패딩) + 10px(왼쪽 테두리) + 10px(오른쪽 테두리) = 190px .

border-box 값으로 속성을 적용한 두 번째 요소의 경우 요소의 너비와 높이에 대한 사용자 정의 값에는 이미 요소의 내용, 테두리(border) 및 패딩(padding)이 포함되어 있습니다. 대부분의 경우 페이지에서 border-box 값이 있는 속성을 사용하는 것이 좋습니다. 요소의 최종 크기를 명확하게 하고 위에서 설명한 예기치 않은 상황을 방지하기 때문입니다.

예제의 결과:

블록 요소의 오버플로 제어

레이아웃 프로세스 중에 요소의 콘텐츠가 요소의 테두리 밖에 표시되는 상황이 있습니다. 기본적으로 브라우저는 이러한 콘텐츠를 표시하며(요소 오버플로가 표시됨) 경우에 따라 시각적 오류가 발생합니다. overflow CSS 속성은 브라우저의 이러한 동작을 담당합니다. 가능한 값을 고려하십시오.

다음 예를 살펴보겠습니다.

이 예에서는 네 CSS 오버플로 속성의 다른 값이 지정된 고정 너비 및 높이 블록:

• 첫 번째 블록(보이는 값) – 콘텐츠가 요소의 범위를 넘어 확장됩니다(기본값).
• 두 번째 블록(값 숨김 ) - 요소를 초과하는 콘텐츠는 잘립니다.
• 세 번째 블록( scroll 값 ) - 오버플로가 잘리지만 스크롤 막대가 추가됩니다.
• 네 번째 블록(값은 auto ) - scroll 값과 마찬가지로 블록이 특정 축을 따라 오버플로되면 스크롤바만 자동으로 추가됩니다( 엑스가로 또는 와이- 세로) 페이지에 영구적으로 표시되지 않습니다.

예제의 결과입니다.

설명

HTML을 사용하여 이미지 크기를 조정하기 위해 높이 및 너비 속성이 제공됩니다. 픽셀 또는 백분율 값을 사용할 수 있습니다. 백분율 표기법이 설정된 경우 이미지 크기는 상위 요소(태그가 있는 컨테이너)를 기준으로 계산됩니다. . 부모 컨테이너가 없으면 브라우저 창이 부모 컨테이너 역할을 합니다. 즉, width="100%"는 이미지가 웹 페이지의 전체 너비로 확장됨을 의미합니다. 하나의 너비 또는 높이 속성만 추가하면 이미지의 종횡비와 종횡비가 유지됩니다. 그런 다음 브라우저는 초기 높이와 너비를 결정하기 위해 이미지가 완전히 로드될 때까지 기다립니다.

웹 페이지의 모든 이미지 크기를 확인하십시오. 이렇게 하면 브라우저가 이미지를 받은 후 각 이미지의 크기를 계산할 필요가 없기 때문에 페이지 로드가 조금 더 빨라집니다. 이 문은 테이블 내부에 배치된 이미지에 특히 중요합니다.

이미지의 너비와 높이는 위아래 모두 변경할 수 있습니다. 그러나 파일 크기는 변경되지 않으므로 사진의 다운로드 속도에는 어떤 식으로든 영향을 미치지 않습니다. 따라서 주의해서 이미지를 줄이십시오. 이렇게 작은 그림을 로드하는 데 왜 그렇게 오래 걸리는지 독자들 사이에 혼란이 생길 ​​수 있습니다. 그러나 크기를 늘리면 반대 효과가 나타납니다. 이미지 크기는 크지만 같은 크기의 이미지에 비해 파일이 더 빨리 로드됩니다. 그러나 사진의 품질이 저하됩니다.

통사론

HTML
XHTML

가치

픽셀 또는 백분율의 모든 양의 정수.

기본값

이미지의 원래 너비입니다.

HTML5 IE Cr Op Sa Fx

설명

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

블록의 내용이 지정된 높이를 초과하면 요소의 높이가 변경되지 않고 내용이 그 위에 표시됩니다. 이 기능은 HTML 코드에서 요소가 순차적일 때 요소 콘텐츠가 겹칠 수 있습니다. 이를 방지하려면 요소의 스타일에 overflow : auto 를 추가하십시오.

통사론

높이: 값 | 이자 | 자동 | 계승하다

가치

값은 픽셀(px), 인치(in), 포인트(pt) 등과 같은 모든 CSS 길이 단위를 허용합니다. 백분율 표기법을 사용할 때 요소의 높이는 부모 요소의 높이를 기준으로 계산됩니다. 부모가 명시적으로 지정되지 않은 경우 브라우저 창이 부모 역할을 합니다. auto는 요소의 내용에 따라 높이를 설정합니다.

HTML5 CSS2.1 IE Cr Op Sa Fx

이 예제의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 높이 속성 적용

개체 모델

document.getElementById("요소 ID ").style.높이

브라우저

Internet Explorer 6은 높이를 min-height로 올바르게 정의하지 않습니다.

쿼크 모드에서 버전 8.0까지의 Internet Explorer는 패딩, 여백 및 테두리를 추가하지 않고 요소의 높이를 잘못 계산합니다.

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

기본적으로 블록 요소는 자동 너비를 사용합니다. 즉, 요소가 정확히 가로로 늘어납니다. 자유 공간. 블록 요소의 높이는 기본적으로 자동으로 설정됩니다. 브라우저는 모든 콘텐츠가 표시되도록 콘텐츠 영역을 세로 방향으로 늘립니다. 요소의 콘텐츠 영역에 대한 사용자 지정 크기를 설정하려면 너비 및 높이 속성을 사용할 수 있습니다.

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

너비 및 높이 속성은 콘텐츠 영역의 크기만 정의합니다. 블록 수준 요소의 총 너비를 계산하려면 콘텐츠 영역의 너비, 왼쪽 및 오른쪽 패딩, 너비를 추가해야 합니다. 좌우 경계. 요소의 전체 높이도 마찬가지이며 모든 값만 세로로 계산됩니다.

이 단락의 경우 너비와 높이만 설정합니다.

이 단락에는 너비와 높이 외에도 들여쓰기, 테두리 및 내어쓰기가 포함되어 있습니다.

예제는 두 번째 요소가 첫 번째 요소보다 더 많은 공간을 차지한다는 것을 분명히 보여줍니다. 공식에 따라 계산하면 첫 번째 단락의 크기는 150x100픽셀이고 두 번째 단락의 크기는 다음과 같습니다.

즉, 180x130픽셀입니다.

요소 오버플로

요소의 너비와 높이를 정의한 후 한 가지 중요한 점에 주의해야 합니다. 요소 내부에 있는 콘텐츠가 지정된 블록 크기를 초과할 수 있습니다. 이 경우 콘텐츠의 일부가 요소의 경계를 넘어갑니다. 이 불쾌한 순간을 피하기 위해 overflow CSS 속성을 사용할 수 있습니다. overflow 속성은 블록의 내용이 크기를 초과할 경우 브라우저에 수행할 작업을 알려줍니다. 이 속성은 다음 네 가지 값 중 하나를 사용할 수 있습니다.

• visible은 브라우저에서 사용하는 기본값입니다. 이 값을 지정하면 overflow 속성을 설정하지 않은 것과 같은 효과가 있습니다.
• scroll - 요소에 세로 및 가로 스크롤 막대를 추가합니다.
• auto - 필요한 경우 스크롤 막대를 추가합니다.
• 숨김 - 블록 요소의 범위를 벗어나는 일부 콘텐츠를 숨깁니다.