문서의 각 요소는 직사각형 상자로 표시됩니다. 렌더링 엔진의 목적은 크기, 속성(예: 색상, 배경, 테두리 측면) 및 이러한 상자의 위치를 결정하는 것입니다. CSS에서 이러한 직사각형 상자는 표준 상자 모델을 사용하여 설명됩니다. 이 모델 은 요소가 차지하는 공간 을 설명합니다. 각 상자에는 여백, 테두리, 패딩 및 내용의 네 가지 테두리가 있습니다.
W3C 모델: 총 너비 = 왼쪽 여백 + 테두리 왼쪽 + 패딩 왼쪽 + 너비 + 패딩 오른쪽 + 테두리 오른쪽 + 여백 오른쪽
IE 모델: 전체 너비 = 왼쪽 여백 + 너비 + 오른쪽 여백
은 CSS3에 box-sizing 속성을 도입하여 변경을 허용합니다. 기본 CSS 상자 모델은 요소의 너비와 높이를 계산합니다.
에는 두 가지 옵션이 포함됩니다.
content-box: 표준 상자 모델, CSS로 정의된 너비와 높이 콘텐츠의 높이. (기본값)
border-box: IE 상자 모델, CSS에서 정의한 너비와 높이에는 콘텐츠, 패딩 및 테두리가 포함됩니다
예:
( con1은 box-sizing: border-box로 설정되어 있으며 con은 기본 콘텐츠 상자입니다.)
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.con{width: 100px; height: 100px;background-color:royalblue;
border:1px solid red; padding: 10px;}
.con1{box-sizing: border-box;}
</style>
</head>
<body>
<p class="con"></p>
<p class="con con1"></p>
</body>콘솔에서 두 상자의 차이점을 명확하게 볼 수 있습니다.
첫 번째 p의 박스 모델은 다음과 같습니다: content-box
두 번째 p의 박스 모델은 다음과 같습니다: border-box
위의 모든 내용은 편집자가 CSS3 박스 모델 및 박스 크기 속성에 대한 포괄적인 이해를 제공한 내용이므로 도움이 되시기 바랍니다. PHP 중국어 웹사이트를 지원하세요~
더 많은 css3 박스 모델과 박스 크기 속성에 대해서는 PHP 중국어 웹사이트에서 관련 기사를 주목해주세요!
Google 글꼴을 태그하고 Goofonts.com을 작성한 방법Apr 12, 2025 pm 12:02 PMGoofonts는 개발자 부인과 디자이너 남편이 서명 한 사이드 프로젝트로, 둘 다 타이포그래피의 큰 팬입니다. 우리는 Google에 태그를 지정했습니다
JavaScript API 상태로 GraphQL 쿼리를 연습하십시오Apr 12, 2025 am 11:33 AMGraphQL API를 구축하는 방법을 배우는 것은 매우 어려울 수 있습니다. 그러나 10 분 안에 GraphQL API를 사용하는 방법을 배울 수 있습니다! 그리고 그것은 완벽하게 얻었습니다
오프셋 경로로 원에 유형을 설정하십시오Apr 12, 2025 am 11:00 AM여기 Yuanchuan의 합법적 인 CSS 속임수입니다. 이 CSS 속성 오프셋 경로가 있습니다. 옛날 옛적에, 그것은 모션 경로라고 불렸다가 이름이 바뀌 었습니다. 나
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
드림위버 CS6
시각적 웹 개발 도구
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
WebStorm Mac 버전
유용한 JavaScript 개발 도구
