盒子：内容区（content）、边框（border）、内边距（padding）、外边距（margin）、
左：left 右：right 上：top 下：bottom 自动：auto
外边距合并：相邻两个盒子之间同时设置margin，最终取的值是最大的那一个
避免相邻盒子外边距合并：只给其中一个盒子设置外边距。
外边距塌陷：嵌套的两个盒子之间同时设置margin，最终取的值也是最大的一个
避免嵌套盒子外边距塌陷：给父盒子添加边框、或添加padding、或添加overflow：hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子</title>
<style>
.box{
width: 31.25rem;
height: 25rem;
background-color: pink;
/* border: 0.3125rem green solid; */
/* padding: 3.125rem; */
/* 四个值: 上 右 下 左 顺时针 */
/* 三个值: 上 左右 下 */
/* 两个值: 上下 左右 */
/* margin: 6.25rem ; */
/* margin-left: 12.5rem; */
/* 给左右margin设置auto(自动),盒子水平居中显示 */
margin: 0.625rem auto;
/* 超出部分 隐藏 */
overflow: hidden;
}
.box2{
width: 12.5rem;
height: 6.25rem;
border: 0.3125rem deeppink solid;
background-color: skyblue;
padding: 3.125rem;
margin: 3.125rem auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>box练习</title>
<style>
.box{
width: 75rem;
height: 50rem;
background-color: pink;
margin: 1.25rem auto;
overflow: hidden;
}
.box1{
width: 12.5rem;
height: 12.5rem;
background-color: deeppink;
margin-top: 3.125rem;
margin-left: 3.125rem;
}
.box2{
width: 12.5rem;
height: 12.5rem;
background-color: hotpink;
border: black solid 0.3125rem;
border-top-style: dashed ;
margin: auto;
}
.box3{
width: 12.5rem;
height: 12.5rem;
background-color: deeppink;
margin-left: 62.5rem;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
2101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
