상자 크기 속성을 사용하는 방법-CSS 튜토리얼-php.cn

상자 크기 속성을 사용하는 방법

青灯夜游

풀어 주다： 2021-04-20 14:41:37

원래의

6847명이 탐색했습니다.

box-sizing 속성을 사용하면 특정 영역과 일치하는 특정 요소를 특정 방식으로 정의할 수 있습니다. 이 속성을 사용하는 구문은 "box-sizing: content-box|border-box|inherit;"입니다.

상자 크기 속성을 사용하는 방법

이 문서의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

CSS3 박스 크기 속성

기능: 특정 영역에 맞는 특정 콘텐츠를 정확한 방식으로 정의할 수 있습니다.

참고: Internet Explorer, Chrome, Safari 및 Opera는 상자 크기 속성을 지원합니다. Firefox에는 접두사 -moz-가 필요합니다.

구문:

box-sizing: content-box|border-box|inherit;

로그인 후 복사

value	Description
content-box	이것은 CSS2.1에서 지정한 너비-높이 동작입니다. 너비와 높이는 요소의 콘텐츠 상자에 별도로 적용됩니다. 요소의 패딩과 테두리를 너비와 높이 외부에 그립니다.
border-box	요소에 설정된 너비와 높이에 따라 요소의 테두리 상자가 결정됩니다. 즉, 요소에 지정된 패딩과 테두리는 설정된 너비와 높이 내에서 그려집니다. 콘텐츠의 너비와 높이는 각각 설정된 너비와 높이에서 테두리와 패딩을 빼서 얻을 수 있습니다.
inherit	은 box-sizing 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

CSS3 box-sizing 속성 사용 예

<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:30em;
border:1em solid;
margin: 100px auto;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
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>

로그인 후 복사

Rendering:

상자 크기 속성을 사용하는 방법