1、标准盒子的尺寸计算
盒子自身的尺寸:内容的宽高+两侧内边距+两侧边框
盒子在页面中占位的尺寸:内容的宽高+两侧内边距+两侧边框+两侧外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子自身尺寸</title>
<style>
div.box1{
width:200px;
height:200px;
padding:20px;
border:5px red solid;
}
/*盒子自身的宽度:200px + 20px*2 + 5px*2 = 250px*/
/*盒子自身的高度:200px + 20px*2 + 5px*2 = 250px*/ div.box2{
width:200px;
height:200px;
padding:20px;
border:5px red solid;
margin:50px 100px;
margin-left:-100px;/*当左侧外边距变为负值:盒子的占位宽度:200px + 20px*2 + 5px*2 + (-100px) + 100px= 250px*/
}
/*盒子占位的宽度:200px + 20px*2 + 5px*2 + 100px*2= 450px*/
/*盒子占位的高度:200px + 20px*2 + 5px*2 + 50*2 = 350px*/ /* 当盒子的外边距为负值时，盒子占位的尺寸有可能小于盒子自身的尺寸*/
</style>
</head>
<body>
<div class="box1"></div> box2前面的文字
<div class="box2"></div>
box2后面的文字
</body>
</html>
2、框架盒子(怪异盒子)的尺寸计算
直接将宽/高属性设定为盒子自身的整体尺寸，如果带有内边距或边框，则通过缩小内容区域来实现
实现盒子类型的转换
box-sizing:盒子类型设置
3、思考：当盒子无法确定具体的宽高数值时，怎么办？
问题任务:需要设定一个带有30px边框的盒子，整体宽度为浏览器窗口的50%
解决办法:将盒子转换成为框架盒子！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>问题任务</title>
<style>
*{
margin:0;
padding:0;
} .box{
background-color:black;
color:white;
border:30px red solid;
width:50%;
box-sizing: border-box;
padding:30px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4、box-sizing的实际应用:
要求一:实现一个两栏并列的网页布局(提示:通过float属性实现并列)
要求二:其中左列为30%宽，右列为70%宽
要求三:两列盒子中的内容距离盒子边缘有一定的空白距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
float:left;
height:300px;
padding:50px;
box-sizing:border-box;
} .leftbox{
background-color:#0d8ddb;
width:30%;
} .rightbox{
background-color: pink;
width:70%;
}
</style>
</head>
<body>
<div class="leftbox">左边的盒子内容</div>
<div class="rightbox">右边的盒子</div>
</body>
</html>