다양한 모드에서 상자의 너비와 높이 판단-HTML 튜토리얼-php.cn

다양한 모드에서 상자의 너비와 높이 판단

WBOY

풀어 주다： 2016-09-30 09:23:06

원래의

1223명이 탐색했습니다.

div를 설정할 때 div에 패딩을 설정할 때 전체 div의 너비와 높이가 변경되는 것을 발견했습니다. 이로 인해 전체 너비와 높이가 무엇인지에 대한 질문이 생겼습니다. 상자는 어떻게 판단하나요?

문의 결과 상자의 너비와 높이를 결정하는 모드에는 표준 모드와 이상한 모드 두 가지가 있다는 것을 알게 되었습니다.

더 나은 이해를 위해 div를 설정하고 스타일을 지정해 보겠습니다.

<span style="color: #008080;">1</span> <span style="color: #800000;">    #content1</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">        width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">        height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">        border</span>:<span style="color: #0000ff;"> 2px solid black</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">        margin</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">        padding</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">7</span>     }

로그인 후 복사

일반적인 상황에서 상자의 너비와 높이는 콘텐츠의 너비와 높이 + 테두리의 너비와 높이 + 내부 여백의 너비와 높이 + 외부 여백의 너비와 높이와 같습니다.

표준 모드에서의 상자 너비와 높이 결정입니다