CSS width/height

CSS 높이와 너비 설정

height및 width특성 요소의 높이와 폭을 설정하는 데 사용된다.

높이 및 너비 속성에는 패딩, 테두리 또는 여백이 포함되지 않습니다. 패딩, 테두리 및 요소의 여백 내부 영역의 높이 / 너비를 설정합니다.

 

CSS 높이 / 폭 값

height및 width속성은 다음과 같은 값을 가질 수 있습니다 :

• auto-이것이 기본값입니다. 브라우저는 높이와 너비를 계산합니다
• length -높이, 너비를 px, cm 등으로 정의합니다.
• % -포함 블록의 높이 / 폭을 퍼센트로 정의
• initial -높이 / 너비를 기본값으로 설정
• inherit -높이 / 너비는 부모 값에서 상속됩니다

 

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

 

참고 : 기억 height과 width특성이 패딩, 테두리, 또는 여백을 포함하지 않습니다! 패딩, 테두리 및 요소의 여백 내부 영역의 높이 / 폭을 설정합니다!

 

최대/최소 너비 설정

이 max-width속성은 요소의 최대 너비, min-width속성은 요소의 최소 너비를 설정하는 데 사용됩니다.

이 max-width, min-width지정 될 수있는 길이의 값 (이 기본이다. 수단에는 최대 폭이 없음) 등 PX, cm, 원한다면, 또는 유료로 함유하는 블록 또는 세트의 퍼센트 (%)이다.

위의 문제 <div>는 브라우저 창이 요소 너비 (500px)보다 작을 때 발생합니다. 그런 다음 브라우저는 페이지에 가로 스크롤 막대를 추가합니다.

max-width대신이 상황에서 사용 하면 브라우저의 작은 창 처리가 향상됩니다.

팁 : 두 div의 차이점을 보려면 브라우저 창을 500px 미만으로 드래그하십시오!

div {
  max-width: 500px;
  min-width: 1600px;
  width: 100%;
  height: 100px;
  background-color: powderblue;
}