1.怪异盒模型和border有关:
设置border宽度可以影响其他元素的布局:但是在IE5及以下里面只是影响其子元素;
2.可以同时设置 box-sizing属性来使用这一特性,是其改变border宽度也不影响其他元素;
3,.box-sizing:简单理解就是盒子大小基于什么计算的;
2.使用如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box-wrapper {
margin: 100px 0 0 100px;
width: 600px;
height: 500px;
background-color: orange;
}
.box{
height: 200px;
width: 200px;
float: left;
}
.box-1{
background-color: pink;
}
.box-2{
background-color: #00f;
border: 10px solid yellow;
/*当设置边框,或者内边距导致元素大小改变时,不期望所占有的空间变化*/
box-sizing: border-box;
/*默认值 content-box 宽高基于文本盒子计算 */
/*box-sizing: content-box;*/
/*计算宽高 : 盒子的边框+内边距+内容区*/
padding: 10px;
}
.box-3{
background-color: green;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div class="box box-1"></div>
<div class="box box-2">Hello</div>
<div class="box box-3"></div>
</div>
<script type="text/javascript">
</script>
</body>
</html>