<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.box{
height: 100px;
background: lightblue;
border: 10px dashed red;
/*padding内容与边框之间的距离 */
/*padding: 10px 50px 80px 100px;顺时针旋转*/
padding: 10px 50px 80px 100px;
padding-bottom: 80px;
padding-left: 10px;
/*margin元素与元素/body之间的距离*/
/*margin: 10px 50px 80px 100px;顺时针旋转*/
/*margin: 10px 50px 80px 100px;*/
/*margin-bottom: 30px;
margin-top: 50px;
margin-left: 50px;
margin-right: 100px;*/
/*块级元素居中显示*/
width: 1200px;
margin: 0px auto;
}
.box2{
height: 100px;
background: lightcoral;
}
.box3{
background: red;
/*border-top: 1px solid gold;*/
/*padding-top: 1px;*/
padding-top: 30px;
margin-bottom: 30px;
}
.box3-inner{
width: 200px;
height: 200px;
background: green;
margin-left: 200px;
/*margin-top: 29px;*/
}
.spn{
background: lightgreen;
margin-top: 30px;
}
.box4{
height: 100px;
background: lightblue;
margin-bottom: 30px;
}
.box5{
height: 80px;
background: red;
/*margin-top: 30px;*/
}
</style>
</head>
<body>
<div class="box">asasas</div>
<div class="box2"></div>
<!--margin 垂直方向 bug
方法:
一、子元素设置margin-top以及操作父元素
1、在父元素设置border-top,注意实际的距离调整。
2、在父元素设置padding-top,注意实际的距离调整。
二、直接操作父元素
1、直接在父元素设置具体的距离padding-top。
-->
<div class="box3">
<div class="box3-inner"></div>
</div>
<!--行内元素垂直方向margin无效 可通过上面元素设置margin-bottom-->
<span class="spn">我是span</span>
<!--垂直方向上margin距离不知直接相加的 取最大值
方法:
避免上下两个元素都使用margin,
直接在上面元素使用margin-bottom
或
在下面的元素设置margin-top具体的值即可
-->
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
盒子模型
最新推荐文章于 2020-09-30 16:53:00 发布