前端入门篇（二十四）盒子模型
内边距padding
如果只写一个数，代表上下左右都是这个间隔 如果要写上下左右四个方位，要顺时针写，上-右-下-左 background只包含盒子内部的部分，即padding和内容，不包括边框border和外边距css文件：
.box1{
border: 1px solid black;
/* 上下左右20px */
padding: 20px;
/* 上下20px 左右50px */
padding:20px 50px;
/* 上20px，左右50px，下10px */
padding:20px 50px 10px;
/* 上20px 右30px 下15px 左25px */
padding:20px 30px 15px 25px;
background-color: yellow;
}
.box2{
border: 1px solid black;
background-color: blue;
}
也可以拆分开来写：
padding-top:20px;
padding-right:30px;
padding-bottom:15px;
padding-left:25px;
html文件：
<body>
<div class="box1">div1div>
<div class="box2">div2div>
body>
效果：
外边距margin：
css文件：.box1{
border: 1px solid black;
/* 上下左右20px */
padding: 20px;
/* 上下20px 左右50px */
padding:20px 50px;
/* 上20px，左右50px，下10px */
padding:20px 50px 10px;
/* 上20px 右30px 下15px 左20px */
padding:20px 30px 15px 25px;
margin: 30px;
}
.box2{
border: 1px solid black;
}
html文件不变：
<body>
<div class="box1">div1div>
<div class="box2">div2div>
body>
效果：
magin重叠：
1.平级取最大值
效果：div1设置60px，div2设置30px，两者的margin重叠，黄框和蓝框实际间隔为60px
解决平级元素margin重叠问题
1.floatcss文件：
.box1{
border: 1px solid black;
/* 上下左右20px */
padding: 20px;
/* 上下20px 左右50px */
padding:20px 50px;
/* 上20px，左右50px，下10px */
padding:20px 50px 10px;
/* 上20px 右30px 下15px 左20px */
padding:20px 30px 15px 25px;
margin: 60px;
background-color: yellow;
}
.box2{
margin: 30px;
border: 1px solid black;
background-color: blue;
}
div {
float: left;
width: 800px;
}
html文件：
<body>
<div class="box1">div1div>
<div class="box2">div2div>
body>
效果：
2.inline-block
css文件：
.box1{
border: 1px solid black;
/* 上下左右20px */
padding: 20px;
/* 上下20px 左右50px */
padding:20px 50px;
/* 上20px，左右50px，下10px */
padding:20px 50px 10px;
/* 上20px 右30px 下15px 左20px */
padding:20px 30px 15px 25px;
margin: 60px;
background-color: yellow;
}
.box2{
margin: 30px;
border: 1px solid black;
background-color: blue;
}
div {
display: inline-block;
width: 800px;
}
效果：
2.嵌套关系
css文件：.box1{
margin: 30px;
background-color: yellow;
}
.box2{
margin: 60px;
background-color: blue;
}
html文件：
<body>
<div class="box1">
<div class="box2">div2div>
div>
body>
效果：原本应该是父级div距离body30px，子级div距离父级div60px，实际是两个div重叠，肉眼看，与body的间隔是60px
解决嵌套关系下margin重叠的方法（把盒子封起来）
1.加文字，子级div上下都加文字 css文件不变：.box1{
margin: 30px;
background-color: yellow;
}
.box2{
margin: 60px;
background-color: blue;
}
html文件：
<body>
<div class="box1">
div1
<div class="box2">div2div>
div1
div>
body>
效果：
2.border
css文件：
.box1{
border: 1px solid black;
margin: 30px;
background-color: yellow;
}
.box2{
margin: 60px;
background-color: blue;
border: 1px solid black;
}
html文件：
<body>
<div class="box1">
<div class="box2">div2div>
div>
body>
效果同上
3.padding
注意是在父级div加padding
css文件：
.box1{
margin: 30px;
background-color: yellow;
padding:20px 30px 15px 25px;
}
.box2{
margin: 60px;
background-color: blue;
}
html文件：
<body>
<div class="box1">
<div class="box2">div2div>
div>
body>
效果：
4.overflow
css文件：
.box1{
margin: 30px;
background-color: yellow;
overflow: hidden;
}
.box2{
margin: 60px;
background-color: blue;
}
html文件：
<body>
<div class="box1">
<div class="box2">div2div>
div>
body>
