盒子模型(含ie8--怪異盒子模型)
阿新 • • 發佈:2018-12-20
盒子模型包括:centent(內容)、border(邊框)、padding(內邊距)、margin(外邊距)
HTML:
<div>centent</div>
CSS:
div{
height: 200px;
width: 200px;
padding: 10px;
margin: 20px;
border: #000000 5px solid;
}
正常盒子模型試例:
正常盒子模型的高=centent的高度+border(上下邊框的高度)+padding(上下內邊距){ie9+Firefox4,Chrome,Opera Safari盒子模型計算方法}
正常盒子模型的寬=centent的寬度+border(上下邊框的寬度)+padding(上下內邊距){ie9+Firefox4,Chrome,Opera Safari盒子模型計算方法}
ie 怪異模型試例:
ie怪異盒子模型的高=centent的高度+border(上下邊框的高度)x2+padding(上下內邊距)x2{ie低版本}
ie怪異盒子模型的高=centent的寬度+border(上下邊框的寬度)x2+padding(上下內邊距)x2{ie低版本}