상자 크기 속성을 사용하는 방법
- 青灯夜游원래의
- 2019-01-31 10:01:256717검색
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:
위 내용은 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !
위 내용은 상자 크기 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!