CSS3: 상자 모델 및 상자 크기 조정 속성
문서의 각 요소는 직사각형 상자로 표시됩니다. 렌더링 엔진의 목적은 크기, 속성(예: 색상, 배경, 테두리 측면) 및 이러한 상자의 위치를 결정하는 것입니다. CSS에서 이러한 직사각형 상자는 표준 상자 모델을 사용하여 설명됩니다. 이 모델 은 요소가 차지하는 공간 을 설명합니다. 각 상자에는 여백, 테두리, 패딩 및 내용의 네 가지 테두리가 있습니다.
-
W3C 모델: 전체 너비 = 왼쪽 여백 + 왼쪽 테두리 + 왼쪽 패딩 + 너비 + 오른쪽 패딩 + 테두리 오른쪽 + 오른쪽 여백
-
IE 모델: 총 너비 = 왼쪽 여백 + 너비 + 오른쪽 여백
box-sizing 속성은 CSS3에 도입되었으며, 이를 통해 기본 CSS 상자 모델이 요소의 너비와 높이를 계산하는 방식을 변경할 수 있습니다.
총 두 가지 옵션이 있습니다:
-
content-box: 표준 상자 모델, CSS에서 정의한 너비와 높이는 콘텐츠의 너비와 높이만 포함합니다. (기본값)
-
border-box: IE 상자 모델, CSS에서 정의한 너비와 높이에는 콘텐츠, 패딩 및 테두리가 포함됩니다
예:
(con1은 box-sizing: border-box로 설정되어 있으며 con은 기본 콘텐츠 상자입니다)
<span style="color: #008080;"> 1</span> <head lang="en">
<span style="color: #008080;"> 2</span> <meta charset="UTF-8">
<span style="color: #008080;"> 3</span> <title></title>
<span style="color: #008080;"> 4</span> <style>
<span style="color: #008080;"> 5</span> .con{width: 100px; height: 100px;background-<span style="color: #000000;">color:royalblue;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;"> border:1px solid red; padding: 10px;}
</span><span style="color: #008080;"> 7</span> .con1{box-sizing: border-<span style="color: #000000;">box;}
</span><span style="color: #008080;"> 8</span> </style>
<span style="color: #008080;"> 9</span> </head>
<span style="color: #008080;">10</span> <body>
<span style="color: #008080;">11</span> <div class="con"></div>
<span style="color: #008080;">12</span> <div class="con con1"></div>
<span style="color: #008080;">13</span> </body>
콘솔에 있는 두 상자의 차이점을 확연히 볼 수 있습니다
첫 번째 div의 박스 모델은 다음과 같습니다: content-box
두 번째 div의 상자 모델은 다음과 같습니다: border-box
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7519
15
1378
52
81
11
54
19
21
68
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?
Mar 17, 2025 pm 12:20 PM
기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?
Mar 17, 2025 pm 12:27 PM
이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?
Mar 20, 2025 pm 05:56 PM
이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.
& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?
Mar 20, 2025 pm 06:05 PM
이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?
Apr 04, 2025 pm 11:54 PM
GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...
