盒子模型1 margin padding

最新推荐文章于 2024-04-23 21:38:11 发布

HKW土豆

最新推荐文章于 2024-04-23 21:38:11 发布

阅读量187

点赞数

分类专栏： DIV

本文链接：https://blog.csdn.net/qq_15103527/article/details/53338051

版权

DIV 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype>
<html>
<head>
<style>
#part1{
width:50px;
height:50px;
background-color:red;
margin:20px;
padding:30px;
border:50px solid blue;
}
#part2{
width:50px;
height:50px;
background-color:yellow;
margin:20px;
padding:30px;
border:50px solid red;
}
</style>
</head>
<body>
<div id="part1">短发阿斯蒂芬阿萨芬大
</div>
<div id="part2">阿斯蒂芬大师傅答复答复阿斯蒂芬阿道夫
</div>
</body>
</html>

注释：border盒子边的宽度蓝色区域为50px（可以理解为盒子厚度为50px），padding(内边距)为盒子里面的内容到盒子边的距离，为30px（所以文字没有在红色区域内的最左边开始），

margin（外边距）为盒子与盒子之间的距离为20px，也就是蓝色和红色盒子之间的白色区域。

如图：盒子的边长大小为border50px*2+padding30px*2+width50px

盒子的占地边长为border50px*2+padding30px*2+width50px+margin20px*2

浮动的理解

body{
margin:0;
padding:0;

//每个浏览器对html的渲染不同，如果不加的话body的四周会有一定的白色间隙，因为浏览器渲染的原因
}
#part1{
width:20%;
height:40%;
background-color:red;
float:left;
}
#part2{
width:20%;
height:40%;
background-color:yellow;
float:left;
}
#part3{
width:50%;
height:40%;
background-color:orange;
}