盒子边距的特性
兄弟关系
- 两个盒子垂直外边距
1 <style> 2 /* 3 1.兄弟关系，两个盒子垂直外边距和水平外边距
垂直外边距以最大的外边距为主，水平外边距并处理 4 2.父子关系，给子加外边距，但作用于父身上，怎末解决？ 5 */ 6 .box1,.box2{ 7 width: 100px; 8 height: 100px; 9 }
10 .box1{ 11 background-color: blue; 12 margin-bottom: 100px; 13 } 14 .box2{ 15 background-color: aquamarine; 16 margin-top: 50px; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="box1"></div> 22 <div class="box2"></div> 23 24 </body>
<style>
/*
1.兄弟关系，两个盒子垂直外边距和水平外边距
2.父子关系，给子加外边距，但作用于父身上，怎末解决？
*/
.box1,.box2,.box3,.box4{
width: 100px;
height: 100px;
}
.box5{
width:200px;
height: 200px;
}
.box6{
width:100px;
height:100px;
}
.box1{
background-color: blue;
margin-bottom: 100px;
}
.box2{
background-color: aquamarine;
margin-top: 50px;
}
.box3{
background-color: aqua;
float: left;
margin-right: 100px;
}
.box4{
float: left;
background-color: chartreuse;
margin-left: 100px;
}
.box5{
float: left;
background-color: coral;
/* padding-top: 100px; */
/* border: 1px solid green; */
overflow: hidden;
}
.box6{
float: left;
background-color: crimson;
margin-top: 100px;
/* float: left; */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5">
<div class="box6"></div>
</div>
</body>
垂直外边距
水平外边距
父子关系
- padding-top: 100px
会使父盒子原来的边加长100px，所以使用 padding-top应在原来的·边距上减100px.
-
父：border: 1px solid green
子：margin-top:100px给父盒子设定边框，确定子盒子的内边距位置
- float: left 浮动父子盒子（任意一个浮动都可）
-
父：overflow: hidden块级格式化模型，防止其他影响。
子：margin-top:100px
