1 盒子模型概述
摘自某客学院H5教程视频。
2 盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px
}
/*盒子模型*/
.container{
/*外边距*/
margin: 50px 100px 50px 100px;
/*边框*/
border:10px solid #473eff;
/*内边距*/
padding: 20px;
/*默认自动计算*/
/*width: 100%;*/
height: 150px;
}
.content{
/*圆角效果*/
border-radius: 10px;
border:5px;
background-color: red;
/*文字居中*/
text-align: center;
}
/*盒子模型*/
.container1{
/*外边距*/
margin: 50px 100px 50px 100px;
/*边框*/
border:10px solid #473eff;
/*内边距*/
padding: 20px;
/*默认自动计算*/
/*width: 100%;*/
height: 150px;
}
.content1{
/*圆角效果*/
border-radius: 10px;
border:5px;
background-color: red;
/*文字居中*/
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<p class="content">红色区域为子标签位置</p>
</div>
<div class="container1">
<p class="content1">红色区域为子标签位置</p>
</div>
</body>
</html>
需要特别注意的是内边距,内边距是在边框与子标签的距离。
外边距合并相关概念,如下两个标签,设置的上边距均为50,但是俩个标签合在一起,两个标签将会出现外边距由外边距大的标签起作用。如下:
3 盒子模型经典案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.top{
width: 100%;
height: 50px;
background-color: black;
}
.top_content{
width: 70%;
height: 100%;
margin: auto;
background-color: #473eff;
}
.info{
width: 70%;
height: 1600px;
margin: auto;
background-color: aqua;
}
.info_top{
width: 100%;
height: 20px;
}
.pic{
width: 100%;
height: 300px;
background-color: #ff1333;
}
.detailedInfo{
width: 100%;
height: 1281px;
background-color: chartreuse;
}
.goods{
width: 25%;
height: 33.3%;
background-color: #1030ff;
float: left;
}
.foot{
width: 100%;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="top">
<div class="top_content">
</div>
</div>
<div class="info">
<div class="info_top"></div>
<div class="pic">
</div>
<div class=" detailedInfo">
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
</div>
</div>
<div class="foot">
</div>
</body>
</html>