1000 * 0.75 = 750픽셀입니다. 사용자가 브라우저 창의 크기를 조정하면 본문 요소의 너비와 그에 따라 중첩된 div 블록의 너비도 변경됩니다.

height 속성의 백분율 값은 width 속성과 유사하게 작동합니다. 이제 높이가 컨테이너 요소의 높이에서 계산됩니다.

예를 들어:

동시에 요소의 실제 치수는 너비 및 높이 속성에 설정된 치수와 다를 수 있습니다. 예를 들어:

스크린샷에서 볼 수 있듯이 실제로 width 속성의 값(200px)은 요소 내부 콘텐츠의 너비만 결정하며 요소 자체의 블록 아래에 공간이 할당되며 너비는 내부 콘텐츠의 너비(width 속성) + padding(padding 속성) + border 너비( border-width 속성) + margins(margin 속성)의 너비와 같습니다. 즉, 요소의 너비는 230픽셀이고 여백을 고려한 요소 블록의 너비는 250픽셀이 됩니다.

요소의 치수를 결정할 때 이러한 계산을 고려해야 합니다.

사용하여 추가 세트속성에서 최소 및 최대 크기를 설정할 수 있습니다.

min-width : 최소 너비

최대 너비 : 최대 너비

min-height : 최소 높이

max-height : 최대 높이

최소 너비: 200px 너비: 50%; 최대 너비: 300px

이 경우 요소의 너비는 컨테이너 요소 너비의 50%와 같으나 200픽셀 이상 300픽셀 이상이어야 합니다.

블록 너비 재정의

box-sizing 속성을 사용하면 요소의 설정된 크기를 재정의할 수 있습니다. 다음 값 중 하나를 사용할 수 있습니다.

content-box : 요소의 실제 너비와 높이를 결정하기 위해 너비 및 높이 속성 값에 브라우저가 테두리 너비와 패딩을 추가하는 속성의 기본값

padding-box: 요소의 너비와 높이가 값의 일부로 패딩을 포함해야 함을 웹 브라우저에 알립니다. 예를 들어 다음과 같은 스타일이 있다고 가정해 보겠습니다.

너비: 200px 높이: 100px; 여백: 10px 패딩: 10px 테두리: 5px 솔리드 #ccc; 배경색: #ee; 상자 크기 조정: 패딩 상자;

여기서 블록 내부 콘텐츠의 실제 너비는 200px(너비) - 10px(왼쪽 여백) - 10픽셀(오른쪽 여백) = 180픽셀입니다.

대부분의 경우 주목할 가치가 있습니다. 최신 브라우저이 속성을 지원하지 않습니다.

border-box: 요소의 너비와 높이에 패딩과 테두리가 값의 일부로 포함되어야 함을 웹 브라우저에 알립니다. 예를 들어 다음과 같은 스타일이 있다고 가정해 보겠습니다.

너비: 200px 높이: 100px; 여백: 10px 패딩: 10px 테두리: 5px 솔리드 #ccc; 배경색: #ee; 상자 크기: 테두리 상자;

여기서 블록 내부 콘텐츠의 실제 너비는 200px(너비) - 10px(왼쪽 여백) - 10px(오른쪽 여백) - 5px(왼쪽 테두리 너비) - 5px(오른쪽 테두리 너비) = 170픽셀

예를 들어 box-sizing 속성의 값만 다른 두 개의 상자를 정의해 보겠습니다.

첫 번째 경우에는 블록의 크기를 결정할 때 너비와 높이 속성이 테두리 두께에 추가되고 패딩과 패딩이 추가되기 때문에 첫 번째 블록이 커집니다.

설명

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

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

통사론

높이: 값 | 관심 | 자동 | 상속하다

가치

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

HTML5 CSS2.1 IE Cr Op Sa Fx

결과 이 예그림에 나와 있습니다. 하나.

쌀. 1. height 속성 적용하기

개체 모델

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

브라우저

브라우저 인터넷 익스플로러 6은 높이를 min-height 로 잘못 정의합니다.

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

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

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

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

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

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

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

노력하다 "

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

총 높이:	5픽셀	+	10픽셀	+	100픽셀	+	10픽셀	+	5픽셀	= 130픽셀
	높은 액자		높은 톱니 모양		키		낮추다 톱니 모양		낮추다 액자

즉, 180x130 픽셀입니다.

요소 오버플로

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

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

이 기사에서는 CSS에서 블록의 높이를 너비의 백분율로 설정하는 방법을 살펴보겠습니다. 다양한 크기의 이미지에서 Bootstrap 회전 목마(슬라이더)를 만드는 예를 사용하여 이 기술의 적용을 고려할 것입니다.

너비의 일정 비율을 갖는 높이로 블록 만들기

1. 2개의 블록에서 HTML 구조를 만듭니다.
   첫 번째 블록에는 2개의 클래스가 있습니다. item-responsive 클래스를 사용하여 블록을 상대 위치로 설정해 보겠습니다. 이것은 블록 2를 위해 수행되어야 합니다. 절대 위치)에 상대적으로 위치합니다. 또한 이 클래스는 해당 요소(항목 응답)의 내용 앞에 의사 요소:before를 추가하는 데에도 사용됩니다. 이 요소는 padding-top CSS 속성을 사용하여 너비를 기준으로 원하는 블록 높이를 설정합니다. 장난 이 방법패딩 속성이 값으로 설정된 경우 픽셀이 아니라 백분율로 브라우저에서 너비를 기준으로 계산합니다.. 따라서 필요한 높이의 블록을 얻을 수 있습니다. 다음 단계는 블록 2에 절대 위치를 지정하고 첫 번째 블록에 정렬하는 것입니다.
2. 페이지에 다음 CSS 코드를 추가하십시오. .item-responsive ( position: relative; /* 상대 위치 지정 */ ) .item-responsive:before ( display: block; /* 요소를 블록으로 표시 */ content: "" ; /* 콘텐츠 유사 요소 */ 너비: 100%; /* 요소 너비 */ ) .item-16by9 ( 패딩 상단: 56.25%; /* (9:16)*100% */ ) .item-responsive >.content ( position: absolute; /* 요소의 절대 위치 */ /* 요소의 위치 */ top: 0; left: 0; right: 0; bottom: 0; ) /* 선택적으로 ( 이 클래스) */ .item -4by3 ( padding-top: 75%; /* (3:4)*100% */ ) .item-2by1 ( padding-top: 50%; /* (1:2)* 100% */ ) .item -1by1 ( 패딩 상단: 100%; /* (1:1)*100% */ )

부트스트랩 캐러셀 생성 시 위 기술 적용

부트스트랩에 익숙하지 않고 부트스트랩이 무엇인지 알고 싶다면 부트스트랩 소개 문서를 사용할 수 있습니다.

위의 HTML 구조와 CSS 코드를 사용하여 Bootstrap 캐러셀 슬라이드를 표시하는 예를 살펴보겠습니다.

다음 파일을 이미지로 사용합니다.

• carousel_1.jpg (너비 = 736px, 높이 = 552px, 종횡비(높이 대 너비) = 1.33);
• carousel_2.jpg (너비 = 1155px, 높이 = 1280px, 종횡비(높이 대 너비) = 0.9);
• carousel_3.jpg (너비 = 1846px, 높이 = 1028px, 종횡비(높이 대 너비) = 1.8);
• carousel_4.jpg (너비 = 1140px, 높이 = 550px, 종횡비(높이 대 너비) = 2.07);
• carousel_5.jpg (너비 = 800px, 높이 = 600px, 종횡비(높이 대 너비) = 1.33);

이미지가 배경으로 설정됩니다. 이렇게 하면 Bootstrap 3 캐러셀에서 가로 세로 비율이 다른 이미지를 사용할 수 있습니다.

캐러셀 HTML 마크업:

캐러셀 CSS 코드:

Item-responsive ( position: relative; /* 상대 위치 지정 */ ) .item-responsive:before ( display: block; /* 요소를 블록으로 표시 */ content: ""; /* 유사 요소 콘텐츠 */ width: 100 %; /* 요소 너비 */ ) .item-16by9 ( 패딩 상단: 56.25%; /* (9:16)*100% */ ) .item-responsive>.content ( 위치: 절대; /* 절대 요소 position * / /* 요소 위치 */ 위쪽: 0; 왼쪽: 0; 오른쪽: 0; 아래쪽: 0; 배경 크기: 덮개 !중요; )

HTML의 대부분의 요소에는 일반적으로 특정 높이와 너비가 지정됩니다. CSS에서 이러한 매개변수를 설정하는 것은 매우 쉽고 결과적으로 실용적입니다. 이를 위해 이미 알고 있는 높이 및 너비 속성이 사용됩니다. 그러나이 단원에서는 고정되지 않은 너비와 높이 또는 고무, 즉 창 자체의 너비에 따라 이야기합니다. 시작하자)

너비

이 속성은 특정 HTML 너비요소. 값은 픽셀, 백분율로 지정할 수 있습니다(다른 값은 덜 자주 사용됨).

나의 블록 (
너비: 400px /* 너비 400픽셀 */

}
또는 백분율로:

MyBlockPercent50(
폭: 50% /* 너비 상자 또는 창 너비의 50%(고정 너비 상자 안에 있지 않은 경우) */
색상: #f1f1f1; /* 밝은 회색 블록 */
}
따라서 항상 부모 너비의 절반이 되는 블록을 얻습니다.

이제 가장 흥미로운 것에 대해. 너비에는 최대 또는 최소 너비를 지정하는 매개변수가 있습니다. 이들은 각각 min-width 및 max-width 속성입니다. 픽셀, 백분율 및 기타 값으로 값을 지정할 수도 있습니다. 이러한 속성은 고무 및 적응형 디자인()을 만드는 기초입니다.

예시 적응형 디자인 . 브라우저 창 크기 조정:

나는 물론, 나 자신보다 앞서서 뛰고 있다. 그러나 무엇이 필요한지, 왜 필요한지 이해해야 합니다. 예, 즐거운 결과를 만지십시오)

이미 이해했듯이 이러한 속성의 도움으로 콘텐츠를 왜곡하지 않고 페이지의 요소를 보다 유연하게 처리할 수 있습니다. 어떻게 작동합니까? 코드를 고려해보자.

차단하다 (
최대 너비: 800px
배경색: #f1f1f1; /* 밝은 회색 블록 */
패딩: 20px
}
부모 너비가 200픽셀인 이러한 속성을 가진 블록은 해당 값을 사용하지만 부모 블록이 더 큰 경우(예: 1000픽셀) 이미 최대 너비, 즉 800픽셀을 사용합니다. 즉, 부모 블록의 너비가 801픽셀 이상이 될 때까지 증가합니다. 또한 블록 블록의 최대 허용 너비는 항상 800px입니다.

키

이 속성은 요소의 높이를 담당합니다. 값으로 CSS에 적합한 모두 동일하게 사용됩니다. 대부분 동일한 비율과 픽셀입니다.

정보(
높이: 200px; /* 블록 높이는 200px입니다. */
패딩: 10px /* 블록 내부의 패딩에 대해 반복 =) */
}
논리적으로 높이의 경우 min-height 및 max-height 속성이 있는 요소의 최소 및 최대 높이 값을 각각 지정할 수 있습니다.

정보(
최대 높이: 360px /* 최대 블록 높이 */
최소 높이: 120px; /* 최소 블록 높이 */
}
보시다시피 속성은 쌍으로 사용할 수 있고 자주 사용해야 합니다.
또는 값을 결합합니다.

콘텐츠(
높이: 100%; /* 높이는 항상 100%입니다 */
너비: 760px /* 그러나 너비는 760픽셀로 고정됩니다. */
}
질문이 있으면 댓글에 적어주세요!

관심을 가져주셔서 감사합니다! 레이아웃에 행운을 빕니다!)