[DOM_Style] JS - boxSizing 속성 - (박스너비 = 박스전체너비 =박스총너비) 결정방식 (= 박스사이징속성, IE8)

boxSizing 예제

 

<style> 

div.container {

  width: 300px;

  border: 1px solid;

}

div.box {

  width: 150px;

  border: 3px solid red;

  float: left;

  padding: 10px;

}

</style>

<div class="container">

  <div class="box" id="box1">홈짱닷컴</div>

  <div class="box" id="box2">Homzzang.com</div>

  <div style="clear:both;"></div>

</div>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("box1").style.MozBoxSizing = "border-box"; /* 구 Firefox */

  document.getElementById("box2").style.MozBoxSizing = "border-box"; /* 구 Firefox */

  document.getElementById("box1").style.boxSizing = "border-box";

  document.getElementById("box2").style.boxSizing = "border-box";

}

</script>

 

결과보기

 정의 

 

 

 

---

 

 

.

기본값: 

반환값: 를 나타내는 문자열

CSS속성: 
CSS버전: CSS

4.

브라우저 지원. 

 

 구문 

 

[접근]

 

 

[설정]

 

---

 

[속성값]