상자 크기 속성이란 무엇입니까?
- 爱喝马黛茶的安东尼원래의
- 2019-07-22 09:39:5715516검색
box-sizing 속성 정의 및 사용법
box-sizing 이 속성은 특정 영역에 맞게 특정 요소를 특정 방식으로 정의할 수 있는 CSS3의 새로운 속성입니다(두 개의 테두리가 있는 상자를 나란히 배치해야 하는 경우 box-sizing 속성을 "border-"로 설정할 수 있습니다). box" "는 브라우저가 지정된 너비와 높이로 상자를 렌더링하고 상자에 테두리와 패딩을 넣도록 합니다.
Internet Explorer, Opera 및 Chrome 브라우저는 상자 크기 조정 속성을 지원합니다. , Firefox는 아직 이 속성을 지원하지 않지만 box-sizing 속성 대신 -moz-box-sizing 속성을 지원합니다.
box-sizing 속성 구문 형식# 🎜🎜 #
box-sizing: content-box/border-box/inherit;관련 정보: "
CSS_CSS3 지식"
매개변수 설명
content -box : CSS2.1에서 지정한 너비와 높이 동작입니다. 너비와 높이가 각각 요소의 콘텐츠 상자에 적용되고, 요소의 패딩과 테두리가 너비와 높이 외부에 그려집니다. #border-box : 요소에 설정된 너비와 높이에 따라 요소의 테두리 상자가 결정됩니다. 즉, 요소에 지정된 패딩과 테두리가 설정된 너비와 높이 내에 그려집니다. 콘텐츠의 너비와 높이는 설정된 너비와 높이에서 각각 테두리와 패딩을 빼서 얻을 수 있습니다.
inherit: 상자 크기 속성의 값이 상위 항목에서 상속되도록 지정합니다. 요소;#🎜🎜 #
인스턴스:
<!DOCTYPE html><html><head><meta charset="utf-8" />
<title>css3 box-sizing属性笔记</title><style type="text/css">
body{background-color: #aaa;}div.container{width:30em;border:1em solid;}
.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>실행 결과:
위 내용은 상자 크기 속성이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.