<html>
<head>
<meta charset="utf-8" />
<title>第一个盒子</title>
<style>
.big-box1{
width:500px;
height:400px;
/* border: 5px solid green; */
/* padding:50px; */
background-color:pink;
/* 四个值:上 右 下 左 顺时针 */
/* 三个值:上 左右 下 */
/* 两个值:上下 左右 */
/* 给左右margin外边距位置autu(自动)盒子水平居中显示 */
/* margin: 100px; */
/* margin-left:200px; */
margin:10px auto;
/* 超出部分:隐藏 */
overflow: hidden;
}
.big-box2{
width:200px;
height:100px;
border: 5px solid green;
padding:50px;
background-color:skyblue;
margin:50px auto;
}
</style>
</head>
<body>
<div class="big-box1">
<div class="big-box2">盒子</div>
</div>
</body>
</html>
盒子:内容区(content)、边框(border)、内边距(padding)、外边距
(margin)、
left:左 right:右 top:上 bottom:下 auto:自动
外边距合并:相邻两个盒子之间同时设置margin,最终取的值是最大的那一个
避免邻居盒子外边距合并: 只给其中一个盒子设置外边距。
外边距塌陷:嵌套的两个盒子之间同时设置margin,最终取的值也是最大的一个
避免嵌套盒子外边距塌陷:给父盒子添加边框、或添加padding、或添加
overflow:hidden;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>作业3.11</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.125erm;
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>
HTML第十次
猜你喜欢
转载自blog.csdn.net/weixin_54989803/article/details/114671895
今日推荐
周排行