CSS 상자 크기 조정 속성을 사용하는 방법
- 藏色散人원래의
- 2019-05-29 11:04:342653검색
css box-sizing 속성은 특정 방식으로 특정 영역과 일치하는 특정 요소를 정의하는 데 사용됩니다. 구문은 box-sizing: content-box|border-box|inherit입니다.
CSS 상자 크기 조정 속성을 사용하는 방법은 무엇입니까?
기능: 상자 크기 속성을 사용하면 특정 방식으로 특정 영역과 일치하는 특정 요소를 정의할 수 있습니다. 예를 들어, 경계가 있는 상자 두 개를 나란히 배치해야 하는 경우 상자 크기를 "border-box"로 설정하면 됩니다. 이렇게 하면 브라우저가 지정된 너비와 높이로 상자를 렌더링하고 테두리와 패딩을 상자에 넣습니다.
구문:
box-sizing: content-box|border-box|inherit
설명:
content-box 이는 CSS2.1에서 지정한 너비 및 높이 동작입니다. 너비와 높이는 요소의 콘텐츠 상자에 별도로 적용됩니다. 요소의 너비와 높이 외부에 요소의 패딩과 테두리를 그립니다.
border-box 요소에 설정된 너비와 높이에 따라 요소의 테두리 상자가 결정됩니다. 즉, 요소에 지정된 패딩과 테두리는 설정된 너비와 높이 내에서 그려집니다. 콘텐츠의 너비와 높이는 각각 설정된 너비와 높이에서 테두리와 패딩을 뺀 값입니다.
inherit는 box-sizing 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.
참고: Internet Explorer, Opera 및 Chrome은 상자 크기 속성을 지원합니다. Firefox는 대체 -moz-box-sizing 속성을 지원합니다.
css 상자 크기 조정 속성 예
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
border:1em solid;
}
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>효과 출력:
위 내용은 CSS 상자 크기 조정 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!