CSS에서는 box-sizing 속성을 사용하여 내부 테두리를 설정합니다. 요소에 "box-sizing:border-box;" 스타일만 추가하면 됩니다. box-sizing 속성의 값은 border-box입니다. 이는 지정된 너비와 높이가 요소 테두리를 결정한다는 의미입니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
먼저 CSS로 내부 테두리를 설정하는 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div.container {
width: 30em;
height: 106px;
border: 1em solid;
}
div.box1 {
width: 50%;
border: 1em solid red;
float: left;
}
div.box2 {
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
width: 50%;
border: 1em solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">普通边框！！</div>
<div class="box2">内边框！！</div>
</div>
</body>
</html>
box-sizing 속성
box-sizing 속성을 사용하면 특정 영역과 일치하는 특정 요소를 특정 방식으로 정의할 수 있습니다.
예를 들어, 경계가 있는 상자 두 개를 나란히 배치해야 하는 경우 상자 크기를 "border-box"로 설정하면 됩니다. 이렇게 하면 브라우저가 지정된 너비와 높이로 상자를 렌더링하고 테두리와 패딩을 상자에 넣습니다.
Syntax
box-sizing: content-box|border-box|inherit;
속성 값:
content-box: CSS2.1에서 지정한 너비와 높이의 동작입니다. 요소의 너비와 높이(최소/최대 속성)를 지정하면 상자의 너비와 높이에 적용됩니다. 지정된 너비와 높이를 제외한 요소의 패딩 및 테두리 레이아웃과 그리기
border-box: 너비와 높이(최소/최대 속성)를 지정하면 요소 테두리가 결정됩니다. 즉, 요소의 너비와 높이를 지정하면 패딩과 테두리가 포함됩니다. 콘텐츠의 너비와 높이는 각각 설정된 너비와 높이에서 테두리와 패딩을 뺀 값입니다.
inherit: 상위 요소에서 상속되어야 하는 상자 크기 속성의 값을 지정합니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div.container {
width: 30em;
height: 74px;
border: 1em solid;
}
div.box {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
width: 50%;
border: 1em solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>
</div>
</body>
</html>렌더링:
위 내용은 CSS의 내부 테두리는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
CSS-in-JS에 대한 다른 관점Apr 18, 2025 am 10:07 AM어떤 사람들은 CSS-in-JS의 아이디어를 완전히 싫어합니다. 그 이름은 불쾌합니다. 힘든 아니요. 스타일링은 JavaScript에 속하지 않으며 CSS에 속합니다.
Google Pagespeed의 작동 방식 : 점수 및 검색 엔진 순위 향상Apr 18, 2025 am 10:03 AM이 기사에서는 PagesPeed가 중요한 속도 점수를 계산하는 방법을 밝혀냅니다. 속도가 수익을 높이고 포기 율을 낮추는 데 중요한 요소가 된 것은 비밀이 아닙니다. 이제 Google은 페이지 속도를 순위 요소로 사용하므로 많은 Orga
SVG로 현실적인 유리 효과를 만듭니다Apr 18, 2025 am 10:01 AM나는 SVG와 사랑에 빠졌다. 물론, 코드는 처음에는 조밀하고 어려워 보일 수 있지만, 결과를 알게 될 때 결과의 아름다움을 볼 수 있습니다. 보너스는입니다
주간 플랫폼 뉴스 : 그림 요소로 이미지로드 방지, 우리가 원하는 웹, SVG 스타일은 범위가 없습니다.Apr 18, 2025 am 09:57 AM이번 주에 그림 요소를 사용하여 이미지를 조건부로로드하기위한 트릭 인 Browser News의 주간 라운드 업, Bowser 공급 업체에 대해
NetLify Forms 및 NetLify 기능을 사용하여 이메일 가입 위젯을 구축합니다.Apr 18, 2025 am 09:54 AM자신의 웹 사이트를 구축하고 유지 관리하는 것은 좋은 생각입니다. 당신은 당신의 플랫폼을 소유 할뿐만 아니라 그 과정에서 웹 기술을 실험 할 수 있습니다.
주간 플랫폼 뉴스 : CSS 글꼴 스타일 : 비스듬한, Webhint 브라우저 확장, CSS 모듈 V1Apr 18, 2025 am 09:53 AM이번 주에 라운드 업에서 가변 글꼴은 경사, 라인을위한 새로운 브라우저 확장 및 첫 번째 버전의 CSS 모듈을 얻습니다.
확신Apr 18, 2025 am 09:49 AMDavid Desandro는 수년 동안 만든 수많은 멋진 JavaScript 라이브러리를 가지고 있습니다. 그의 최신작은 "원형, 평평한 디자이너 친화적 인 의사 3D 인 Zdog입니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
드림위버 CS6
시각적 웹 개발 도구
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
