本文主要是学习了盒子模型中盒子尺寸的真正计算方法和Margin合并，让内容看起来更美观。
盒子尺寸计算方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子尺寸</title>
<style type="text/css">
.box1,.box2,.box3{
width: 50px;
height: 50px;
margin: 30px;
border:1px solid gold;
background: #f2f2f2;
}
.box2 ,.box3{
padding: 50px;
}
.box3{
padding-right: 50px;
}
</style>
<!--
盒子尺寸真正计算方法：
宽度：width + 左右border值 + 左右padding值
高度：height + 上下border值 + 上下padding值
-->
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">例子2</div>
<div class="box3">盒子3</div>
</body>
</html>
盒子尺寸效果图：
Margin合并：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin上下合并</title>
<style type="text/css">
.box{
width: 400px;
border: 1px solid #333;
margin: auto;
}
.box div{
text-indent: 32px;
margin: 30px 20px;
}
</style>
</head>
<body>
<div class="box">
<div >
服务器 客户端 功能总结：能实现url和普通文本发送，url数据只能单次保存，多次发送会更新为最新发送内容。图片发送无法接收，但也没报错，待解决。
</div>
<div >
服务器 客户端 功能总结：能实现url和普通文本发送，url数据只能单次保存，多次发送会更新为最新发送内容。图片发送无法接收，但也没报错，待解决。
</div>
<div>
服务器 客户端 功能总结：能实现url和普通文本发送，url数据只能单次保存，多次发送会更新为最新发送内容。图片发送无法接收，但也没报错，待解决。
</div>
</div>
</body>
</html>
Margin合并效果图：
总结：我们设置的width和height并不是真正盒子尺寸，而是内容的尺寸，盒子的尺寸需要加上边框 和边距的尺寸。我们在div标签里输入内容，而我们的内容样式利用内嵌式方法在head标签中用style标签来统一设置样式，样式很多，常用的我们的需要记住，不常用的需要时知道去哪查就可以了。
网友评论